SVG 学习<五> SVG动画
目录
SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
先上个动画图
说道SVG动画不得不提到两个属性:stroke-dasharray(这个前面有提到,做虚线的)stroke-dashoffset (这个是关键)。
先说说stroke-dasharray 之前提过 可以把线条做成虚线状,值可以为一个数值 也可以是一个数组。详见:SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 最后一段。在动画里 stroke-dasharray 用来绘制路径或者虚线环绕效果。
stroke-dashoffset : 官方解释 svg的偏移
做了几个demo后发现 stroke-dashoffset 类似margin只不过 stroke-dashoffset 的偏移是相对于 图形或线段的第一个点,比如 矩形就是相对于矩形右上角的点,偏移则是相对于svg元素路径的偏移。
案例分解
先看上图的第二个图形(红色矩形)
HTML代码
<rect class="No1" x="220" y="30" width="200" height="200" fill="none" stroke-width="10" stroke="red"/>
css代码
.No1{
stroke-dasharray:;
stroke-dashoffset:;
-webkit-animation: dash 5s linear infinite;
animation: dash 5s linear infinite;
}
/*动画*/
@-webkit-keyframes anim { to { stroke-dashoffset:; } }
@keyframes anim { to { stroke-dashoffset:; } }
代码解析
stroke-dasharray 的值 大于等于 矩形周长,若等于周长动画完成后动画立刻结束,这里我设置的值比周长多100 动画会在图形绘制结束后几秒后结束,视觉效果会好一些。
stroke-dashoffset 的值 一般等于 矩形周长 ,若大于 矩形周长 动画效果延时出现, 若小于 矩形周长 动画效果提前出现。
第三个蓝色虚线环绕矩形
HTML代码
<rect class="No2" x="460" y="30" width="100" height="200" fill="none" stroke-width="10" stroke="blue"/>
css代码
.No2{
stroke-dasharray:;
stroke-dashoffset:;
-webkit-animation: anim 5s linear infinite;
animation: anim 5s linear infinite;
}
/*动画*/
@-webkit-keyframes anim { to { stroke-dashoffset:; } }
@keyframes anim { to { stroke-dashoffset:; } }
stroke-dasharray和矩形周长差值成倍数 则形成虚线环绕效果。
第四个绿色矩形
HTML代码
<rect class="No3" x="620" y="30" width="250" height="150" fill="none" stroke-width="10" stroke="green"/>
css代码
.No3{
stroke-dasharray:;
stroke-dashoffset:;
-webkit-animation: anim 5s linear infinite;
animation: anim 5s linear infinite;
}
/*动画*/
@-webkit-keyframes anim { to { stroke-dashoffset:; } }
@keyframes anim { to { stroke-dashoffset:; } }
stroke-dashoffset 值为矩形周长三倍 边框围绕矩形三周, 若为矩形周长两倍 边框围绕矩形两周。
第一个青色五角星
HTMl代码
<polygon points="100,10 40,180 190,60 10,60 160,180" stroke-width="5" stroke="rgb(0,200,200)" fill="none"/>
css代码
polygon{
stroke-dasharray:;
stroke-dashoffset:;
transition: 2s all;
}
svg:hover polygon{
stroke-dasharray: 30,10;
stroke-dashoffset:;
}
hover效果 stroke-dashoffset 值大于等于五角星所有边长总和。
若还有不懂,多试几次demo改改 stroke-dashoffset 和 stroke-dasharray的值就明白了。
SVG 学习<五> SVG动画的更多相关文章
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 2. svg学习笔记-svg中的坐标系统和viewbox
我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...
- HTML5学习(五)----SVG
参考教程地址:http://www.w3school.com.cn/html5/html_5_svg.asp HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalabl ...
- Spine学习五- spine动画融合
在许多地方,都需要用到动画融合,unity的新版动画系统已经能够很方便的进行动画融合,那么使用spine的动画状态机的情况下,如何来进行动画融合呢? 官方有两种方案,一种是使用混合动作实现,另一种是使 ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
随机推荐
- Typescript学习总结之类
1. 类的定义和使用 class Student { name; say() { console.log(this.name + " saying"); } } var s1 = ...
- Linux rcp命令详解
Linux rcp命令 Linux rcp命令用于复制远程文件或目录. rcp指令用在远端复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件 ...
- 推荐四款 Bug 管理系统,最适合你的才是最好的!
转载自:https://www.jianshu.com/p/e7d3121eaaec 在这个移动互联网的时代,每天都会涌入大量新的 App,想要留住你的用户,必须时刻保持产品创新与系统的稳定.对于 ...
- 【java】函数重载
重载概念(Overloading): 在同一个类中,允许存在一个以上的同名函数,主要他们的参数个数和参数类型不同即可 重载特点: 与返回值无关,只和参数类型和参数个数有关系(重载只和参数列表有关系) ...
- 【java】for循环嵌套
循环嵌套:外循环控制行数,内循环控制每一行的列数,也就是每一行的元素个数 需求:打印出9*9的乘法表 class Demo { public static void main(String[] arg ...
- 使用Vivado进行行为级仿真
使用Vivado进行行为级仿真 1.编写设计文件 module test( input in, output out ); assign out = ~in; endmodule 2.编写testbe ...
- 转:区块链开发(一)搭建基于以太坊go-ethereum的私有链环境
区块链开发(一)搭建基于以太坊go-ethereum的私有链环境 wo541075754 · 2016-11-07 13:00:03 · 3730 次点击 · 预计阅读时间 3 分钟 · 约1小时前 ...
- python 中变量引用问题
普通变量,如a=10,str="fdaf",它们在函数内的值是不会被带到函数外的,除非在函数内加上global,而引用是惰性原则,从最近的同名父级同名变量引用值 其它变量如列表,字 ...
- IKAnalyzer 添加扩展词库和自定义词
原文链接http://blog.csdn.net/whzhaochao/article/details/50130605 IKanalyzer分词器 IK分词器源码位置 http://git.osch ...
- Python selenium —— selenium与自动化测试成神之路
From: https://blog.csdn.net/huilan_same/article/details/52559711 忽然想谈谈自动化的学习路径,因为发现很多人总是急于求成,不懂该如何学习 ...