使用“stroke-dashoffset”为 svg 制作动画并不顺利答案

【问题标题】：Animating svg with "stroke-dashoffset" doesn't go smooth使用“stroke-dashoffset”为 svg 制作动画并不顺利
【发布时间】：2021-11-23 21:16:25
【问题描述】：

我正在关注这个codepen 来创建对话动画。但是当我设置更大的对话框宽度和高度时，动画似乎不像参考那样流畅。似乎问题出在 svg stroke-dashoffset 值上，但我不确定我需要设置什么值。 Here is the codepen我转载的。

<div id="modal-close-default" class="" uk-modal>
   <div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
      ..
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
         <rect x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
      </svg>
   </div>
</div>

#modal-close-default {
    .uk-modal-dialog.custom-modal {
        ..
    }
    .modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 3px;
        rect {
            stroke: #fff;
            stroke-width: 2px;
            stroke-dasharray: 976; // total of dialog width and height (not sure what value to add)
            stroke-dashoffset: 976;
        }
    }
    &.uk-open>.uk-modal-dialog.custom-modal {
        .. 
        .modal-svg {
            rect {
                animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
            }
        }
    }
}

@keyframes sketchIn {
    0% {
        stroke-dashoffset: 976;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

【问题讨论】：

标签： css css-animations stroke-dasharray

【解决方案1】：

你算错了矩形的周长

如果比较粗糙，那你需要考虑这个(width +height) * 2 = 1952px

JS 方法getTotalLength() 将帮助您精确计算周长，同时考虑四舍五入。

发生舍入 ~= 1946px

.modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        
        border-radius: 3px;
        }
        rect {
            stroke: silver;
            stroke-width: 6px;
            stroke-dasharray: 1946; // total of dialog width and height (not sure what value to add)
            stroke-dashoffset: 1946;
            animation: sketchIn 5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards; // animation is not smooth
            }
        @keyframes sketchIn {
    0% {
        stroke-dashoffset: 1946;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

<div id="modal-close-default" class="uk-modal">
   <div class="uk-modal-dialog custom-modal six uk-modal-body lab-border-7 uk-margin-auto-vertical">
   
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 600 376" width="600" height="376"  >
         <rect id="rect" x="0" y="0" fill="none" width="600" height="376" rx="3" ry="3"></rect>
      </svg>
   </div>
</div> 
<script>
let total = rect.getTotalLength();
console.log(total)
</script>

【讨论】：