码迷,mamicode.com
首页 > 其他好文 > 详细

svg学习心得一

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

标签:xmlns   ict   控制   version   end   cti   代码   技术   数组   

之前一直看别人写的各种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边线宽的一半
}

svg学习心得一

标签:xmlns   ict   控制   version   end   cti   代码   技术   数组   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!