HTML5 's 2D svg and SVG Dom Learning notes (2)---svg animations

SVG supports animations. There are several ways to get an animated effect:

• Use SVG animation elements . SVG can describe graphical objects that change over time, using different animation elements to define motion paths, fade effects, and the expansion, contraction, rotation, and transformation colors of objects.
• Use the SVG DOM. SVG DOM is compatible with DOM1 and DOM2, while SVG defines a set of additional DOM interfaces that support scripting animations. All kinds of animation effects can be obtained by this method. The timer object in the scripting language can be used to start and control animations.
• SVG is designed to support future versions of SMIL(sychronized Multimedia Integration Language). SMIL will be modularized and connected to SVG and other XML-based languages to produce animated effects.

First, the animation elements in SVG

There are five animated elements in SVG, all of which can change the attributes or style values of an SVG element over time, as follows:

• <animate>: Change the value of a property or style of a value;
• <set>: Change the value of a property or style of a non-data value, such as a visibility attribute;
• <animatemotion>: Moving SVG elements along a path for animated effects;
• <animatecolor>: The value of a property or style that alters the color of certain elements;
• <animatetransform>: The animation effect of changing SVG elements for coordinate transformation;

Attributename= "<attributeName>": the attribute or style in the SVG element that is being worked on is required to produce an animated effect.

Attrbutetype= "<xml| Css|auto> ": Indicates which namespace defines the property or style value that produces the animation effect. "XML" means the value of "AttributeName" is the XML attribute name defined in the default XML namespace; "CSS" means that the value of "AttributeName" is the name of the default CSS property; "Auto" is the default value. The parser parses the CSS property list to see if there is a property name that matches "AttributeName", and then finds it in the XML namespace.

1. Common properties related to time control

Begin= "<clock-time-value>|wallclock-sync-value|indefinite|eventname": Defines the start time of the animation.

• A. Time offset value, such as 3S for 3 seconds after animation starts (HH:MM:SS.XXXX)
• B. Real-world time, after the definition to ensure that the SVG document to open before this time
• C.endefinite: Indicates that the animation does not start automatically and requires a dynamic script to call the "beginelement ()" method or to point to an animated element
• D.eventname: Indicates that an animation starts playing when an event is triggered. such as begin= "MouseDown"
  • 1.dur= "<clock-time-value>|indefinite": Defines the duration of the animation
  • 2.end= "<clock-time-value>|indefinite": Defines the end time of the animation
  • 3.restart= "Always|whennotactive|never": whether to replay
  • 4.repeatCount: Repeat number indefinite means infinite replay
  • 5.repeatDur: Defines the total time of animation playback
  • 6.fil= "Freeze|remove": Defines whether the animation will remain at the end of playback or back to its starting position after it has finished playing

2. Common properties related to process Control

From= "<value>": Defines the value of the property value that the animation element is acting on when it starts to change

To= "<value>": Defines the value of the property value that the animation element acts upon when the change ends

By= "<value>": Defines the step value for each change in the property value that the animation element is acting on

Calcmode= "Discrete|linear|paced|spline": Defining the interpolation calculation method for direct transitions of animation keys

• Discrete means that the interpolation algorithm is not used, and the animation jumps from one key point to another key point
• Linear represents a linear interpolation algorithm, which is the default interpolation algorithm used by <animate> elements and <set> elements
• Paced means to interpolate with the method of uniform change on the bill
• Spline represents interpolation with three Bezier curves and requires a mate of the "Keysplines" attribute

Example 1:

<rectx= " the"y= " the"width= "+"Height= " the">    <AnimateAttributeType= "XML"AttributeName= "X" from= " the" to= "+"dur= "3s"begin= "3s"Restart= "Always"RepeatCount= "3" ></Animate></rect>

Example 2:

<textx= "0"y= "0"font-size= "Panax Notoginseng"Visibility= ' hidden 'Stroke= "BLACK"Stroke-width= "2" >    <animatemotionPath= "m0,0 l50,50 l100,150"begin= "1s"dur= "5s"Fill= "Freeze"Rotate= "Auto"/></text>

Example 3:

<svgwidth= "100%"Height= "100%"version= "1.1"xmlns= "Http://www.w3.org/2000/svg">    <gTransform= "Translate (100,100)"> <textID= "TextElement"x= "0"y= "0"style= "font-family:verdana;font-size:24; Visibility:hidden">It ' s svg! <SetAttributeName= "Visibility"AttributeType= "CSS" to= "visible"begin= "1s"dur= "5s"Fill= "Freeze" />        <animatemotionPath= "M-L"begin= "1s"dur= "5s"Fill= "Freeze" />        <AnimatetransformAttributeName= "Transform"AttributeType= "XML"type= "Rotate" from= "0" to= " the"begin= "1s"dur= "15s"Fill= "Freeze"RepeatCount= ' indefinite '/>         <AnimatetransformAttributeName= "Transform"AttributeType= "XML"type= "scale" from= "1" to= "3"additive= "Sum"begin= "1s"dur= "5s"Fill= "Freeze" />     </text> </g> </svg>

Two

Reference:

• Animated elements in SVG

• Basic SVG Animations

• Intermediate SVG Animations
• Advanced SVG Animations
• HTML5 Graphics
• Scalable Vector Graphics (SVG)

HTML5 's 2D svg and SVG Dom Learning notes (2)---svg animations