文档章节

学习 svg 笔记(一) SVG 动画

刘军兴
 刘军兴
发布于 2015/11/30 16:51
字数 1263
阅读 75
收藏 5
点赞 0
评论 0

在前一篇学习 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
博文 150
码字总数 226172
作品 0
昌平
学习 kity 笔记(三) 继续 SVG

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

刘军兴 ⋅ 2015/11/13 ⋅ 0

程序猿必备的10款超有趣的SVG绘制动画赏析

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

爱前端 ⋅ 2017/12/05 ⋅ 0

程序猿必备的8款web前端SVG动画特效

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

爱前端 ⋅ 2017/12/06 ⋅ 0

三天学会HTML5——SVG和Canvas的使用

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

葡萄城控件技术团队 ⋅ 2016/02/04 ⋅ 0

《css揭秘》学习笔记(二)

第三章形状 9、自适应的椭圆 圆形:给一个正方形设置一个大于边长长度一半的border-radius即可。 椭圆: snippetid="2473224" snippetfilename="blog201707071_2396214" name="code" class=...

u014744118 ⋅ 2017/07/07 ⋅ 0

svg动画元素【1】:感性认识

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

佣兵0926 ⋅ 2014/08/31 ⋅ 0

前端日刊君来也

每天努力的日刊君 - 2017.11.18 The Next Day is Always a New Day 技术人发展之路 陈皓:技术人的发展之路 你 30 岁了吗? 你是否规划了自己的技术成长路线? 你现在是否拥有了一些学习能力...

前端新视野 ⋅ 2017/11/19 ⋅ 0

[Android技术专题]动画知识概览

在Android应用开发中我们每天都在接触动画(Activity进入和退出、页面滑动、点击按钮等都有动画效果),但入门容易,真正做好很难。如果要把效果做得自然、看上去很爽需要你有一定的美感;如...

张明云 ⋅ 2016/09/10 ⋅ 0

Android中使用SVG实现炫酷动画效果

前言 SVG,即Scalable Vector Graphics 可伸缩矢量图形。这种图像格式在前端中已经使用的非常广泛,而在移动端的开发中,遇到一些复杂的自定义控件或者动画效果,我们就可以考虑使用SVG。 一...

SilenceOO ⋅ 2017/11/27 ⋅ 0

Android SVG矢量动画机制

导语 黑科技来了,Google在Android5.X中增加了对SVG矢量图形的支持,这对于创造新的高效率动画具有很深远的意义。 主要内容 < path >标签 SVG常见指令 SVG编辑器 Android中使用SVG SVG动画实...

一个有故事的程序员 ⋅ 2017/10/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 21分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 23分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 24分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 38分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 43分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 45分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 45分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 45分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 46分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 46分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部