文档章节

学习 svg 笔记(一) SVG 动画

刘军兴
 刘军兴
发布于 2015/11/30 16:51
字数 1263
阅读 85
收藏 5

在前一篇学习 kityminder 中我们遇到到了动画, 为此先补充学习 svg 动画的知识, 以及相关的 kity 如何封装动画
到 kity.Animator 中的问题.

购买的图书 《SVG精髓》有一个良好的示例网站, 位于 github:
    https://github.com/oreillymedia/svg-essentials-examples

不幸的是有些例子 ie (即使到了 ie10) 看不了; 对于 ie 这种总是为前端拖后腿的浏览器, 我们只能报以吐槽.

 

== 动画基础 ==

SVG 动画特性基于 SMIL 规范(同步多媒体集成语言):
   http://www.w3.org/TR/SMIL3/

(这种)动画系统中, 指定想要动画的属性(如颜色, 动作或变形) 的起始值,结束值, 以及动画开始时间,持续时间.
基本示例:
  

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
  <animate id="animation"
    attributeName="width"   <!-- 要动画的属性 -->
    attributeType="XML"
    from="200"              <!-- 起始值 -->
    to="20"                 <!-- 结束值 -->
    begin="0s"              <!-- 开始时间 -->
    dur="5s"                <!-- 持续时间 -->
    fill="freeze" />
</rect>

于是这里关键的几个属性是 attributeName, from, to, begin, dur.

1. attributeName: 动画中应该持续改变的值, 如这里是 width;
2. attributeType: 这里 width 是一个 xml 属性; 另一种类型是 css ...
3. from, to: 属性的起始值, 结束值. 也可以用 by 取代 to.
4. begin, dur: 动画开始时间, 持续时间. 单位通过数字后的字母给出, 如 s 是秒.
5. 动画结束之后做什么: 如 fill=freeze(冻结为 to 值); 如另一个取值 remove 表示恢复到原始值.

动画时间

1. 时分秒形式:     1:20:23
2. 分秒形式:        02:15
3. 数字后跟h, min, s, ms 缩写形式:     3.5s,  1min, 1.2h 等(不能有空白)

 

同步动画

设定一个动画的开始时间为另一个动画的结束时间.

设一个 animate 为 <animate id='a1' ... />, 则另一个可引用它的时间:
   <animate begin='a1.begin+1.25s' ... />  或
   <animate begin='a1.end+3s' .../>

也能这样设置动画的 end 时间.

 

重复动作

属性 repeatCount 设定一个整形值可让动画重复该次数.

属性 repeatDur 指出重复持续多长时间; 设定为 indefinite 为不限时间(直到页面关闭).

(以上都有简单例子)

 

对复杂属性应用动画

几乎可以为任何属性(type=xml)和样式(type=css) 应用动画, 使这些属性在两个值之间平滑过渡.

对于颜色, 在 from,to 属性中给出有效的颜色即可. 颜色被认为 r,g,b 三个分量, 并分别转换到目标值. 如

    <animate attributeName='fill' from='blue' to='red' ... />

还可以为值为数字列表的属性使用动画(如路径数据, 多边形的点), 要求列表中元素数量不变. 见示例.

 

指定多个值(中间值)

例子: <animate attributeName='fill' values='red;blue;green' ... />

通过给出中间值, 允许一个 animate 定义复杂的变化序列...   从而也能实现交替来回的重复动画.

 

多级动画时间

keyTimes 属性允许以逗号分隔的时间列表(与 values 项数量一致). 第一个项始终为 0, 最后一个为 1, 中间
用 0~1 之间的小数表示, 代表动画持续时间的比例.

更多信息可参阅 SVG 规范...

 

 

<set> 元素

对于非数字属性或没有过渡性质的属性, 可能需要在动画序列的某个时点改变某个值 --> 用 set 元素.

(见示例设置一个 <text> 的 css visibility 属性值为 visible 使其可见, 当某个动画时间点)

 

<animateTransform> 元素

元素 <animate> 不适用于旋转等变换, 此时需要 <animateTransform>. 例子:

<animateTransform attributeType="XML"
      attributeName="transform" 
      type="scale"   --- 指定变换类型为 scale
      from="1" to="4 2"   --- scale 有 sx,sy 两个属性.
      begin="0s" dur="4s" fill="freeze"/>

通过指定 additive='sum' 属性, 可以设置多个动画变化效果累加, 而不是后面覆盖前面的.

 

<animateMotion> 元素

此元素使得让对象沿着任意路径运动变得很容易. (如 直线, 重复循环路径), 例子:

<animateMotion
    path="M50,125 C 100,25 150,225, 200, 125"  --- 沿着此路径移动
    rotate="auto"   --- 可指定方向
    dur="6s" fill="freeze"/>

可通过 <mpath> 子元素引用动画路径, 而非复制一个路径.

为运动指定关键点和时间

类似于上面指定中间(过渡)值. 可使用 keyTimes,keyPoints 属性指定, 得到变速运动. 细节略, 请看示例.

使用 CSS 处理 SVG 动画

第一步: 选中想要运动的元素, 将动画属性作为一个整体.
第二步: 告诉浏览器该元素的哪个属性以及什么时候, 定义在 @keyframes 说明符中.

CSS中有一组 animation-xxx 说明符 (webkit浏览器属性名前面还要加 -webkit-xxx).

看示例中的 css 写的功能和在 <animation> 中差不多, 包括 transform 属性也像.
还是先略去, 需要再查 w3c 规范吧.

 

总结

通过一组数据描述, 然后用引擎解释使对象可以丰富多彩地动画起来, 这种思想和实现都值得学习.

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 184
码字总数 226359
作品 0
昌平
学习 kity 笔记(三) 继续 SVG

接着上篇, SVG 元素就这些? (rect,circle ..., path) 还是w3c课程太简单...? 还是要买书? w3cschool 下一篇就直接学 svg 滤镜了. 可用的滤镜有 feBlend, feXXX (大约20个), (fe 是什么的缩写...

刘军兴
2015/11/13
0
0
程序猿必备的8款web前端SVG动画特效

  1、SVG图片波浪效果渲染动画   今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的...

爱前端
2017/12/06
0
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。 第2天将学习如何使用Canvas 和...

葡萄城控件技术团队
2016/02/04
224
0
将 Linux 终端会话录制成 SVG 动画

录制终端会话可以满足我们不同类型的需求。通过录制终端会话,你可以完整记录你在终端中执行的操作,将其保存以供后续参考。通过录制终端会话,你还可以向青少年、学生或其它打算学习 Linux ...

26%
08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ubuntu 18.04 desktop 截图快捷键

如图,点击下方的 add shortcut 为这个快捷键命名 输入截图 command gnome-screenshot -a 设置快捷键 常用为 Ctrl - Alt + a 参考 http://os.51cto.com/art/200903/113091_all.htm...

公孙衍
31分钟前
0
0
一个六年Java程序员的从业总结:比起掉发,我更怕掉队

恍然间,发现自己在这个行业里已经摸爬滚打了五、六年了,原以为自己就凭已有的项目经验和工作经历怎么着也应该算得上是一个业内比较资历的人士了,但是今年在换工作的过程中却遭到了重大的挫...

老道士
33分钟前
16
2
Spacemacs快捷键

由于Spacemacs快捷键太多,为方便使用,将常用的快捷键记录在此。 以下快捷键都是在emacs的evil模式下 Buffers操作 创建名称为<buffer-name>的buffer SPC b b <buffer-name> 从已打开的buf...

yxmsw2007
38分钟前
1
0
GO冒泡,二分查找

package mainimport("fmt")func main() {var arr [5]int = [5]int{11,13,9,2,25}maopao(&arr)fmt.Println("arr = ", arr) //[2 9 11 13 25]findIndex := binaryFind(&arr, 0......

汤汤圆圆
今天
1
0
工作2年半跳槽面试阿里,成功拿到offer,凭什么?

2015年刚毕业的我,进入了一家小小的公司实习工作,在学校学了三年软件开发的我,还是想去寻找一份互联网行业的工作,这样更能学以致用发挥自己的特长。一直到18年三月份,我辞掉已有的工作,...

java知识分子
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部