文档章节

学习 svg 笔记(一) SVG 动画

刘军兴
 刘军兴
发布于 2015/11/30 16:51
字数 1263
阅读 92
收藏 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 规范吧.

 

总结

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

 

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 0
昌平
私信 提问
学习 kity 笔记(三) 继续 SVG

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

刘军兴
2015/11/13
0
0
程序猿必备的10款超有趣的SVG绘制动画赏析

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

爱前端
2017/12/05
0
0
程序猿必备的8款web前端SVG动画特效

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

爱前端
2017/12/06
0
0
html5新效果,请各位同事本周学习一下

Twitter“点赞”红心按钮CSS3动画特效 http://www.htmleaf.com/Demo/201508302494.html HTML5 SVG制作滚动变形的半圆形页面头部特效 http://www.htmleaf.com/html5/SVG/201508302493.html H......

hi30059478
2016/02/21
14
0
svg动画元素【1】:感性认识

背景说明:svg动画确切的说是SVG SMIL 动画,SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范,在规范中制定了一个基本的XML动画特征集合。SVG吸收了S...

佣兵0926
2014/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Eos测试框架EosFactory

EOS Factory包含一个完整的EOS测试框架,可以进行智能合约的开发和测试。由Tokenika于创建于2017年的这个基于Python的EOS测试框架可以轻松地完成智能合约的开发、部署与测试。 如果你希望马上...

汇智网教程
15分钟前
2
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
41分钟前
1
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
44分钟前
2
0
mac 下 mysql 8.0.13 安装并记录遇到的问题 以便以后查看

安装 官网mysql 下载地址 安装过程 省去 安装好之后 下载navicat 错误1 链接 遇到 mysql 2003 - Can't connect to MySQL server 错误, 解决方案 重启mysql 服务 #错误2 ERROR 1045: Acces...

杭州-IT攻城狮
昨天
5
0

中国龙-扬科
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部