zoukankan      html  css  js  c++  java
  • SVG实战开发学习(八)——动画

    【SVG支持的SML动画元素的通用属性】

    SVG中的动画元素有五个,它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示;

    <animate>:改变数值的属性或样式的值;

    <set>:改变非数值的属性或样式的值,如visibility属性等;

    <animateMotion>:沿着某路径移动SVG元素获得动画效果;

    <animateColor>:改变某些元素与颜色有关的属性或样式的值;

    <animate Transform>:改变SVG元素进行坐标变换时的动画效果;

    1、与标示相关的常用属性

    (1)attributeName="<attributeName>":指明所作用的SVG元素中哪个属性或样式需要产生动画效果。

    (2)attributeType=" XML | CSS | auto ":指明产生动画效果的属性或样式值是在哪个命名空间定义的。"XML"表示"attributeName"的值是默认的XML命名空间里定义的XML属性名;"CSS"表示"attributeName"的值是默认CSS属性的名称;"auto"是默认值,解析器解析时先在CSS属性列表中查找是否有匹配"attributeName"的属性名,然后再在XML的命名空间里找。

    2、与时间控制相关的常用属性

    begin=" <clock-time-value> | wallclock-sync-value | indefine | eventName ":定义动画的开始时刻。定义的值有很多种。

    a) 时间偏移值:如"3s"表示3S后开始播放动画,还可以采用"min"(分钟),"h"(小时)等。也可以使用形如"hh:mm:ss.xxxx"的精确长时间表示形式,其含义是hh小时mm分钟ss.xxxx秒后开始播放动画。

    b)现实世界中的时间:定义成将来的某个具体时刻,但定义后要保证SVG文档在这个时间之前打开。

    c)Indefinite:表示这个动画不会自动开始,需要使用动态脚步调用"beginElement()"方法或指向该动画元素的超链接被激活才会开始。

    d)eventName:表示在某个事件触发时开始播放动画。如:begin="mousedown",鼠标左键按下时开始播放动画。

       dur="<clock-time-value | indefinite>":定义动画的持续时间,取值含义类似"begin"属性。

       end="<clock-time-value | indefinite>  ":定义动画的结束时刻,取值含义类似"begin"属性。不同的是,如果是"indefinite"属性,需要使用动态脚本调用"endElement()"方法才会结束,如果取值是"3s"、"3min"这样的时间形式,结束时刻与开始时刻无关,3秒或者3分钟后就结束。

    e)restart="always | whenNotactive | never":定义动画重播的方式,默认值是"always",表示动画任意时刻都可以重播,比如设定了动画播放的触发条件是"mousedown",那么只有在鼠标左键按下的时候才会重播。"whenNotactive"表示该动画只有在播放结束后才会重新开始,过程中不受任何影响。"never"表示该动画不会重播,只播一次。

    f)repeatCount="<integer>|indefinite":定义动画重播的次数,需整数值。如果取值是"indefinite",那么表示无限重播。

    g)repeatDur="<integer> | indefinite ":定义动画重播的总时间,比如取值是"5s",而该动画播放一次的时间是1秒,那么动画最多只会重播5次(5/1=5)就会停止;取值是"indefinite"表示无限重复播放。

    h)fill=" freeze | remove  ":定义动画播放完毕后是停留在播放的终点还是回到起始位置。"freeze"表示"凝固" 在播放的终点;"remove"表示"移除"所有内容回到播放的起点。

    【 与过程控制相关的常用属性 】

    下面看看动画元素都含有哪些相关属性(不适用于<set>元素)。

    a)from="<value>":定义该动画元素所作用的属性值在开始变化时的值。

    b)to="<value>":定义该动画元素所作用的属性值在结束变化时的值。

    c)by="<value>":定义该动画元素所作用的属性值每次变化的步长值。

    以上三个属性不同时使用,一般采用"from"、"to"、和 "from"、"by"这两个组合。

    d)calcMode="discrete | linear | paced |spline":定义动画关键点直接过渡的插值计算方式。"discrete"表示不采用插值算法,动画是从一个关键点跳跃到另外一个关键点,可想而知,动画效果就是跳跃式的;"linear"表示采用线性插值算法,这是<animate>元素和<set>元素采用的默认插值算法:"paced"表示采用在时间上均匀变化的方法插值:"spline"表示采用三次贝塞尔曲线的方式来插值,需要"keySplines"

    属性的配合。

    【与动画叠加相关的常用属性】

    a)additive=" replace |sum ":定义动画播放过程中是否在前一帧的基础上进行,默认值是"replace",也就是每次点擦除上一帧的动画效果。"sum"表示叠加所有的动画效果。

    b)accumulate=" none | sum ":定义动画在循环播放的时候,后一次播放是否擦除前一次的痕迹,所以这是针对播放次数而不是帧。默认值是"sum"表示不擦擦,"none"表示擦除。

    由此可见,设置"accumulate"属性为"sum"时,也就等同于设置"additive"的属性为"sum"。

  • 相关阅读:
    Linux 多路复用 select / poll
    Linux 驱动层实现阻塞和非阻塞
    Linux 中断下半部
    Nginx基本配置文件
    lnmp “.user.ini”无法删除解决方法
    阿里云服务器配置nginx和PHP
    PHP使用某个键值对二维数组排序
    Laravel 生成二维码的方法
    Redis五种数据类型-设置key的过期时间
    laravel中redis队列的使用
  • 原文地址:https://www.cnblogs.com/cacti/p/4721618.html
Copyright © 2011-2022 走看看