svg学习心得一

Posted 2020-09-07 若栖1017

svg动画 动画基础 圆环加载动画实例

之前一直看别人写的各种svg动画，画的svg图画，感觉好炫酷，也感觉好难，总有一种无法入手的感觉。但最近由于工作需要，要做一些小动画，要模仿app的原生的，就做了一些尝试及学习。下面是我的一些学习心得：

要做svg动画，就要首先了解一下svg动画的过程

 

以圆形缓冲加载动画为例：

 

• 首先要确定画布的位置：
• 画一个底边圆
• 画一个加载的圆

 

<svg xmlns="" version="1.1" id="my_appointment" width="56" height="56">

     <circle  stroke-width="4" stroke="#f00" fill="none" r="26" cx="28" cy="28"></circle>

     <circle  stroke-width="4" stroke="#000" fill="none" r="26" cx="28" cy="28" stroke-dasharray="0 163.36281798666926"></circle>

</svg>

 

效果图如下：

其工作原理 就是通过stroke-dasharray参数来实现动画效果

SVG stroke-dasharray 属性

stroke-dasharray用于创建虚线，也就是把svg图用虚线来画，这个属性可以是一个数组，数组里面的值就是虚线的值，依次循环。

而实现这个动画的核心就是控制虚线的值

首先 我们要求一下这个圆的周长。2*Math.PI*r（这里可能要用到一些平面几何的知识，忘记的小伙伴需要去求一下）

这里我们只需要为stroke-dasharray 设置2个参数 虚线长 间隔长

 

核心代码：

perimeter=2*Math.PI*R;

obj.attr("stroke-dasharray",perimeter*0.01*start+" "+perimeter*(1-0.01*start));

实现：

 

function animal(obj,R,deriction,start,end) {

    var perimeter=2*Math.PI*R;

    var tt=setInterval(function () {

        obj.attr("stroke-dasharray",perimeter*0.01*start+" "+perimeter*(1-0.01*start));

        if(deriction){

            if(start>end){

                clearInterval(tt);

            }

            start++;

        }else{

            if(start<end){

                clearInterval(tt);

            }

            start--;

        }

 

    },50)

_this 动画的父对象 start 开始的百分比为整数如1 end 结束的百分比 如100  direction 布尔值 true 顺时针 false 逆时针  line_w边线宽的一半

}