svg学习心得一

时间：2017-04-02 11:06:44 阅读：186 评论：0 收藏：0 [点我收藏+]

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

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

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

</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边线宽的一半

}

原文地址：http://www.cnblogs.com/zjy1017/p/6658300.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行