使用 "stroke-dashoffset" 动画 svg 并不顺利
Animating svg with "stroke-dashoffset" doesn't go smooth
我正在关注我转载的这个codepen to create a dialog animation. But the animation doesn't seem to go smooth like the reference when I set the bigger dialog width and height. It seems like the issue is with svg stroke-dashoffset
values but I am not sure what values do I need to set. 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;
}
}
你计算错了矩形的周长
如果粗糙,那么你需要考虑这个(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>
我正在关注我转载的这个codepen to create a dialog animation. But the animation doesn't seem to go smooth like the reference when I set the bigger dialog width and height. It seems like the issue is with svg stroke-dashoffset
values but I am not sure what values do I need to set. 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;
}
}
你计算错了矩形的周长
如果粗糙,那么你需要考虑这个(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>