svg动画 animate
最近使用到svg的动画animate,简单总结下animate的主要属性:
1.定义:SVG 的animate
动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里,属性从开始值变成结束值。
2.SVG animate参数详解
2.1 attributeName = <attributeName>
要变化的元素属性名称
a. 可以是元素直接暴露的属性,例如,对应的text元素上的x, y或者font-size;
b. 可以是CSS属性。例如,透明度opacity.
2.2 attributeType = “CSS | XML | auto”
attributeType支持三个固定参数,CSS/XML/auto. 用来表明attributeName属性值的列表。
x, y以及transform就属于XML, opacity就属于CSS. auto为默认值,
自动判别的意思(实际上是先当成CSS处理,如果发现不认识,直接XML类别处理)。因此,如果你不确信某属性是XML类别还是CSS类别的时候,我的建议是不设置attributeType值,直接让浏览器自己去判断,几乎无差错。
那么问题来了?“既然浏览器酱可以自己判断属性类别,那这个属性还有什么意义吗?”我觉着可能是某些属性,XML能其作用,CSS也能其作用,例如font-size, 此时就需要明确下归属。
2.3 from, to, by, values
from = “<value>“ 动画的起始值
to = “<value>“ 指定动画的结束值
by = “<value>“ 动画的相对变化值
values = “<list>“ 用分号分隔的一个或多个值,可以看出是动画的多个关键值点
from, to, by, values虽然属于一个家族,但是相互之间还是有制约关系的。有以下一些规则:
a. 如果动画的起始值与元素的默认值是一样的,from参数可以省略。
b. (不考虑values)to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值,by表示相对值。拿位移距离,如果from是100, to值为160则表示移动到160这个位置,但是,如果by值是160,则表示移动到100+160=260这个位置。
c. 如果to,by同时出现,则只识别to.
d. 如果to,by,values都没设置,自然没动画效果。如果任意(包括from)一个属性的值不合法,规范上说是没有动画效果。但是,据我测试,FireFox浏览器确实如此,但是Chrome特意做了写容错处理。例如,本来是数值的属性,写了个诸如a这个不合法的值,其会当作0来处理,动画效果依然存在。
e. values可以是一个值或多值。根据我在Chrome浏览器下的测试,是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候,from, to, by的值都会被忽略。那values属性是干什么的呢?别看名字挺大众的,其还是有些功力的。我们实现动画,不可能就是单纯的从a位置到b位置,有时候,需要去c位置过渡下。此时,实际上有3个动画关键点。而from, to/by只能驾驭两个,此时就是values大显身手的时候了!
// 用动画实现一个圆点呼吸灯的效果,即opacity从1到0.2的变化
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="4">
<animate attributeName='opacity' dur='2s' values="1;.2;1" repeatCount="indefinite"/>
</circle>
</svg>
2.4 begin, end
begin指动画开始的时间,看上去很简单,实际上很复杂的,例如:beigin="3s"只是最简单最基本的表示。
begin的定义是分号分隔的一组值,单值只是其中的情况之一。例如,beigin="3s;6s"表示的是3s之后动画走一下,6s时候动画再走一下(如果之前动画没走完,会立即停止从头开始)。所以,如果一次动画时间为3s, 即dur="3s",同时没有repeatCount属性时候,我们可以看到动画似乎连续执行了2次。
beigin="3s"也可以简写作beigin="3", FireFox和Chrome浏览器都是支持的。小数也支持例如:beigin="1.5" 。如果begin属性写错了一律按begin=0处理。
begin的单值除了普通value,还有下面这些类别的value:
offset-value | syncbase-value | event-value | repeat-value | accessKey-value | media-marker-value | wallclock-sync-value | "indefinite"
实在复杂不在细说了,有兴趣的同学自己看参考资料。
end指动画结束的时间,end与begin除了名字和字面含义不一样,其值的种类与表意都是一样的,就不啰嗦了。
2.5 dur
dur属性标识了动画的简单持续时间。该属性值比begin简单多多多了,就两种情况:常规时间值 | "indefinite"。
“常规时间值”就是3s之类的正常值;
"indefinite"指事件无限。不过,动画时间无限,实际上就是动画压根不执行的意思。因此,设置为"indefinite"跟没有dur是一个意思,与dur解析异常一个意思。
2.6 repeatCount, repeatDur
repeatCount表示动画执行次数,可以是合法数值或者“indefinite”(无限循环)。
repeatDur定义重复动画的总时间。可以是普通时间值或者“indefinite”(无限循环)。
2.7 fill
fill表示动画间隙的填充方式。
支持参数有:freeze | remove. 其中remove是默认值,表示动画结束直接回到开始的地方。
freeze“冻结”表示动画结束后像是被冻住了,元素保持了动画结束之后的状态。
3.备注
参考:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate
http://tutorials.jenkov.com/svg/svg-animation.html
https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/
svg动画 animate的更多相关文章
- SVG 动画(animate、animateTransform、animateMotion)
原文:https://blog.csdn.net/chy555chy/article/details/53535581 参考 MDN开发文档 https://developer.mozilla.org ...
- SVG动画
动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...
- 推荐8个实现 SVG 动画的 JavaScript 库
SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...
- 带给你灵感:30个超棒的 SVG 动画展示【下篇】
前端开发人员和设计师一般使用 CSS 来创建 HTML 元素动画.然而,由于 HTML 在创建图案,形状,和其他方面的局限性,它们自然的转向了 SVG,它提供了更多更有趣的能力.借助 SVG,我们有更 ...
- HTML5的 2D SVG和SVG DOM的学习笔记(2)---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
- SVG动画实践篇-模拟音量高低效果
git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...
- svg 动画 透明度 放大缩小 x轴Y轴
参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...
- 10 个非常实用的 SVG 动画操作JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...
- 10 个非常有用的 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...
随机推荐
- Codeforces 219D Choosing Capital for Treeland:Tree dp
题目链接:http://codeforces.com/problemset/problem/219/D 题意: 给你一棵树,n个节点. 树上的边都是有向边,并且不一定是从父亲指向儿子的. 你可以任意翻 ...
- Codeforces 432D Prefixes and Suffixes:KMP + dp
题目链接:http://codeforces.com/problemset/problem/432/D 题意: 给你一个字符串s,让你找出所有既是前缀又是后缀的子串,并输出它们分别出现了多少次. 题解 ...
- AngularJs 相应回车事件
最近做项目,要用到AngularJs,之前也有用过一点点,但仅限于数据的绑定,这次项目要整个前端需要使用这个框架,可能是不熟悉的原因,感觉这代码搞起来非常的不便利,:现总结一个响应回车事件: < ...
- Native App vs Web App 以及 Hybrid App的实现原理
移动应用基本的三种类型 1) Native 应用程序 2) Web 应用程序 3) 混合应用程序(Hybrid: Native应用和web应用结合) Native 应用 直接运行在电脑上或者智能 ...
- hdu 1003 Max Sum(基础dp)
Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Twitter的流处理器系统Heron——升级的storm,可以利用mesos来进行资源调度
2011年,Twitter发布了开源的分布式流计算系统Storm.四年后,随着用户数量的急剧增加,Twitter每天要处理的事件已经增加到十亿以上.Storm系统应对如此庞大而复杂多样的流数据变得十分 ...
- PHP如何得到数组最后元素的key
1.array_keys(end($arr)) $array = array( 'one'=>1, 'two'=>2, 'three'=>3, 'four'=>4, ); $a ...
- NOIp2018集训test-10-18 (bike day4)
这是一套简单题,这几天的考试让bike老爷感觉很绝望,说实话我也确实不知道还能怎么更简单了. 这几天的题换做llj.sxy应该都能轻松AK吧,至少随便考个250+应该不是问题吧,我越来越觉得觉得我跟他 ...
- 配置 VS Code 调试 PHP
配置 VS Code 调试 PHP 1.下载 xampp 集成服务器wampserver3.1.0-Apache2.4.7_PHP5.6.3-7.0.23-7.1.19_MySQL5.7.19_Mar ...
- Poj 2328 Guessing Game(猜数字游戏)
一.题目大意 两个小盆友玩猜数字游戏,一个小盆友心里想着1~10中的一个数字,另一个小盆友猜.如果猜的数字比实际的大,则告诉他"too high",小则"too low& ...