精图规范1.0----19 动画 Animation

previous  next   contents   elements   attributes   properties   index  


04 September 2001

19 动画 Animation



内容 Contents


 

19.1 引言 Introduction

因为环球网是一种动态的媒体,精图支持在时间上改变矢量图形的能力. 精图内容可以按照下列方式进行动画:   Because the Web is a dynamic medium, SVG supports theability to change vector graphics over time. SVG content can be animated in thefollowing ways:

  • 使用精图的 动画元素. 精图文档片段可以描述对文档元素进行基于时间的修改. 使用各种动画元素, 你可以定义运动路径, 淡入或淡出效果, 以及对象的扩大, 收缩, 旋转或改变颜色.   Using SVG's animation elements. SVG document fragments can describe time-based modifications to the document's elements. Using the various animation elements, you can define motion paths, fade-in or fade-out effects, and objects that grow, shrink, spin or change color.
  • 使用 精图文档对象模型. 精图文档对象模型与"文档对象模型(DOM)级别1"[DOM1]以及"文档对象模型(DOM)级别2"[DOM2]规范的主要方面保持兼容. 每一性质和样式表的设置对脚本而言是可存取的, 并且精图提供一套附加的文档对象模型接口来支持通过脚本所进行的动画. 其结果是, 事实上可以进行任何种类的动画. 在脚本语言比如ECMAScript 中的时间机制可以用来启动和控制动画. (参见下面的 例子.)    Using the SVG DOM. The SVG DOM conforms to key aspects of the "Document Object Model (DOM) Level 1" [DOM1] and "Document Object Model (DOM) Level 2" [DOM2] specifications. Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. As a result, virtually any kind of animation can be achieved. The timer facilities in scripting languages such as ECMAScript can be used to start up and control the animations. (See example below.)
  • 精图被设计成允许未来版本的SMIL [SMIL1] 使用动画的或者静态的精图内容作为媒体部件.   SVG has been designed to allow future versions of SMIL [SMIL1] to use animated or static SVG content as media components.
  • 在将来, 期望未来版本的 SMIL 将被模块化并且它的组件可以与精图和其它XML语法相结合来完成动画效果.  In the future, it is expected that future versions of SMIL will be modularized and that components of it could be used in conjunction with SVG and other XML grammars to achieve animation effects.

19.2 动画元素 Animation elements

19.2.1 概览 Overview

精图动画元素是在与W3C同步多媒体(SYMM)工作组的协作下进行开发的, 此开发组即同步多媒体集成语言(SMIL) 1.0规范 [SMIL1]的开发者.    SVG's animation elements were developed incollaboration with the W3CSynchronized Multimedia (SYMM) Working Group, developers of the SynchronizedMultimedia Integration Language (SMIL) 1.0 Specification [SMIL1].

SYMM 工作组, 在与精图工作组的协作过程中,已经创作 SMIL 动画规范 [SMILANIM], 此规范表示一种通用目的的 XML 动画特征集. 精图与定义在SMIL 动画规范相结合并提供某些针对精图的扩展.   TheSYMM Working Group, in collaboration with the SVG Working Group, has authoredthe SMIL Animation specification [SMILANIM],which represents a general-purpose XML animation feature set. SVG incorporatesthe animation features defined in the SMIL Animation specification and providessome SVG-specific extensions.

关于在任何支持SMIL动画的语言中可用的方法与特征的介绍, 请参见 SMIL动画概览以及 SMIL动画的动画模型.关于动画之外的动画特征的列表,请参见 对SMIL 动画的精图扩展.  For an introduction to the approach and features available in any language thatsupports SMIL Animation, see SMILAnimation overview and SMILAnimation animation model. For the list of animation features which gobeyond SMIL Animation, see SVGextensions to SMIL Animation.

19.2.2 与SMIL动画的关系 Relationship to SMIL Animation

精图是SMIL动画的宿主语言 故引入了一些那个规范所允许的增加的约束和特征. 除了在此规范中被特别明显地说明的精图特定的规则外, 精图的动画元素和性质的正式定义在 SMIL 动画 [SMILANIM] 规范中.    SVG is a hostlanguage in terms of SMIL Animation and therefore introduces additionalconstraints and features as permitted by that specification. Except for anySVG-specific rules explicitly mentioned in this specification, the normativedefinition for SVG's animation elements and attributes is the SMIL Animation [SMILANIM]specification.

精图支持在SMIL动画规范种定义的四种动画元素:  SVG supportsthe following four animation elements which are defined in the SMIL Animationspecification:

  

'animate'

  

允许标量的性质和属性的值随时间不同而指派不同的值   allows scalar attributes and properties to be assigned different values over time

  

'set'

  

  'animate'的方便的简写, 用于对于非数值的性质和属性指派动画值, 比如 'visibility' 属性    a convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property

  

'animateMotion'      

  

沿着一条运动路径移动一个元素  moves an element along a motion path

  

'animateColor'

  

随着时间的变化而修改特定性质或属性的颜色值 modifies the color value of particular attributes or properties over time

另外, 精图包含下列对SMIL动画的兼容的扩展:  Additionally, SVG includes the following compatible extensions to SMILAnimation:

  

'animateTransform'

  

随着时间的变化而修改精图变换性质之一, 比如transform 性质  modifies one of SVG's transformation attributes over time, such as the transform attribute

  

path attribute

  

精图允许在 path 性质中指定的精图的 路径数据 语法的特征 被指定到 'animateMotion' 元素中 (SMIL 动画仅允许在 path性质中精图路径数据语法的一个子集)     SVG allows any feature from SVG's path data syntax to be specified in a path attribute to the 'animateMotion' element (SMIL Animation only allows a subset of SVG's path data syntax within a path attribute)

  

'mpath' element

  

精图允许一个 'animateMotion' 元素包含子 'mpath' 元素 此元素引用一个精图 'path' 元素作为其运动路径的定义   SVG allows an 'animateMotion' element to contain a child 'mpath' element which references an SVG 'path' element as the definition of the motion path

  

keyPoints attribute

  

精图加入 keyPoints 性质到 'animateMotion' 中以便提供对运动路径动画的速度的精确控制   SVG adds a keyPoints attribute to the 'animateMotion' to provide precise control of the velocity of motion path animations

  

rotate attribute

  

精图加入 rotate 性质到 'animateMotion' 中以便控制是否一个对象自动进行旋转使得其x-轴指向与运动路径的方向切向量相同的方向  (或相反的方向)    SVG adds a rotate attribute to the 'animateMotion' to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path

为了兼容此语言的其它方面, 精图经由 xlink:href 性质使用URI引用 来标识将进行动画的目标元素.    Forcompatibility with other aspects of the language, SVG uses URI referencesvia an xlink:href attribute to identify the elements whichare to be targets of the animations.

SMIL 动画要求宿主语言定义文档开始和文档结束的含义. 因为一个 'svg' 有时是XML文档树的根而其它时候又为一个父XML语法的组件,一个给定的精图文档片段的文档开始 定义为严格的时间点即 'svg' 元素的 onload 事件 被触发的时间. 一个精图文档片段的文档结束The 是此点即文档片段被释放并且用户代理不再处理此文档.    SMIL Animation requires that the host language define the meaning for document begin and the document end. Since an 'svg' is sometimes the root of the XML documenttree and other times can be a component of a parent XML grammar, the documentbegin for a given SVG document fragment is defined to be the exact time atwhich the 'svg' element's onloadevent is triggered. The document end of an SVG document fragmentis the point at which the document fragment has been released and is no longerbeing processed by the user agent.

对精图而言, 术语 表示时间 表示的是相对于给定文档片段的文档开始在时间轴上的位置.  For SVG, the term presentation time indicates the position in the timeline relative to the documentbegin of a given document fragment.

精图定义了比在SMIL动画[SMILANIM] 规范中定义的更多的强制的错误处理. SMIL 动画定义错误处理行为在某种错误的情形下文档仍然继续运行, 而在精图文档片段内所有动画在文档中出现任何错误的事件时将停止 (参见 错误处理).   SVG defines more constrained error processing than is defined in the SMILAnimation [SMILANIM]specification. SMIL Animation defines error processing behavior where thedocument continues to run in certain error situations, whereas all animationswithin an SVG document fragment will stop in the event of any error within thedocument (see Errorprocessing).

 

19.2.3 动画元素的例子 Animation elements example

下面的Example anim01 显示精图的五种动画元素的每一个.  Example anim01 belowdemonstrates each of SVG's five animation elements.

 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example anim01 - demonstrate animation elements</desc>
  <rect x="1" y="1" width="798" height="298" 
        fill="none" stroke="blue" stroke-width="2" />
 
  <!-- The following illustrates the use of the 'animate' element
        to animate a rectangles x, y, and width attributes so that
        the rectangle grows to ultimately fill the viewport. -->
  <rect id="RectElement" x="300" y="100" width="300" height="100"
        fill="rgb(255,255,0)"  >
    <animate attributeName="x" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="300" to="0" />
    <animate attributeName="y" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="100" to="0" />
    <animate attributeName="width" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="300" to="800" />
    <animate attributeName="height" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="100" to="300" />
  </rect>
 
  <!-- Set up a new user coordinate system so that
        the text string's origin is at (0,0), allowing
        rotation and scale relative to the new origin -->
  <g transform="translate(100,100)" >
    <!-- The following illustrates the use of the 'set', 'animateMotion',
         'animateColor' and 'animateTransform' elements. The 'text' element 
         below starts off hidden (i.e., invisible). At 3 seconds, it:
           * becomes visible
           * continuously moves diagonally across the viewport
           * changes color from blue to dark red
           * rotates from -30 to zero degrees
           * scales by a factor of three. -->
    <text id="TextElement" x="0" y="0"
          font-family="Verdana" font-size="35.27" visibility="hidden"  > 
      It's alive!
      <set attributeName="visibility" attributeType="CSS" to="visible"
           begin="3s" dur="6s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" 
           begin="3s" dur="6s" fill="freeze" />
      <animateColor attributeName="fill" attributeType="CSS"
           from="rgb(0,0,255)" to="rgb(128,0,0)"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="-30" to="0"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML"
           type="scale" from="1" to="3" additive="sum"
           begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>

At zero seconds

 

At three seconds

At six seconds

 

At nine seconds

Example anim01

View thisexample as SVG (SVG-enabled browsers only)

下列章节描述各种动画性质和元素.   The sections below describe the various animationattributes and elements.

 

19.2.4 标识动画目标元素的性质 Attributes to identifythe target element for an animation

下列性质对所有动画元素是共同的并且用于标识动画目标元素.  The following attributes are common to all animationelements and identify the target element for the animation.

 
<!ENTITY % animElementAttrs
 "%xlinkRefAttrs;
  xlink:href %URI; #IMPLIED" >

性质定义: Attribute definitions:

xlink:href = "<uri>"

指向这一动画的目标的元素的URI引用 从而随时可以被更改. A URIreference to the element which is the target of this animation and whichtherefore will be modified over time.
目标元素必须是 当前精图文档片段的一部分.    The targetelement must be part of the currentSVG document fragment.
<uri> 必须指向一个严格的目标元素此元素有能力成为给定动画的目标. 如果 <uri>指向多个目标元素, 如果给定的目标元素不能成为给定的动画的目标 , 或者如果给定的目标元素不是当前精图文档片段的一部分, 那么此文档是错误的  (参见 错误处理).   <uri> must point to exactly one target element which is capable of beingthe target of the given animation. If <uri> points to multiple targetelements, if the given target element is not capable of being a target of thegiven animation, or if the given target element is not part of the current SVGdocument fragment, then the document is in error (see Errorprocessing).
如果不提供 xlink:href 性质, 那么当前动画元素的直接父元素为其目标元素.    If the xlink:hrefattribute is not provided, then the target element will be the immediate parentelement of the current animation element.
关于何种类型的元素可以成为特定类型动画的目标元素的限制请参考各自动画元素的描述.   Refer to the descriptions of the individual animationelements for any restrictions on what types of elements can be targets ofparticular types of animations.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画: 指定动画目标.  Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: Specifying the animation target.

 

在别处定义的性质: Attributes defined elsewhere:

%xlinkRefAttrs;.

 

19.2.5 标识动画目标性质或属性的性质 Attributes toidentify the target attribute or property for an animation

下列性质用来标识此给定的目标元素的目标性质或属性其值会随时间而改变.  The following attributes identify the target attribute orproperty for the given target elementwhose value changes over time.

 
<!ENTITY % animAttributeAttrs
 "attributeName  CDATA  #REQUIRED
  attributeType  CDATA  #IMPLIED" >

性质定义:Attribute definitions:

attributeName = <attributeName>

指定目标性质的名字. 一个 XMLNS 前缀可以用来表示此性质的XML命名空间. 此前缀在当前(即, 引用的) 动画元素的作用域内进行解释.   Specifies the name of the target attribute. An XMLNSprefix may be used to indicate the XML namespace for the attribute. The prefixwill be interpreted in the scope of the current (i.e., the referencing)animation element.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画: 指定动画目标.  Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: Specifying the animation target.

attributeType = "CSS | XML| auto"

指定此目标性质以及它的相关的值被定义的命名空间 . 性质值为下列之一 (值区分大小写):  Specifies thenamespace in which the target attribute and its associated values are defined.The attribute value is one of the following (values are case-sensitive):

"CSS"

这指定"attributeName"的值为在此规范中定义的一个可进行动画的CSS属性的名字.   This specifies that the value of "attributeName" is the name of a CSSproperty defined as animatable in this specification.

"XML"

这指定"attributeName"的值为在缺省 XML命名空间中为目标元素定义的一个XML性质的名字. 如果attributeName 的值有 XMLNS 前缀, 实现者必须使用此相关的命名空间作为在目标元素的作用域定义的命名空间 . 在此规范中此性质必须定义为可进行动画的.   This specifies that the value of"attributeName" is the name of an XML attribute defined in thedefault XML namespace for the target element. If the value for attributeName has an XMLNS prefix, the implementation must use the associatednamespace as defined in the scope of the target element. The attribute must bedefined as animatable in this specification.

"auto"

实现者应该将attributeName 与目标元素的性质相匹配. 实现者必须先搜索CSS属性列表看是否有匹配的属性名, 如果没有, 在缺省的XML命名空间中查找此元素.  The implementation should match the attributeName to anattribute for the target element. The implementation must first search throughthe list of CSS properties for a matching property name, and if none is found,search the default XML namespace for the element.

缺省值为 "auto".  The default value is "auto".
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画: 指定动画目标.   Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: Specifying the animation target.

 

19.2.6 控制动画的播放时间的性质 Attributes to controlthe timing of the animation

下列性质对于所有动画元素是共同的它们用于控制动画的播放时间, 包含什么情况下动画开始和结束,是否动画重复播放, 以及是否一旦动画结束时是否保持动画最后的状态.  The following attributes are common to all animation elements and control thetiming of the animation, including what causes the animation to start and end,whether the animation runs repeatedly, and whether to retain the end state theanimation once the animation ends.

 
<!ENTITY % animTimingAttrs
 "begin CDATA #IMPLIED 
  dur CDATA #IMPLIED
  end CDATA #IMPLIED
  min CDATA #IMPLIED
  max CDATA #IMPLIED
  restart (always | never | whenNotActive) 'always'
  repeatCount CDATA #IMPLIED 
  repeatDur CDATA #IMPLIED
  fill (remove | freeze) 'remove'" >

在以后的语法说明中, 可选的空白符用"S"表示, 定义如下:  In the syntaxspecifications that follow, optional white space is indicated as "S",defined as follows:

S ::= (#x20 | #x9 | #xD | #xA)*

性质定义:Attribute definitions:

begin : begin-value-list

定义何时元素将开始 (即. 变成活动).  Defines when the element should begin (i.e. become active).
性质值是用分号分隔的值的列表.Theattribute value is a semicolon separated list of values.

begin-value-list ::= begin-value (S? ";" S? begin-value-list)?

一个由分号分隔的开始值列表. 开始值列表在SMIL动画的章节 "开始和结束时间列表的赋值"上有详细的解释.   A semicolon separated list of begin values. Theinterpretation of a list of begin times is detailed in SMIL Animation's sectionon "Evaluationof begin and end time lists".

 

begin-value : ( offset-value | syncbase-value| event-value | repeat-value| accessKey-value | wallclock-sync-value | "indefinite" )

描述元素的开始. Describes the element begin.

 

offset-value ::= ( S? "+" |"-" S? )? ( Clock-value)

对于 SMIL 动画而言, 此值描述此元素的开始用一个隐含的同步基的偏移量来表示. 对于精图而言, 隐含的同步基开始定义为相对文档的开始 . 因为在精图中文档的结束总是未确定的, 在精图中一个负的偏移量值总是一种错误.  For SMILAnimation, this describes the element begin as an offset from an implicitsyncbase. For SVG, the implicit syncbase begin is defined to be relative to thedocument begin. SInce the document end in SVG is always undetermined, anegative offset value in SVG is always an error.

syncbase-value ::= ( Id-value"." ( "begin" | "end" ) ) ( S?("+"|"-") S? Clock-value)?

描述一个同步基 以及一个可选的相对同步基的偏移量. 元素的开始定义为相对此开始或另一个动画的结束. 一个 同步基由一个指向另一个动画元素由要么 begin 要么end 标识是否与被引用的动画元素的开始或活动的结束同步的 ID 引用 构成.     Describes a syncbaseand an optional offset from that syncbase. The element begin is definedrelative to the begin or active end of another animation. A syncbase consists of an ID reference to another animationelement followed by either begin or end to identify whether to synchronize with the beginning or active endof the referenced animation element.

event-value ::= ( Id-value"." )? ( event-ref ) ( S? ("+"|"-") S? Clock-value)?

描述一个事件以及一个可选的确定元素开始的偏移量. 动画开始定义为相对事件被触发的时间. 一给定的基于事件的元素的可用的事件符号的列表是给定元素的由SVG DTD定义的可用事件性质的列表 , 不同之处在于开头的'on'将从事件名中移去 (即, 动画事件名为 'click', 而不是 'onclick'). 精图所支持的所有事件的列表可以在支持事件完全列表找到. 基于事件的时间同步在SMIL 动画: 统一基于事件的同步和调度时间同步中有详细的描述 .   Describes an event and an optional offset that determine the element begin. Theanimation begin is defined relative to the time that the event is raised. Thelist of event-symbols available for a given event-base element is the list ofevent attributes available for the given element as defined by the SVG DTD, with the onedifference that the leading 'on' is removed from the event name (i.e., theanimation event name is 'click', not 'onclick'). A list of all events supportedby SVG can be found in Completelist of supported events. Details of event-based timing are described in SMILAnimation: Unifying Event-based and Scheduled Timing.

repeat-value ::= ( Id-value"." )? "repeat(" integer ")" ( S?("+"|"-") S? Clock-value)?

描述一个有条件的重复事件. 此元素开始定义为相对于指定反复值的重复事件被触发的时间.   Describes a qualified repeat event. The element beginis defined relative to the time that the repeat event is raised with thespecified iteration value.

accessKey-value ::="accessKey(" character ")" ( S?("+"|"-") S? Clock-value)?

描述一个确定元素开始的一个 accessKey . 此元素开始定义为相对于此accessKey字符被用户输入的时间.    Describes an accessKey that determines theelement begin. The element begin is defined relative to the time that theaccessKey character is input by the user.

"wallclock-sync-value :wallclock(" wallclock-value ")"

描述元素开始当一个实时钟时间. 实时钟时间的语法基于在[ISO8601]中定义的语法 .  Describes the elementbegin as a real-world clock time. The wallclock time syntax is based uponsyntax defined in [ISO8601].

"indefinite"

动画的开始将由一个"beginElement()"方法调用或者一个目标指向此元素的超链接确定.    The begin of the animation will be determined bya "beginElement()" method call or a hyperlink targeted to theelement.
动画的 DOM 方法在文档对象模型接口中描述 .  The animation DOMmethods are described in DOM interfaces.
基于超链接的时间同步在SMIL动画: 超链接和时间同步中描述. Hyperlink-based timing isdescribed in SMILAnimation: Hyperlinks and timing.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'begin' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'begin' attribute.

 

dur: Clock-value | "media" |"indefinite"

指定简单的持续时间.    Specifies the simple duration.
性质值可以为下列情形之一:The attribute value can be either of the following:

Clock-value

指定在表示时间中的简单的持续时间的长度. 值必须大于0.     Specifies the length of the simple duration in presentation time. Value must be greater than 0.

"media"

指定媒体固有的持续时间作为简单的持续时间. 这仅对定义媒体的元素有效.
(对于精图的 动画元素,如果 "media" 被指定, 此性质将被忽略.)   Specifies the simple duration as the intrinsic mediaduration. This is only valid for elements that define media.
(For SVG's animationelements, if "media" is specified,the attribute will be ignored.)

"indefinite"

指定简单的持续时间为无限.  Specifies the simple duration as indefinite.

如果动画无dur 性质, 那么简单的持续时间为无限. 注意如果简单的持续时间为无限那么插补将不工作 (虽然这允许对 'set' 元素仍然有用). 除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'dur' 性质.   If the animation does not have a dur attribute,the simple duration is indefinite. Note that interpolation will not work if thesimple duration is indefinite (although this may still be useful for 'set' elements). Except for any SVG-specificrules explicitly mentioned in this specification, the normative definition forthis attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'dur' attribute.

end: end-value-list

定义动画的结束值此值限制活动的持续时间. 此性质的值为分号分隔的值的列表.   Defines an end value for the animation that canconstrain the active duration. The attribute value is a semicolon separatedlist of values.

end-value-list ::= end-value (S? ";" S? end-value-list )?

分号分隔的结束值的列表. 结束时间的列表的详细解释如下.  A semicolon separated list of end values. The interpretation of a list of endtimes is detailed below.

 

end-value : ( offset-value | syncbase-value| event-value | repeat-value| accessKey-value | wallclock-sync-value |"indefinite" )

描述动画的活动结束时间.  Describes the active end of the animation.

值为"indefinite" 时指定 动画的结束将由一个"endElement()"方法调用确定 (动画的 DOM 方法在文档对象模型接口中描述).   A value of "indefinite" specifies that the end of theanimation will be determined by a "endElement()" method call (the animationDOM methods are described in DOM interfaces).
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'end' 性质.

min: Clock-value | "media"

指定活动期间的最小值.   Specifies the minimum value of the active duration.
性质值可以为下列情形之一:The attribute value can be either of the following:

Clock-value

指定活动期间的最小值的长度, 按本地时间计量.  Specifies the length of the minimum value of the active duration, measured inlocal time.
值必须大于0.   Value must be greater than 0.

"media"

指定媒体固有的持续时间作为活动期间的最小值. 这仅对定义媒体的元素有效.(对于精图的 动画元素,如果 "media" 被指定, 此性质将被忽略.)   Specifies the minimum value of the active duration asthe intrinsic media duration. This is only valid for elements that define media.(For SVG's animationelements, if "media" is specified,the attribute will be ignored.)

min的缺省值为"0". 此时完全不对活动期间进行限制.   The default value for minis "0". This does not constrain the active duration at all.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL 动画:'min' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'min' attribute.

max: Clock-value | "media"

指定活动期间的最大值. Specifies the maximum value of the active duration.
性质值可以为下列情形之一:The attribute value can be either of the following:

Clock-value

指定活动期间的最大值的长度, 按本地时间计量. Specifies the length of the maximum value of the active duration, measured inlocal time.
值必须大于0.   Value must be greater than 0.

"media"

指定媒体固有的持续时间作为活动期间的最大值. 这仅对定义媒体的元素有效.(对于精图的 动画元素,如果 "media" 被指定, 此性质将被忽略.)  Specifies the maximum value of the active duration as theintrinsic media duration. This is only valid for elements that define media.(For SVG's animationelements, if "media" is specified,the attribute will be ignored.)

max无缺省值. 此时完全不对活动期间进行限制. There is no default value for max. This does notconstrain the active duration at all.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL 动画:'max' 性质.Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'max' attribute.

restart : "always" | "whenNotActive" |"never"

always

动画可以在任何时间进行重启. The animation can be restarted at any time. 
此时为缺省值. This is the default value.

whenNotActive

动画仅当不活动时才可以重启 (即. 在活动结束之后). 试图在动画播放期间重启动画将被忽略.   Theanimation can only be restarted when it is not active (i.e. after the activeend). Attempts to restart the animation during its active duration are ignored.

never

元素不能在父时间容器的当前简单的持续时间的剩余部分内进行重启. (在精图的情况下, 因为父时间容器是精图文档片段, 故动画不能在文档持续时间的剩余部分内进行重启.)  The element cannot be restarted for the remainder of the current simpleduration of the parent time container. (In the case of SVG, since the parenttime container is the SVG document fragment, then the animation cannot berestarted for the remainder of the document duration.)

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'restart' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'restart' attribute.

repeatCount : numeric value | "indefinite"

指定动画播放的次数. 它可以有下列性质值: Specifies the number of iterations of the animation function. It can have thefollowing attribute values:

numeric value

这是一种十进制"浮点" 数值用于指定循环的次数. 它可以包含用分数值表示的部分循环. 一个分数值描述简单的持续时间的一部分 . 值必须大于 0.    This is a(base 10) "floating point" numeric value that specifies the number ofiterations. It can include partial iterations expressed as fraction values. Afractional value describes a portion of the simpleduration. Values must be greater than 0.

"indefinite"

动画定义为可以无限次重复播放(即. 直到文档结束).The animation is defined torepeat indefinitely (i.e. until the document ends).

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'repeatCount' 性质.Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'repeatCount' attribute.

repeatDur : Clock-value |"indefinite"

指定重复的整个持续时间. 它可以有下列性质值: Specifies the total duration for repeat. It can have the following attributevalues:

Clock-value

表示时间 指定持续时间来重复动画函数f(t).   Specifies the duration in presentationtime to repeat the animation function f(t).

"indefinite"

动画定义为可以无限次重复播放(即. 直到文档结束).  The animation isdefined to repeat indefinitely (i.e. until the document ends).

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'repeatDur' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'repeatDur' attribute.

fill: "freeze" | "remove"

这一性质可以取下列值:This attribute can have the following values:

freeze

动画效果F(t)被定义为冻结效果值在活动期间的最后值. 在文档持续时间的剩余部分动画效果被"冻结" (或者直到动画被重启- 参见 SMIL 动画: 重启动画 ).   The animationeffect F(t)is defined to freeze the effect value at the last value of the active duration.The animation effect is "frozen" for the remainder of the documentduration (or until the animation is restarted - see SMILAnimation: Restarting animation ).

remove

当动画的活动期间过去之后动画效果被去除 (不再使用) . 在动画播放结束后, 动画不再对目标发生影响 (除非动画被重启 - 参见 SMIL 动画: 重启动画 ).   The animationeffect is removed (no longer applied) when the active duration of the animationis over. After the active end of the animation, the animation no longer affectsthe target (unless the animation is restarted - see SMILAnimation: Restarting animation ).
This is the default value.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'fill' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'fill' attribute.

SMIL 动画 [SMILANIM]规范定义了与上述性质相关的详细的处理规则. 除了在此规范中被特别明显地说明的精图特定的规则外, 上述这些性质的正式定义在SMIL 动画 [SMILANIM] 规范中.   The SMIL Animation[SMILANIM]specification defines the detailed processing rules associated with the aboveattributes. Except for any SVG-specific rules explicitly mentioned in thisspecification, the SMIL Animation [SMILANIM]specification is the normative definition of the processing rules for the aboveattributes.

Clockvalues

时钟值与SMIL 动画 [SMILANIM]中的语法相同  , 我们将其重复如下:  Clock values havethe same syntax as in SMIL Animation [SMILANIM],which is repeated here:

 
Clock-val         ::= Full-clock-val | Partial-clock-val 
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction      ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT        ::= DIGIT DIGIT
DIGIT         ::= [0-9]

对于时段值, 缺省的度量后缀为 "s" (秒). 在时钟值中允许非嵌入的空白字符, 尽管开始以及尾部的空白字符将被忽略.   For Timecount values, the default metric suffix is"s" (for seconds). No embedded white space is allowed in clockvalues, although leading and trailing white space characters will be ignored.

时钟值在表示时间内描述.  Clock values describe presentation time.

下面是一些合法时钟值的例子: The following are examples of legal clock values:

  • 完全时钟值:  Full clock values: 
      02:30:03    = 2 hours, 30 minutes and 3 seconds
      50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
  • 部分时钟值: Partial clock value: 
      02:33   = 2 minutes and 33 seconds
      00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
  • 时段时钟值:Timecount values:
      3.2h    = 3.2 hours = 3 hours and 12 minutes
      45min   = 45 minutes
      30s     = 30 seconds
      5ms     = 5 milliseconds
      12.467  = 12 seconds and 467 milliseconds

十进制的小数值正是以秒为单位进行定义的浮点数. 于是:   Fractional values are just (base 10) floating point definitions of seconds.Thus:

00.5s = 500 milliseconds
00:00.005 = 5 milliseconds

 

19.2.7 定义时间方面动画值的性质 Attributes that defineanimation values over time

下列性质对于元素 'animate', 'animateMotion', 'animateColor''animateTransform'而言是公共的. 这些性质定义了赋值给时间方面的目标性质或属性. 下列这些性质提供了在关键帧的相对时间以及不连续值之间的插补方法.    The following attributes are common to elements 'animate', 'animateMotion', 'animateColor' and 'animateTransform'. These attributes define thevalues that are assigned to the target attribute or property over time. Theattributes below provide control over the relative timing of keyframes and theinterpolation method between discrete values.

 

 
<!ENTITY % animValueAttrs
 "calcMode (discrete | linear | paced | spline) 'linear'
  values CDATA #IMPLIED
  keyTimes CDATA #IMPLIED
  keySplines CDATA #IMPLIED
  from CDATA #IMPLIED
  to CDATA #IMPLIED
  by CDATA #IMPLIED" >

性质定义:Attribute definitions:

calcMode = "discrete | linear | paced | spline"

指定动画的插补模式. 它可以取下列任何值之一. 缺省模式为 "linear", 但是如果性质不支持线性插补 (比如. 对于字符串而言), 此 calcMode 性质将被忽略而使用离散插补.   Specifies the interpolation mode for the animation. This can take any of thefollowing values. The default mode is "linear", however if theattribute does not support linear interpolation (e.g. for strings), the calcModeattribute is ignored and discrete interpolation is used.

discrete

此时指定动画函数将不用任何插补从一个值跳到另一个值.    This specifies that the animation function willjump from one value to the next without any interpolation.

linear

在值之间的简单线性插补用于计算动画函数. 除了对 'animateMotion'外, 此模式为缺省的 calcMode.  Simple linear interpolation between values is used to calculate the animationfunction. Except for 'animateMotion', this is the default calcMode.

paced

定义在动画播放期间产生匀速改变的插补. 只有值定义在线性数值范围内,并且存在某种可以在两点之间计算的类似于"距离"的概念 (例如. 位置, 宽度, 高度, 等等.)的性质值支持这种模式. 如果指定 "paced", 任何 keyTimeskeySplines 将被忽略. 对于 'animateMotion', 这是它的缺省calcMode.    Defines interpolation to produce an even pace ofchange across the animation. This is only supported for values that define alinear numeric range, and for which some notion of "distance" betweenpoints can be calculated (e.g. position, width, height, etc.). If "paced"is specified, any keyTimes or keySplines will be ignored. For 'animateMotion', this is the default calcMode.

spline

从取值列表中的一个值到另一个值之间按照由一个三次Bézier样条所定义的时间函数进行插补.此样条的点在keyTimes性质中定义, 并且每个时间间隔的控制点在keySplines性质中定义.   Interpolates fromone value in the values list to the next according to a time function defined by a cubicBézier spline. The points of the spline are defined in the keyTimesattribute, and the control points for each interval are defined in the keySplinesattribute.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'calcMode' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'calcMode' attribute.

values = "<list>"

一个由分号分隔的一个或多个值的列表. 支持attributeType范围的矢量语法的矢量值性质. 除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'values' 性质.  A semicolon-separated list of one or more values. Vector-valued attributes aresupported using the vector syntax of the attributeType domain.Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'values' attribute.

keyTimes = "<list>"

用来控制动画的步速的一个由分号分隔的时间值的列表. 此列表中的每个时间值对应于values性质列表中的一个值, 并且定义此值何时在动画函数中使用. 在keyTimes列表中的每个时间值用0和1(包含)之间的一个浮点数来表示, 代表动画元素持续时间的一个比例偏移量.      A semicolon-separated list of timevalues used to control the pacing of the animation. Each time in the listcorresponds to a value in the values attribute list, and defines whenthe value is used in the animation function. Each time value in the keyTimeslist is specified as a floating point value between 0 and 1 (inclusive),representing a proportional offset into the simple duration of the animationelement.  

如果指定了keyTimes的一个列表, 那么在keyTimes列表中值的个数要与在values列表中值的个数完全相同.     If a list of keyTimes isspecified, there must be exactly as many values in the keyTimes listas in the values list. 

每个后续的时间值必须大于或等于以前的时间值.   Each successive time value must be greater than orequal to the preceding time value. 

keyTimes 列表的语义依赖于插补模式:  The keyTimes list semantics depends upon the interpolation mode:

·  对于线性和样条动画而言, 列表中的第一个时间值必须为 0, 并且最后一个时间值必须为1. 与每个值相联系的keyTime 定义何时设置此值t; 在keyTimes之间的值被插补 .   For linear andspline animation, the first time value in the list must be 0, and the lasttime value in the list must be 1. The keyTime associated witheach value defines when the value is set; values are interpolated between the keyTimes.

·  对于离散动画而言, 列表中的第一个时间值必须为 0. 与每个值相联系的时间定义何时设置此值; 动画函数使用此值直到在keyTimes中定义的下一个时间来到时为止.   For discrete animation, the first time value in the list must be 0. The time associatedwith each value defines when the value is set; the animation function uses thatvalue until the next time defined in keyTimes.

如果插补模式为 "paced", 此时将忽略 keyTimes 性质.   If the interpolationmode is "paced", the keyTimes attribute is ignored.

如果在 keyTimes 说明中存在任何错误 (不对的值, 值的个数太多或太少), 则文档片段是错误的 (参见 错误处理).  If there are any errors in the keyTimes specification (bad values, toomany or too few values), the document fragment is in error (see errorprocessing).

如果简单的持续时间是无限的,则忽略任何 keyTimes 说明.   If the simpleduration is indefinite, any keyTimes specification will be ignored.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'keyTimes' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'keyTimes' attribute.

keySplines = "<list>"

一套与keyTimes 列表相关的Bézier控制点, 它定义了一个控制时间间隔的步伐的三次 Bézier 样条函数. 性质值是一个由分号分隔的控制点描述的列表. 每个控制点描述为一组的四个值:x1 y1 x2 y2, 描述一段时间段的Bézier 控制点. 定义相关段的 keyTimes 值是 Bézier"锚点", 而  keySplines 值是控制点. 于是, 控制点的数目必须比keyTimes值的数目少 .     Aset of Bézier control points associated with the keyTimes list, defininga cubic Bézier function that controls interval pacing. The attribute value is asemicolon separated list of control point descriptions. Each control pointdescription is a set of four values: x1 y1 x2 y2, describingthe Bézier control points for one time segment. The keyTimesvalues that define the associated segment are the Bézier "anchorpoints", and the keySplines values are the control points. Thus, there must be one fewer setsof control points than there are keyTimes

值必须在0和1之间.  The values must all be in the range 0 to 1.

calcMode 不为 "spline"时将忽略此性质 .   This attributeis ignored unless the calcMode is set to "spline".

如果在 keySplines 说明中存在任何错误 (不对的值, 值的个数太多或太少), 则文档片段是错误的 (参见 错误处理).If there are any errors in the keySplines specification (bad values,too many or too few values), the document fragment is in error (see errorprocessing).

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'keySplines' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'keySplines' attribute.

from= "<value>"

指定动画的开始值.   Specifies the starting value of the animation.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'from' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'from' attribute.

to = "<value>"

指定动画的终止值.   Specifies the ending value of the animation.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL 动画:'to' 性质.Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'to' attribute.

by = "<value>"

指定动画的相对偏移量值.   Specifies a relative offset value for the animation.
除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL 动画:'by' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'by' attribute.

SMIL 动画 [SMILANIM]规范定义了与上述性质相关的详细的处理规则. 除了在此规范中被特别明显地说明的精图特定的规则外, 上述这些性质的正式定义在SMIL 动画 [SMILANIM] 规范中.     The SMIL Animation [SMILANIM]specification defines the detailed processing rules associated with the aboveattributes. Except for any SVG-specific rules explicitly mentioned in thisspecification, the SMIL Animation [SMILANIM]specification is the normative definition of the processing rules for the aboveattributes.

在动画元素中指定的动画值必须是指定性质的合法值. 开头的或尾部的空白符以及在分号之前或之后的空白符都会被忽略.    The animation values specified in the animationelement must be legal values for the specified attribute. Leading and trailingwhite space, and white space before and after semicolon separators, will beignored.

为指定的性质 (当在相关的命名空间中定义)所指定的所有值必须是合法的. 如果有不合法的值, 则文档片段是错误的 (参见 错误处理).  All values specified must be legal values for the specified attribute (asdefined in the associated namespace). If any values are not legal, the documentfragment is in error (see errorprocessing).

如果使用值的列表, 动画将进行动画的过程中按照顺序使用这些值. 如果指定值的列表, 则任何 from, to by 性质将被忽略.    If a list of values is used, the animation willapply the values in order over the course of the animation. If a list of valuesis specified, any from, to and by attribute valuesare ignored.

关于动画变量 from/by/to  的处理规则在 动画函数值中进行描述.   The processingrules for the variants of from/by/to animations are described in Animationfunction values.

下列图解解释了keySplines性质的插补. 每个图表解释了单一时间间隔(即在keyTimesvalues列表的相联系的对偶值之间 .)的设置的效果 . 水平轴可以看作是关于在时间间隔内插补的单位步进的输入值 - 即 沿着给定时间间隔进行插补的步速. 垂直轴是单位步进的结果值, 通过keySplines函数的计算来产生. 另一个描述方法是水平轴为时间间隔的输入单位时间, 而垂直轴则是输出的单位时间. 也可以参见章节 时间间隔和实时钟时间.    The following figure illustrates the interpretation of the keySplinesattribute. Each diagram illustrates the effect of keySplinessettings for a single interval (i.e. between the associated pairs of values inthe keyTimes and values lists.). The horizontal axis can be thought of as the input valuefor the unit progress of interpolation within the interval - i.e. thepace with which interpolation proceeds along the given interval. The verticalaxis is the resulting value for the unit progress, yielded by the keySplinesfunction. Another way of describing this is that the horizontal axis is theinput unit time for the interval, and the vertical axis is the output unittime. See also the section Timingand real-world clock times.

 

keySplines="0 0 1 1" (the default)

 

keySplines=".5 0 .5 1"
 

 

keySplines="0 .75 .25 1"

 

keySplines="1 0 .25 .25"

Examples of keySplines

为了解释此计算, 考虑简单的例子:  To illustrate thecalculations, consider the simple example:

 
<animate dur="4s" values="10; 20" keyTimes="0; 1"
     calcMode="spline" keySplines={as in table} />

上述四种情况所使用的keySplines值, 作为动画进行的近似的插补值为:   Using the keySplines values for each of the four casesabove, the approximate interpolated values as the animation proceeds are:

keySplines values 

Initial value

After 1s

After 2s

After 3s

Final value

0 0 1 1

10.0

12.5

15.0

17.5

20.0

.5 0 .5 1

10.0

11.0

15.0

19.0

20.0

0 .75 .25 1

10.0

18.0

19.3

19.8

20.0

1 0 .25 .25

10.0

10.1

10.6

16.9

20.0

关于 Bézier样条计算的正式定义, 参见[FOLEY-VANDAM].  For a formal definition of Bézier spline calculation, see [FOLEY-VANDAM].

 

19.2.8控制动画是否为叠加的性质Attributes that control whether animations are additive

用偏移值或增量值而不用绝对值来定义动画的某个性质的值常常是有用的 . 一个简单的 "生长" 动画可以通过将对象的宽度增加10 像素来实现:    It isfrequently useful to define animation as an offset or delta to an attribute'svalue, rather than as absolute values. A simple "grow" animation canincrease the width of an object by 10 pixels:

 
<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum"/>
</rect>

在以前的结果的基础上进行重复,累加每次循环的结果常常是有用的. 下列例子产生一个在每次循环中不断增长的矩形:    It is frequently useful for repeated animations to build upon the previousresults, accumulating with each interation. The following example causes therectangle to continue to grow with each repeat of the animation:

 
<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum" accumulate="sum" repeatCount="5"/>
</rect>

在第一次循环结束时矩形的宽度为 30 像素. 在第二次循环结束时矩形的宽度为 40 像素. 在第五次循环结束时矩形的宽度为 70 像素.   At the end of the first repetition, the rectangle has a width of 30 pixels. Atthe end of the second repetition, the rectangle has a width of 40 pixels. Atthe end of the fifth repetition, the rectangle has a width of 70 pixels.

关于累加动画的更多信息, 请参见 SMIL动画: 累加动画.关于累加动画的更多信息, 请参见  SMIL 动画: 控制重复动画的行为- 累积动画.  For more information about additive animations, see SMILAnimation: Additive animation. For more information on cumulativeanimations, see SMILAnimation: Controlling behavior of repeating animation - Cumulative animation.

对于元素 'animate', 'animateMotion', 'animateColor''animateTransform'来说下列性质是共同的 .    The following attributes are common to elements'animate', 'animateMotion', 'animateColor' and 'animateTransform'.

 

 
<!ENTITY % animAdditionAttrs
 "additive       (replace | sum) 'replace'
  accumulate     (none | sum) 'none'" >

性质定义:Attribute definitions:

additive = "replace | sum"

控制动画是否叠加. Controls whether or not the animation is additive. 

sum

指定此动画将叠加到性质垫底的值和其它较低优先级的动画上.   Specifies that the animation will add to theunderlying value of the attribute and other lower priority animations.

replace

指定此动画将覆盖性质垫底的值和其它较低优先级的动画上. 此为缺省值, 可是其行为也会受到在 SMIL动画:from, to 和 by 性质如何影响累加行为中描述的性质byto的动画值的影响  .   Specifies that the animation will override theunderlying value of the attribute and other lower priority animations. This isthe default, however the behavior is also affected by the animation valueattributes by and to, as described in SMILAnimation: How from, to and by attributes affect additive behavior.


除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在 SMIL动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'additive' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'additive' attribute.

accumulate = "none | sum"

控制动画是否为累积的.    Controls whether or not the animation iscumulative. 

sum

指定在第一个之后的每一个重复循环依赖以前循环的最后值.  Specifies that each repeat iteration after the first buildsupon the last value of the previous iteration.

none

指定重复循环不累加. This is the default.   Specifies that repeat iterationsare not cumulative. This is the default.


当目标性质值不支持加法或者动画元素不重复时, 此性质被忽略.   This attribute is ignored if the target attribute value does not supportaddition, or if the animation element does not repeat.

对于"toanimation"累加动画不被定义 .   Cumulative animation is not defined for "toanimation".

如果动画函数仅由 to 性质指定时此性质被忽略.  This attributewill be ignored if the animation function is specified with only the toattribute.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'accumulate' 性质. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this attribute is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'accumulate' attribute.

 

19.2.9 Inheritance

精图允许对性质和属性进行动画.如果一给定的性质或属性被后代所继承, 那么在父元素比如 'g' 元素上的动画具有传播的效果即性质或属性动画值会传给后代元素使其相应的性质或属性具有动画效果; 于是, 后代元素可以从其祖先处继承动画性质和属性.   SVG allows both attributes and properties to be animated. If a given attributeor property is inheritable by descendants, then animations on a parent elementsuch as a 'g' element has the effect of propagating theattribute or property animation values to descendant elements as the animationproceeds; thus, descendant elements can inherit animated attributes andproperties from their ancestors.

 

19.2.10 'animate' 元素 The 'animate' element

'animate' 元素用来对一个单一的性质或属性随时间进行动画. 例如, 为了在5秒内重复地将一个矩形淡出, 你可以指定:   The 'animate' element is used to animate a singleattribute or property over time. For example, to make a rectangle repeatedlyfade away over 5 seconds, you can specify:

 
<rect>
  <animate attributeType="CSS" attributeName="opacity" 
         from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'animate' 元素. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this element is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'animate' element.

 
<!ENTITY % animateExt "" >
<!ELEMENT animate (%descTitleMetadata;%animateExt;) >
<!ATTLIST animate
  %stdAttrs;
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  %animationEvents;
  %animElementAttrs;
  %animAttributeAttrs;
  %animTimingAttrs;
  %animValueAttrs;
  %animAdditionAttrs; >

 

在别处定义的性质: Attributes defined elsewhere:

%stdAttrs;,%testAttrs;, externalResourcesRequired,%animationEvents;,%animElementAttrs;,%animAttributeAttrs;,%animTimingAttrs;,%animValueAttrs;,%animAdditionAttrs;.

关于可以使用'animate'元素进行动画的性质和属性的列表, 参见 能够进行动画的元素,性质和属性.  For a list of attributes and properties that can be animated using the 'animate' element, see Elements,attributes and properties that can be animated.

 

19.2.11 'set' 元素 The 'set' element

'set' 元素 提供在特定持续时间内正好设置一个性质的值的一种简单方法. 它支持所有性质类型, 包括那些绝对不能进行插补的性质, 比如字符串和布尔值. 'set'元素是不能叠加的. 不允许叠加和累积的性质, 并且即使指定这种类型的性质也会被忽略掉.    The 'set' element provides a simple means ofjust setting the value of an attribute for a specified duration. It supportsall attribute types, including those that cannot reasonably be interpolated,such as string and boolean values. The 'set'element is non-additive. The additive and accumulate attributes are notallowed, and will be ignored if specified.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL 动画:'set' 元素. Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this element is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'set' element.

 
<!ENTITY % setExt "" >
<!ELEMENT set (%descTitleMetadata;%setExt;) >
<!ATTLIST set
  %stdAttrs;
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  %animationEvents;
  %animElementAttrs;
  %animAttributeAttrs;
  %animTimingAttrs;
  to CDATA #IMPLIED >

性质定义: Attribute definitions:

to = "<value>"

指定在'set'元素的持续时间内此性质的值. 参数值必须与性质类型相匹配.  Specifies the value for the attribute during the duration of the 'set' element. The argument value must match theattribute type.

 

在别处定义的性质: Attributes defined elsewhere:

%stdAttrs;,%testAttrs;, externalResourcesRequired,%animationEvents;,%animElementAttrs;,%animAttributeAttrs;,%animTimingAttrs;.

关于可以使用'set'元素进行动画的性质和属性的列表, 参见 能够进行动画的元素,性质和属性. For a list of attributes and properties that can be animated using the 'set' element, see Elements,attributes and properties that can be animated.

19.2.12 'animateMotion' 元素 The 'animateMotion' element

'animateMotion' 元素使一个引用元素沿着一条移动路径移动.   The 'animateMotion' elementcauses a referenced element to move along a motion path.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'animateMotion' 元素.  Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this element is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'animateMotion' element.

 
<!ENTITY % animateMotionExt "" >
<!ELEMENT animateMotion (%descTitleMetadata;,mpath? %animateMotionExt;) >
<!ATTLIST animateMotion
  %stdAttrs;
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  %animationEvents;
  %animElementAttrs;
  %animTimingAttrs;
  calcMode (discrete | linear | paced | spline) 'paced'
  values CDATA #IMPLIED
  keyTimes CDATA #IMPLIED
  keySplines CDATA #IMPLIED
  from CDATA #IMPLIED
  to CDATA #IMPLIED
  by CDATA #IMPLIED
  %animAdditionAttrs;
  path CDATA #IMPLIED
  keyPoints CDATA #IMPLIED
  rotate CDATA #IMPLIED
  origin CDATA #IMPLIED >

性质定义: Attributedefinitions:

calcMode = "discrete | linear | paced | spline"

指定动画的插补模式. 参见上述 calcMode 性质的一般描述. 唯一的不同是 'animateMotion'的calcMode的缺省值为 paced. 参见 SMIL动画:'animateMotion'的'calcMode'性质 .  Specifies theinterpolation mode for the animation. Refer to general description of the calcMode attribute above. The only difference isthat the default value for the calcMode for 'animateMotion' is paced.See SMILAnimation: 'calcMode' attribute for 'animateMotion'.

path = "<path-data>"

移动路径, 与 'path' 元素的d= 性质以相同的格式表示并且以相同的方式进行解释. 沿着移动路径移动的动画效果是将一个附加的变换矩阵加到引用对象的CTM上通过随时计算X和 Y的值这样便会生成沿着当前用户坐标系的x-和y-轴的平移.   The motion path,expressed in the same format and interpreted the same way as the d= attribute on the 'path' element. The effect of a motion pathanimation is to add a supplemental transformation matrix onto the CTM for thereferenced object which causes a translation along the x- and y-axes of thecurrent user coordinate system by the computed X and Y values computed overtime.

keyPoints = "<list-of-numbers>"

keyPoints 接受用分号分隔的取值介于0和1之间浮点数列表并且表示在由对应的keyTimes 值所指定的时间的瞬间此对象沿着移动路径移动了多远. 距离的计算使用用户代理的 沿着路径的距离算法. 在列表中每个前进值对应keyTimes性质列表中的一个值.   keyPoints takes asemicolon-separated list of floating point values between 0 and 1 and indicateshow far along the motion path the object shall move at the moment in timespecified by corresponding keyTimes value.Distance calculations use the user agent's distancealong the path algorithm. Each progress value in the list corresponds to avalue in the keyTimes attribute list.
如果指定了列表 keyPoints, 那么在keyPoints列表中值的个数必须与keyTimes列表中值的个数相同.    If a list of keyPoints is specified,there must be exactly as many values in the keyPoints list as inthe keyTimes list. 
如果在 keyPoints 说明中存在任何错误 (不对的值, 值的个数太多或太少), 则文档片段是错误的 (参见 错误处理).  Ifthere are any errors in the keyPoints specification (bad values, toomany or too few values), then the document is in error (see Errorprocessing).

rotate = "<angle> | auto | auto-reverse"

auto 表示对象根据移动路径的方向(即, 切向量方向) 的角度随着时间进行旋转. auto-reverse表示对象根据移动路径的方向(即, 切向量方向) 的角度加上180度随着时间进行旋转.  也可以给定一个实际的角度值, 它表示相对于当前用户坐标系的x轴的角度. rotate性质将一个额外的变换矩阵加到 CTM 中来实现对当前用户坐标系的原点的旋转变换. 旋转变换在由 path 性质所进行计算的平移变换之后进行. 缺省值为0.    auto indicates that theobject is rotated over time by the angle of the direction (i.e., directionaltangent vector) of the motion path. auto-reverseindicates that the object is rotated over time by the angle of the direction(i.e., directional tangent vector) of the motion path plus 180 degrees. Anactual angle value can also be given, which represents an angle relative to thex-axis of current user coordinate system. The rotateattribute adds a supplemental transformation matrix onto the CTM to apply arotation transformation about the origin of the current user coordinate system.The rotation transformation is applied after the supplemental translationtransformation that is computed due to the pathattribute. The default value is 0.

origin = "default"

origin 性质在SMIL动画规范[SMILANIM-ATTR-ORIGIN]中定义 . 在精图中它不起作用.  The origin attribute is definedin the SMIL Animation specification [SMILANIM-ATTR-ORIGIN].It has no effect in SVG.

 

在别处定义的性质: Attributesdefined elsewhere:

%stdAttrs;,%testAttrs;, externalResourcesRequired,%animationEvents;,%animElementAttrs;,%animTimingAttrs;,values,keyTimes,keySplines,from, to, by, %animAdditionAttrs;.

 
<!ENTITY % mpathExt "" >
<!ELEMENT mpath (%descTitleMetadata;%mpathExt;) >
<!ATTLIST mpath
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #REQUIRED
  externalResourcesRequired %Boolean; #IMPLIED >

性质定义: Attributedefinitions:

xlink:href = "<uri>"

A URI referenceto the 'path' element which defines the motion path.
Animatable:no.

 

在别处定义的性质: Attributesdefined elsewhere:

%stdAttrs;,,%xlinkRefAttrs;externalResourcesRequired.

对于 'animateMotion',  from, by, to values 所指定的值由 x, y 坐标值偶构成, x 坐标和y 坐标之间用逗号或空白符分隔. 例如, from="33,15" 指定 x 坐标值为 33 而 y 坐标值为 15.   For 'animateMotion', the specified values for from, by, to and values consists of x, y coordinate pairs, with asingle comma and/or white space separating the x coordinate from the ycoordinate. For example, from="33,15"specifies an x coordinate value of 33 and a ycoordinate value of 15.

如果提供 values 性质它必须由x, y 坐标偶的列表所组成 . 坐标值之间用至少一个空白符或一个逗号分隔. 分隔符周围多余的空白符是允许的. 例如, values="10,20;30,20;30,40"或 values="10mm,20mm;30mm,20mm;30mm,40mm". 每个坐标表示一 长度.性质 from, by, to values 指定当前画布上的一个表示移动路径的形状.     If provided, the values attribute must consists of a list of x, ycoordinate pairs. Coordinate values are separated by at least one white spacecharacter or a comma. Additional white space around the separator is allowed.For example, values="10,20;30,20;30,40"or values="10mm,20mm;30mm,20mm;30mm,40mm".Each coordinate represents a length.Attributes from, by, to and values specify a shape on the current canvas whichrepresents the motion path.

可用两种通过使用精图的路径数据命令来定义移动路径的可供选择的方法:   Twooptions are available which allow definition of a motion path using any ofSVG's path datacommands:

注意 精图的路径数据命令只能包含用户空间的值, 而 from, by, to values 既可在用户空间中指定坐标也可以使用单位标识符. 参见 单位.    Note that SVG's pathdata commands can only contain values in user space, whereas from, by, to and values can specify coordinates in user space orusing unit identifiers. See Units.

形状的各种 (x,y) 点为引用的对象提供了一个附加的变换矩阵到  CTM 上它通过随时计算形状的(x,y)值生成一个沿着当前用户坐标系的x- 和 y-轴所进行的平移. 于是, 引用对象通过相对于当前用户坐标系的原点的偏移量随时进行平移. 此附加变换被用在任何由于目标元素的 transform性质或者任何在此性质上的动画由于在目标元素上的'animateTransform' 元素所生成的变换的顶部.???   The various (x,y) points of the shape provide asupplemental transformation matrix onto the CTM for the referenced object whichcauses a translation along the x- and y-axes of the current user coordinatesystem by the (x,y) values of the shape computed over time. Thus, thereferenced object is translated over time by the offset of the motion pathrelative to the origin of the current user coordinate system. The supplementaltransformation is applied on top of any transformations due to the targetelement's transform attribute or any animations on thatattribute due to 'animateTransform' elements on the targetelement.

additiveaccumulate 性质用于'animateMotion' 元素. 都同时引用一个相同的目标元素的多个 'animateMotion' 元素可以相互叠加; 可是, 从'animateMotion' 元素所导致的变换总是追加到目标元素的 transform 性质或者'animateTransform' 元素所导致的变换上.    The additive and accumulate attributes apply to  elements.Multiple 'animateMotion' elements allsimultaneously referencing the same target element can be additive with respectto each other; however, the transformations which result from the 'animateMotion' elements are always supplemental toany transformations due to the target element's transform attribute or any 'animateTransform' elements.

animateMotion  的缺省计算模式 (calcMode) 是 "paced". 这会产生沿着指定的路径的匀速运动. 注意 animateMotion 元素可以叠加时, 注意到两个或更多"paced" (匀速) 动画的叠加也许不能生成一个匀速的组合的运动动画是重要的.    The default calculation mode (calcMode) for animateMotionis "paced". This will produce constant velocity motion along thespecified path. Note that while animateMotion elements can be additive, it isimportant to observe that the addition of two or more "paced"(constant velocity) animations might not result in a combined motion animationwith constant velocity.

当 path 与 "discrete", "linear" 或 "spline" calcMode 设置相结合时, 并且如果不提供性质 keyPoints , 值的数目由此路径的点的数目来定义, 除非在此路径中有一个"move to" 命令. 在此path中的 "move to" 命令  (即除了此path描述的开始) 一个 "moveto" 命令不算作一个追加的点当划分持续时间时, 或者当与  keyTimes, keySplineskeyPoints 的值相联系时. 当 path 与一个"paced" calcMode 设置相结合时, 所有 "move to" 命令被认为具有长度 0 (即它们是在瞬间发生的), 并且在计算进步时不加考虑.    When a path is combined with "discrete","linear" or "spline" calcModesettings, and if attribute keyPoints is not provided, the number of values isdefined to be the number of points defined by the path, unless there are"move to" commands within the path. A "move to" command withinthe path (i.e. other than at the beginning of the path description) A "move to" command does notcount as an additional point when dividing up the duration, or when associatingkeyTimes, keySplines and keyPoints values. When a path is combined with a"paced" calcMode setting, all "moveto" commands are considered to have 0 length (i.e. they always happeninstantaneously), and is not considered in computing the pacing.

为了在控制沿着移动路径的速度时较灵活, keyPoints 性质提供了为每个keyTimes 指定值指定沿着移动路径的进步的能力 . 如果指定了, keyPoints 使得 keyTimes 使用keyPoints 中的值而不是在values性质数组中指定的值也不是path性质中的点.    For moreflexibility in controlling the velocity along the motion path, the keyPoints attribute provides the ability to specifythe progress along the motion path for each of the keyTimes specified values. If specified, keyPoints causes keyTimes to apply to the values in keyPoints rather than the points specified in the values attribute array or the points on the path attribute.

关于'animateMotion' 的覆盖规则说明如下. 注意移动路径的定义,  'mpath' 元素覆盖  path 性质, 而path覆盖values, 而values 覆盖 from/by/to. 注意对应于keyTimes性质的点的确定, keyPoints性质覆盖 path, 而path覆盖values, 而values 覆盖 from/by/to.   The overriderules for 'animateMotion are as follows.Regarding the definition of the motion path, the 'mpath' element overrides the the path attribute, which overrides values,which overrides from/by/to. Regarding determiningthe points which correspond to the keyTimesattributes, the keyPoints attribute overrides path, which overrides values,which overrides from/by/to.

在持续时间dur的一个移动路径动画的任何时间 t  , 沿着移动路径计算的坐标 (x,y) 是由找到的点(x,y)确定的它是由 t/dur  使用用户代理的 沿着路径的距离算法求出的沿着移动路径的距离.???  At any time t within a motion path animation of duration dur,the computed coordinate (x,y) along the motion path is determined by findingthe point (x,y) which is t/dur distance along the motion path usingthe user agent's distancealong the path algorithm.

下列例子说明在一个移动路径动画期间额外的变换矩阵被计算.   The following example demonstrates the supplementaltransformation matrices that are computed during a motion path animation.

Example animMotion01 显示一个沿一个移动路径运动的三角形. Example animMotion01 shows atriangle moving along a motion path.

 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
 
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />
 
  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
 
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite"
                   path="M100,250 C 100,50 400,50 400,250" rotate="auto" />
  </path>
</svg>

At zero seconds

 

At three seconds

 

At six seconds

Example animMotion01

View thisexample as SVG (SVG-enabled browsers only)

下列表格显示使用额外的变换矩阵达到移动路径动画的效果.   The following table shows the supplementaltransformation matrices that are applied to achieve the effect of the motionpath animation.

 

After 0s

After 3s

After 6s

Supplemental transform
due to movement
along motion path

translate(100,250)

translate(250,100)

translate(400,250)

Supplemental transform
due to
rotate="auto"

rotate(-90)

rotate(0)

rotate(90)

关于可用'animateMotion' 元素进行动画的元素的列表, 请参见 可以进行动画的元素,性质和属性.  For a list of elements that can be animated using the 'animateMotion'element, see Elements,attributes and properties that can be animated.

 

19.2.13'animateColor' 元素 The 'animateColor' element

'animateColor' 元素指定一种随时间的颜色变化.  The 'animateColor' element specifies a colortransformation over time.

除了在此规范中被特别明显地说明的精图特定的规则外, 这一性质的正式定义在SMIL 动画 [SMILANIM] 规范中.    特别, 参见SMIL动画:'animateColor' 元素.  Except for any SVG-specific rules explicitly mentioned in this specification,the normative definition for this element is the SMIL Animation [SMILANIM]specification. In particular, see SMILAnimation: 'animateColor' element.

 
<!ENTITY % animateColorExt "" >
<!ELEMENT animateColor (%descTitleMetadata;%animateColorExt;) >
<!ATTLIST animateColor
  %stdAttrs;
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  %animationEvents;
  %animElementAttrs;
  %animAttributeAttrs;
  %animTimingAttrs;
  %animValueAttrs;
  %animAdditionAttrs; >

 

在别处定义的性质: Attributesdefined elsewhere:

%stdAttrs;,%testAttrs;, externalResourcesRequired,%animationEvents;,%animElementAttrs;,%animAttributeAttrs;,%animTimingAttrs;,%animValueAttrs;,%animAdditionAttrs;.

  from, by to 性质取颜色值, 这里每个颜色值用下列语法表示(与精图中可以取颜色值的属性所用的语法相同):   The from, by and to attributes take color values, where each colorvalue is expressed using the following syntax (the same syntax as used in SVG'sproperties that can take color values):

<color> [icc-color(<name>[,<icccolorvalue>]*)]

  'animateColor' 元素的 values 性质由用分号分隔的颜色值列表构成, 此列表中的每个颜色值用上述语法表示.    The values attribute for the 'animateColor'element consists of a semicolon-separated list of color values, with each colorvalue expressed in the above syntax.

可以提供超出范围的颜色值, 可是用户代理的处理将会依赖于特定的实现. 用户代理尽可能在最后钳制颜色值为允许的颜色值, 可是注意到系统的差别也许会导致不同的系统的不一致的行为.  Out of range color values can be provided, but user agent processing will beimplementation dependent. User agents should clamp color values to allow colorrange values as late as possible, but note that system differences mightpreclude consistent behavior across different systems.

'color-interpolation' 属性用于结果来自'animateColor'动画的颜色插补.The 'color-interpolation' property applies to colorinterpolations that result from 'animateColor'animations.

关于可用'animateColor' 元素进行动画的性质和属性的列表, 请参见 可以进行动画的元素,性质和属性.  Fora list of attributes and properties that can be animated using the 'animateColor' element, see Elements,attributes and properties that can be animated.

 

19.2.14 'animateTransform' 元素 The 'animateTransform'element

'animateTransform' 元素对目标元素的一个变换性质进行动画, 因此允许动画控制平移, 缩放, 旋转以及歪斜.    The 'animateTransform'element animates a transformation attribute on a target element, therebyallowing animations to control translation, scaling, rotation and/or skewing.

 
<!ENTITY % animateTransformExt "" >
<!ELEMENT animateTransform (%descTitleMetadata;%animateTransformExt;) >
<!ATTLIST animateTransform
  %stdAttrs;
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  %animationEvents;
  %animElementAttrs;
  %animAttributeAttrs;
  %animTimingAttrs;
  %animValueAttrs;
  %animAdditionAttrs;
  type (translate | scale | rotate | skewX | skewY) "translate" >

性质定义: Attributedefinitions:

type = "translate | scale | rotate | skewX |skewY"

表示值随时间变化的变换的类型.   Indicates the type of transformation which is to haveits values change over time.

 

在别处定义的性质: Attributesdefined elsewhere:

%stdAttrs;,%testAttrs;, externalResourcesRequired,%animationEvents;,%animElementAttrs;,%animAttributeAttrs;,%animTimingAttrs;,%animValueAttrs;,%animAdditionAttrs;.

  from, by to 性质取为给定变换类型可用的相同语法表示的值:  The from, by and to attributes take a value expressed using the samesyntax that is available for the given transformation type:

  • 对于 type="translate", 每个单独的值表示为 <tx> [,<ty>].   For a type="translate", each individual value is expressed as <tx> [,<ty>].
  • 对于  type="scale", 每个单独的值表示为  <sx> [,<sy>].  For a type="scale", each individual value is expressed as <sx> [,<sy>].
  • 对于  type="rotate", 每个单独的值表示为  <rotate-angle> [<cx> <cy>].For a type="rotate", each individual value is expressed as <rotate-angle> [<cx> <cy>].
  • 对于  type="skewX" 和 type="skewY", 每个单独的值表示为  <skew-angle>. For a type="skewX" and type="skewY", each individual value is expressed as <skew-angle>.

(参见 transform 性质.)(SeeThe transform attribute.)

'animateTransform'元素的 values 性质由一个分号分隔的值的列表组成, 这里每个单独的值以上述from, by to所描述的方式来表示 .    The values attribute for the 'animateTransform'element consists of a semicolon-separated list of values, where each individualvalue is expressed as described above for from, by and to.

如果 calcMode 的值为paced, 那么变换的每个部份的整个被计算的"距离"  (例如, 对于一个平移操作, 关于 txty的整个被计算的距离 ) 由每个值偶之间的差的绝对值的和所组成, 并且动画播放时为每个单独的部分产生一个等距的运动.???   If calcMode has the value paced,then a total "distance" for each component of the transformation iscalculated (e.g., for a translate operation, a total distance is calculated forboth tx and ty) consisting of the sum of the absolute valuesof the differences between each pair of values, and the animation runs toproduce a constant distance movement for each individual component.

当一个动画活动时, 非叠加(即, additive="replace")'animateTransform'的效果  为用由'animateTransform'定义的变换所得出的值替换给定的性质的值 . 叠加 (即, additive="sum") 的效果为后乘以由这一'animateTransform'定义的变换所对应的变换矩阵 . 为了说明:    When ananimation is active, the effect of non-additive 'animateTransform'(i.e., additive="replace") is toreplace the given attribute's value with the transformation defined by the 'animateTransform'. The effect of additive (i.e., additive="sum") is to post-multiply thetransformation matrix corresponding to the transformation defined by this 'animateTransform'. To illustrate:

 
<rect transform="skewX(30)"...>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" from="0" to="90" dur="5s"
                    additive="replace" fill="freeze"/>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="1" to="2" dur="5s"
                    additive="replace" fill="freeze"/>
</rect>

在上面一小段代码中, 因为两个动画都具有性质 additive="replace", 第一个动画覆盖矩形本身的变换 而第二个动画又覆盖第一个动画的变换; 因此, 在时间为5秒的时候, 上述两个动画的视觉结果等价于下列静止的矩形:  In the code snippet above, because the both animations have additive="replace", the first animationoverrides the transformation on the rectangle itself and the second animationoverrides the transformation from the first animation; therefore, at time 5seconds, the visual result of the above two animations would be equivalent tothe following static rectangle:

 
<rect transform="scale(2)" ... />

而在下列例子中:whereas in the following example:

 
<rect transform="skewX(30)"...>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" from="0" to="90" dur="5s" 
                    additive="sum" fill="freeze"/>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="1" to="2" dur="5s"
                    additive="sum" fill="freeze"/>
</rect>

在这一小段代码中, 因为两个动画都具有性质 additive="sum", 第一个动画将其变换后乘矩形本身的任何变换并且第二个动画将其变换后乘第一个动画得到的任何变换; 因此, 在时间为5秒的时候, 上述两个动画的视觉结果等价于下列静止的矩形:   In this code snippet, because the both animations haveadditive="sum", the first animationpost-multiplies its transformation to any transformations on the rectangle itselfand the second animation post-multiplies its transformation to anytransformation from the first animation; therefore, at time 5 seconds, thevisual result of the above two animations would be equivalent to the followingstatic rectangle:

 
<rect transform="skewX(30) rotate(90) scale(2)" ... />

关于可用'animateTransform' 元素进行动画的性质和属性的列表, 请参见 可以进行动画的元素,性质和属性. Fora list of attributes and properties that can be animated using the 'animateTransform' element, see Elements,attributes and properties that can be animated.

 

19.2.15 可以进行动画的元素,性质和属性 Elements, attributes andproperties that can be animated

下面列出了所有可以被'animateMotion' 元素进行动画的元素:    The following lists all of the elements whichcan be animated by an 'animateMotion' element:

在此规范中的每一个性质或属性标明了精图的动画元素对其是否可以进行动画. 可以动画的性质和属性标明如下:   Eachattribute or property within this specification indicates whether or not it canbe animated by SVG's animation elements. Animatable attributes and propertiesare designated as follows:

    Animatable: yes.

反之不能进行动画的性质和属性标明如下:  whereas attributes and properties that cannot be animatedare designated:

    Animatable: no.

精图为其所支持的各种各样性质和属性定义了一套基本数据类型.对于那些能够进行动画的性质和属性, 下列表格表示哪一动画元素能够用于动画基本数据类型的每一个. 如果给定的性质和属性可以取关键词的值 (它不是叠加的) 或 数值 (它是可叠加的), 那么叠加动画是可能的如果随后的动画使用数值即使基本的动画使用关键词值; 可是, 如果随后的动画使用关键词值, 叠加动画是不可能的.   SVG has a defined set of basic data typesfor its various supported attributes and properties. For those attributes andproperties that can be animated, the following table indicates which animationelements can be used to animate each of the basic data types. If a givenattribute or property can take values of keywords (which are not additive) ornumeric values (which are additive), then additive animations are possible ifthe subsequent animation uses a numeric value even if the base animation uses akeyword value; however, if the subsequent animation uses a keyword value,additive animation is not possible.

Data type

Additive?

'animate'

'set'

'animate
Color'

'animate
Transform'

Notes

<angle>

yes

yes

yes

no

no

 

<color>

yes

yes

yes

yes

no

Only RGB color values are additive.

<coordinate>

yes

yes

yes

no

no

 

<frequency>

no

no

no

no

no

 

<integer>

yes

yes

yes

no

no

 

<length>

yes

yes

yes

no

no

 

<list of xxx>

no

yes

yes

no

no

 

<number>

yes

yes

yes

no

no

 

<paint>

yes

yes

yes

yes

no

Only RGB color values are additive.

<percentage>

yes

yes

yes

no

no

 

<time>

no

no

no

no

no

 

<transform-list>

yes

no

no

no

yes

Additive means that a transformation is post-multiplied to the base set of transformations.

<uri>

no

yes

yes

no

no

 

All other data types used in animatable attributes and properties

no

yes

yes

no

no

 

任何与上面表格相矛盾或者关于一个特殊性质或属性的动画能力的其它特别的注记被包含在本规范定义此性质或属性的章节中.    Any deviation from the above table or otherspecial note about the animation capabilities of a particular attribute orproperty is included in the section of the specification where the givenattribute or property is defined.

19.3使用精图文档对象模型进行动画Animation using the SVG DOM

Example dom01 显示了一个使用文档对象模型进行动画的简单例子.  Example dom01 shows a simpleanimation using the DOM.

 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="2cm" viewBox="0 0 400 200"
     xmlns="http://www.w3.org/2000/svg"
     οnlοad="StartAnimation(evt)" >
 
  <script type="text/ecmascript"><![CDATA[
    var timevalue = 0;
    var timer_increment = 50;
    var max_time = 5000;
    var text_element;
    function StartAnimation(evt) {
      text_element = evt.target.ownerDocument.getElementById("TextElement");
      ShowAndGrowElement();
    }
    function ShowAndGrowElement() {
      timevalue = timevalue + timer_increment;
      if (timevalue > max_time)
        return;
 
      // Scale the text string gradually until it is 20 times larger
      scalefactor = (timevalue * 20.) / max_time;
      text_element.setAttribute("transform", "scale(" + scalefactor + ")");
      // Make the string more opaque
      opacityfactor = timevalue / max_time;
      text_element.setAttribute("opacity", opacityfactor);
 
      // Call ShowAndGrowElement again <timer_increment> milliseconds later.
      setTimeout("ShowAndGrowElement()", timer_increment)
    }
    window.ShowAndGrowElement = ShowAndGrowElement
  ]]></script>
  <rect x="1" y="1" width="398" height="198"
        fill="none" stroke="blue" stroke-width="2"/>
 
  <g transform="translate(50,150)" fill="red" font-size="7">
    <text id="TextElement">SVG</text>
  </g>
</svg>

At zero seconds

 

At 2.5 seconds

 

At five seconds

Example dom01

View this exampleas SVG (SVG-enabled browsers only)

上述精图文件包含一个单独的图形元素, 一个为"SVG"的文本字符串. 动画循环了5秒. 文本字符串开始时较小并且是透明的逐渐增长为较大和不透明. 这里是这一例子如何工作的说明:  The above SVG file contains a single graphics element, a text string that says"SVG". The animation loops for 5 seconds. The text string starts outsmall and transparent and grows to be large and opaque. Here is an explanationof how this example works:

  • onload="StartAnimation(evt)" 性质表示, 一旦文档完全加载并且被处理, 调用 ECMAScript 函数 StartAnimation.    The onload="StartAnimation(evt)" attribute indicates that, once the document has been fully loaded and processed, invoke ECMAScript function StartAnimation.
  • 'script' 元素 定义 ECMAScript 此脚本生成将播放的动画. StartAnimation() 函数仅调用一次来给全局变量text_element赋值并执行ShowAndGrowElement()的首次调用 .每隔 50 毫秒调用一次 ShowAndGrowElement() 并且在每次调用时重新设置此文本元素的 transform style 性质的值. 在 ShowAndGrowElement的末尾, 函数告诉ECMAScript引擎在50毫秒之后再次调用本身.   The 'script' element defines the ECMAScript which makes the animation happen. The StartAnimation() function is only called once to give a value to global variable text_element and to make the initial call to ShowAndGrowElement(). ShowAndGrowElement() is called every 50 milliseconds and resets the transform and style attributes on the text element to new values each time it is called. At the end of ShowAndGrowElement, the function tells the ECMAScript engine to call itself again after 50 more milliseconds.
  • 'g' 元素平移坐标系使得将原点移到视区的左下角.它也定义了当绘制文本字符串时所使用的填充颜色和字体尺寸.   The 'g' element shifts the coordinate system so that the origin is shifted toward the lower-left of the viewing area. It also defines the fill color and font-size to use when drawing the text string.
  • 'text' 元素包含文本字符串并且是其性质在动画期间发生变化的那个元素 .   The 'text' element contains the text string and is the element whose attributes get changed during the animation.

如果脚本修改由精图的动画元素进行动画的性质或属性, 脚本修改动画的基值. 当一个动画元素正在动画一个性质或属性时脚本改变了此性质或属性的基值, 动画被要求动态地调整到新地基值.   Ifscripts are modifying the same attributes or properties that are being animatedby SVG's animationelements, the scripts modify the base value for the animation. If a basevalue is modified while an animation element is animating the correspondingattribute or property, the animations are required to adjust dynamically to thenew base value.

如果脚本在动画元素对一属性进行动画地同时对此在覆盖样式表上的属性进行修改, 结果与实现相关;于是, 建议避免这种情况发生.     If a script is modifying a property on theoverride style sheet at the same time that an animationelement is animating that property, the result is implementation-dependent;thus, it is recommended that this be avoided.

19.4 文档对象模型接口 DOM interfaces

The following two interfaces are from SMIL Animation.They are included here for easy reference:

 

Interface ElementTimeControl

The ElementTimeControlinterface, part of the org.w3c.dom.smil module and defined in SMILAnimation: Supported interfaces, defines common methods for elements whichdefine animation behaviors compatible with SMIL Animation.

Calling beginElement() causes the animation tobegin in the same way that an animation with event-based begin timing begins.The effective begin time is the current presentation time at the time of theDOM method call. Note that beginElement() is subject to the restart attribute in the same mannerthat event-based begin timing is. If an animation is specified to disallowrestarting at a given point, beginElement() methods calls must fail.Refer also to the section Restartinganimation.

Calling beginElementAt(seconds) has the samebehavior as beginElement(), except that the effective begin time is offset from the currentpresentation time by an amount specified as a parameter. Passing a negativevalue for the offset causes the element to begin as for beginElement(), but has the effect that the element begins at the specified offsetinto its active duration. The beginElementAt() method must alsorespect the restart attribute. The restart semantics for a beginElementAt() method call are evaluated at the time of the method call, and notat the effective begin time specified by the offset parameter.

Calling endElement() causes an animation to endthe active duration, just as end does. Depending upon the value ofthe fill attribute, the animation effect may no longer be applied, or it maybe frozen at the current effect. Refer also to the section Freezinganimations. If an animation is not currently active (i.e. if it has not yetbegun or if it is frozen), the endElement() method will fail.

Calling endElementAt() causes an animation toend the active duration, just as endElement() does, butallows the caller to specify a positive offset, to cause the element to end ata point in the future. Other than delaying when the end actually happens, thesemantics are identical to those for endElement(). If endElementAt() is called more than once while an element is active, the end timespecified by the last method call will determine the end behavior.


IDL Definition

 
interface ElementTimeControl { 
 
  boolean beginElement (  )
                  raises( DOMException );
  boolean beginElementAt ( in float offset )
                  raises( DOMException );
  boolean endElement (  )
                  raises( DOMException );
  boolean endElementAt ( in float offset )
                  raises( DOMException );
};

 

Methods

beginElement

Causes this element to begin thelocal timeline (subject to restart constraints).

No Parameters

Return value

boolean

 

true if the method call was successful and the element was begun. false if the method call failed. Possible reasons for failure include:

  • The element is already active and cannot be restarted when it is active. The restart attribute is set to "whenNotActive".
  • The element is active or has been active and cannot be restarted. The restart attribute is set to "never".

Exceptions

DOMException

 

SYNTAX_ERR: The element was not defined with the appropriate syntax to allow beginElement calls.

beginElementAt

Causes this element to begin thelocal timeline (subject to restart constraints), at the passed offset from thecurrent time when the method is called. If the offset is >= 0, the semanticsare equivalent to an event-base begin with the specified offset. If the offsetis < 0, the semantics are equivalent to beginElement(), but the elementactive duration is evaluated as though the element had begun at the passed(negative) offset from the current time when the method is called.

Parameters

in float offset

 

The offset in seconds at which to begin the element.

Return value

boolean

 

true if the method call was successful and the element was begun. false if the method call failed. Possible reasons for failure include:

  • The element is already active and cannot be restarted when it is active. The restart attribute is set to "whenNotActive".
  • The element is active or has been active and cannot be restarted. The restart attribute is set to "never".

Exceptions

DOMException

 

SYNTAX_ERR: The element was not defined with the appropriate syntax to allow beginElementAt calls.

endElement

Causes thiselement to end the local timeline.

No Parameters

Return value

boolean

 

true if the method call was successful and the element was ended. false if method call failed. Possible reasons for failure include:

  • The element is not active.

Exceptions

DOMException

 

SYNTAX_ERR: The element was not defined with the appropriate syntax to allow endElement calls.

endElementAt

Causes this element to end thelocal timeline at the specified offset from the current time when the method iscalled.

Parameters

in float offset

 

The offset in seconds at which to end the element. Must be >= 0.

Return value

boolean

 

true if the method call was successful and the element was ended. false if the method call failed. Possible reasons for failure include:

  • The element is not active.

Exceptions

DOMException

 

SYNTAX_ERR: The element was not defined with the appropriate syntax to allow endElementAt calls.

The corresponding Java binding:

 
package org.w3c.dom.svg;
 
import org.w3c.dom.DOMException;
 
public interface ElementTimeControl {
  boolean beginElement (  )
                  throws DOMException;
  boolean beginElementAt ( float offset )
                  throws DOMException;
  boolean endElement (  )
                  throws DOMException;
  boolean endElementAt ( float offset )
                  throws DOMException;
}

 

Interface TimeEvent

The TimeEventinterface, defined in SMILAnimation: Supported interfaces defined in SMILAnimation: Supported interfaces, provides specific contextual informationassociated with Time events.

The different types of events that can occur are:

beginEvent

This event israised when the element local timeline begins to play. It will be raised eachtime the element begins the active duration (i.e. when it restarts, but notwhen it repeats). It may be raised both in the course of normal (i.e. scheduledor interactive) timeline play, as well as in the case that the element wasbegun with the beginElement() or beginElementAt() methods. Note that if an element is restarted while it is currentlyplaying, the element will raise an end event and another begin event, as theelement restarts.

·  Bubbles: No

·  Cancelable: No

·  Context Info: None

endEvent

This event israised at the active end of the element. Note that this event is not raised atthe simple end of each repeat. This event may be raised both in the course ofnormal (i.e. scheduled or interactive) timeline play, as well as in the casethat the element was ended with the endElement() or endElementAt() methods. Note that if an element is restarted while it is currentlyplaying, the element will raise an end event and another begin event, as theelement restarts.

·  Bubbles: No

·  Cancelable: No

·  Context Info: None

repeatEvent

This event israised when an element local timeline repeats. It will be raised each time theelement repeats, after the first iteration.
The event provides a numerical indication of which repeat iteration isbeginning. The value is a 0-based integer, but the repeat event is not raisedfor the first iteration and so the observed values of the detail attribute willbe >= 1.

·  Bubbles: No

·  Cancelable: No

·  Context Info: detail (currentiteration)


IDL Definition

 
interface TimeEvent : events::Event { 
  readonly attribute views::AbstractView view;
  readonly attribute long                detail;
 
  void initTimeEvent ( in DOMString typeArg, in views::AbstractView viewArg, in long detailArg );
};

 

Attributes

readonly views::AbstractView view

The viewattribute identifies the AbstractView [DOM2-VIEWS] from which theevent was generated.

readonly long detail

Specifies somedetail information about the Event, depending on the type of the event. Forthis event type, indicates the repeat number for the animation.

Methods

initTimeEvent

TheinitTimeEvent method is used to initialize the value of a TimeEventcreated through the DocumentEvent interface. This method may only becalled before the TimeEvent has been dispatched via the dispatchEventmethod, though it may be called multiple times during that phase if necessary.If called multiple times, the final invocation takes precedence.

Parameters

in DOMString typeArg

 

Specifies the event type.

in views::AbstractView viewArg

 

Specifies the Event's AbstractView.

in long detailArg

 

Specifies the Event's detail.

No Return Value

No Exceptions

The corresponding Java binding:

 
package org.w3c.dom.svg;
 
import org.w3c.dom.events.Event;
import org.w3c.dom.views.AbstractView;
 
public interface TimeEvent extends 
               Event {
  public AbstractView getView( );
  public int          getDetail( );
 
  void initTimeEvent ( String typeArg, AbstractView viewArg, int detailArg );
}

The following interfaces are defined below: SVGAnimationElement, SVGAnimateElement, SVGSetElement, SVGAnimateMotionElement, SVGMPathElement, SVGAnimateColorElement, SVGAnimateTransformElement.

 

Interface SVGAnimationElement

The SVGAnimationElementinterface is the base interface for all of the animation element interfaces: SVGAnimateElement,SVGSetElement,SVGAnimateColorElement,SVGAnimateMotionElementand SVGAnimateTransformElement.

Unlike other SVG DOM interfaces, the SVG DOM does notspecify convenience DOM properties corresponding to the various languageattributes on SVG's animation elements. Specification of these convenienceproperties in a way that will be compatible with future versions of SMILAnimation is expected in a future version of SVG. The current method foraccessing and modifying the attributes on the animation elements is to use thestandard getAttribute, setAttribute, getAttributeNS and setAttributeNS defined in DOM2.


IDL Definition

 
interface SVGAnimationElement : 
                SVGElement,
                SVGTests,
                SVGExternalResourcesRequired,
                smil::ElementTimeControl,
                events::EventTarget { 
 
  readonly attribute SVGElement targetElement;
 
  float getStartTime (  );
  float getCurrentTime (  );
  float getSimpleDuration (  )
                  raises( DOMException );
};

 

Attributes

readonly SVGElement targetElement

The elementwhich is being animated.

Methods

getStartTime

Returns the start time inseconds for this animation.

No Parameters

Return value

float

 

The start time in seconds for this animation relative to the start time of the time container.

No Exceptions

getCurrentTime

Returns the current time inseconds relative to time zero for the given time container.

No Parameters

Return value

float

 

The current time in seconds relative to time zero for the given time container.

No Exceptions

getSimpleDuration

Returns the number of secondsfor the simple duration for this animation. If the simple duration is undefined(e.g., the end time is indefinite), then an exception is raised.

No Parameters

Return value

float

 

The number of seconds for the simple duration for this animation.

Exceptions

DOMException

 

NOT_SUPPORTED_ERR: The simple duration is not determined on the given element.

 

Interface SVGAnimateElement

The SVGAnimateElementinterface corresponds to the 'animate' element.

Object-oriented access to the attributes of the 'animate' element via the SVG DOM is not available.


IDL Definition

 
interface SVGAnimateElement : SVGAnimationElement {};

 

 

Interface SVGSetElement

The SVGSetElementinterface corresponds to the 'set' element.

Object-oriented access to the attributes of the 'set' element via the SVG DOM is not available.


IDL Definition

 
interface SVGSetElement : SVGAnimationElement {};

 

 

Interface SVGAnimateMotionElement

The SVGAnimateMotionElementinterface corresponds to the 'animateMotion'element.

Object-oriented access to the attributes of the 'animateMotion' element via the SVG DOM is notavailable.


IDL Definition

 
interface SVGAnimateMotionElement : SVGAnimationElement {};

 

 

Interface SVGMPathElement

The SVGMPathElementinterface corresponds to the 'mpath' element.


IDL Definition

 
interface SVGMPathElement : 
                SVGElement,
                SVGURIReference,
                SVGExternalResourcesRequired {};

 

 

Interface SVGAnimateColorElement

The SVGAnimateColorElementinterface corresponds to the 'animateColor'element.

Object-oriented access to the attributes of the 'animateColor' element via the SVG DOM is notavailable.


IDL Definition

 
interface SVGAnimateColorElement : SVGAnimationElement {};

 

 

Interface SVGAnimateTransformElement

The SVGAnimateTransformElementinterface corresponds to the 'animateTransform'element.

Object-oriented access to the attributes of the 'animateTransform' element via the SVG DOM is notavailable.


IDL Definition

 
interface SVGAnimateTransformElement : SVGAnimationElement {};

 


previous  next   contents   elements   attributes   properties   index  

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
animateControl v1.0.3 的功能特点: 1、完全兼容swiper的loop模式,完美支持swiper的嵌套。 2、完美支持animate.css,能够为页面中的任意元素添加动画。 3、完美支持为单个元素同时添加多个animate.css动画效果(无需进行HTML标签的嵌套),并且,可以随意控制这些动画效果的播放方式。 4、能够设置每一个动画效果的播放方式:同步播放、依次播放、循环播放。 5、能够设置每一个动画效果的动画类型:进入动画、表演动画、退出动画(在animate.css的源码中,opacity值从0至100的是进入动画,没有opacity属性的是表演动画。opacity值从100到0的是退出动画)。 6、实现了排版效果、动画效果、动画控制的完美分离,极大的提高了开发效率,能够在很短的时间内实现复杂的动画效果控制。 7、animateControl 不与swiper结合时,可对网页中的其它元素添加动画效果,并进行控制。 8、能够让不懂JS代码的人,经过简单的学习,就能快速的制作HTML5+CSS3动态微网页。 9、相较于上一个版本,在 v1.0.3 中对整个核心代码进行了优化,大大提升了运行速率,使动画播放更流畅。 10、相较于上一个版本,在 v1.0.3 中简化了所有参数的名称,让使用变得更加简单(用更少的代码,就能实现更复杂的效果)。 11、本次发布的动画控制器文件为min版,大大减少了文件的体积(下载解压后,文件位置在:js/swiper.animate.min.js)。
animateControl v1.0.3 的功能特点: 1、完全兼容swiper的loop模式,完美支持swiper的嵌套。 2、完美支持animate.css,能够为页面中的任意元素添加动画。 3、完美支持为单个元素同时添加多个animate.css动画效果(无需进行HTML标签的嵌套),并且,可以随意控制这些动画效果的播放方式。 4、能够设置每一个动画效果的播放方式:同步播放、依次播放、循环播放。 5、能够设置每一个动画效果的动画类型:进入动画、表演动画、退出动画(在animate.css的源码中,opacity值从0至100的是进入动画,没有opacity属性的是表演动画。opacity值从100到0的是退出动画)。 6、实现了排版效果、动画效果、动画控制的完美分离,极大的提高了开发效率,能够在很短的时间内实现复杂的动画效果控制。 7、animateControl 不与swiper结合时,可对网页中的其它元素添加动画效果,并进行控制。 8、能够让不懂JS代码的人,经过简单的学习,就能快速的制作HTML5+CSS3动态微网页。 9、在 v1.0.3 中对整个核心代码进行了优化,大大提升了运行速率,使动画播放更流畅。 10、在 v1.0.3 中简化了所有参数的名称,让使用变得更加简单(用更少的代码,就能实现更复杂的效果)。 11、本次发布的动画控制器文件为min版,大大减少了文件的体积(下载解压后,文件位置在:js/swiper.animate.min.js)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值