SMIL introduced

SMIL stands for Synchronized Multimedia Integration Language, which allows us to achieve animation effects through HTML tags. It can be used for:

  • Implement transition animation
  • Implement tween animation
  • Animation color transformation
  • Path motion animation (CSS3 not available)

SMIL contains the following tags:

<set>
<animate>
<animateColor>// This element is now obsolete.<animateTransform>
<animateMotion>
Copy the code

Why SMIL?

A whole new way to animate:

  • No CSS
  • Without JS
  • A few tabs to easily implement complex animations, doesn’t it smell?

An introduction to some common properties of SMIL elements

  • attributeName: represents the property that needs to be animated.
  • attributeType: Determines whether it is an SVG element attribute change or a CSS attribute change based on the value specified by attributeName.
    • CSS: indicates the change of the CSS property value.
    • XML, representing changes in SVG attribute values.
  • begin: indicates how many seconds the animation is delayed.
  • from: indicates the value at which the animation begins.
  • to: indicates the end value of the animation.
  • fill: indicates the state at the end of the animation.
    • Freeze: indicates that the animation state is at the end of the animation.
    • Remove: indicates that after the end, the state is in the animation state at the beginning.
  • values: indicates the implementation of multiple state animation. You cannot use from, to attributes. Each state value passes;Space.
  • dur: indicates how many seconds the animation lasts.
  • type: Type of transformation in the animateTransform element.
  • repeatCount: indicates how many times the animation is repeated.
  • path: Indicates the trajectory of the animateMotion element during the animation.
  • rotate: represents how the animateMotion animation will behave when it reaches an angular position. Generally, the value is set to 0.
  • id: Specifies the unique identity of each animation element, which can be combined with BEGIN to implement complex animations.

The set tag

Implement deferred setting of properties

<svg width="400" height="400">
  <rect x="0" y="0" width="100" height="100">
    <set attributeName="x" attributeType="XML" to="10" begin="1s" />
    <set attributeName="x" attributeType="XML" to="20" begin="2s" />
    <set attributeName="x" attributeType="XML" to="30" begin="3s" />
    <set attributeName="x" attributeType="XML" to="40" begin="4s" />
    <set attributeName="x" attributeType="XML" to="50" begin="5s" />
  </rect>
</svg>
Copy the code

The animate label

An animation element is placed inside a shape element to define how a property of an element changes with time. An attribute changes from a start value to an end value during the specified duration.

  <svg width="200" height="200" viewPort="0 0 200 200">
    <rect x="10" y="10" width="100" height="100">
      <animate attributeType="CSS" attributeName="width" from="100" to="150" dur="3s" fill="freeze" />
    </rect>
  </svg>
  <svg width="200" height="200" viewPort="0 0 200 200">
    <rect x="10" y="10" width="100" height="100">
      <animate attributeType="XML" attributeName="width" from="100" to="150" dur="3s" fill="freeze" />
    </rect>
  </svg>
Copy the code

The above two achieve the same effect. One through CSS and one through SVG.

Shape tween animation. A change in an irregular pattern.

<svg width="400" height="400">
  <polygon points="30 30 70 30 90 70 10 70" fill="#fcc" stroke="black">
    <animate attributeName="points" attributeType="XML" to="50 30 70 50 50 90 30 50" dur="5s" fill="freeze" repeatCount="1" />
  </polygon>
</svg>
Copy the code

AnimateTransform label

The animateTransform element modifies a deformation property on the target element, allowing the animation to control transformation, scaling, rotation, or bevel. Note: This element is needed if you encounter a change in the value of the transform attribute. Instead of using animate elements to perform transformations.

  <svg width="200" height="200" viewBox="0 0 200 200">
    <rect x="0" y="0" width="60" height="60" fill="red">
      <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="2"
        repeatCount="indefinite" />
    </rect>
  </svg>
Copy the code

The animateMotion label

This is a very nb label. The element can be moved through a specified trajectory.

Implement a trajectory animation

  <svg width="300px" height="100px">
    <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" fill="none" />
    <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1">
      <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" dur="3s"
        repeatCount="indefinite" rotate="auto">
    </rect>
  </svg>
Copy the code

Implement a complex hybrid animation

<svg viewBox="0 0 200 200" width="200" height="200">
    <rect x="0" y="0" rx="0" ry="0" width="10" height="10" fill="red">
      <animateMotion
        id="forward-rect"
        path="M 10 10 L 110 10 L 110 110 L 10 110"
        dur="2s"
        rotate="0"
        fill="freeze"
        begin="0; Backward - the rect. End + 0.5 s"
      />
      <animateMotion
        id="backward-rect"
        path="M 10 110 L 110 110 L 110 10 L 10 10"
        dur="2s"
        rotate="0"
        fill="freeze"
        begin="Forward - the rect. End + 0.5 s"
      />
      <animate
        id="red-to-blue"
        attributeType="XML"
        attributeName="fill"
        begin="0; blue-to-red.end + 1s"
        from="red"
        to="blue"
        dur="2s"
        fill="freeze"
      />
      <animate
        id="blue-to-red"
        attributeType="XML"
        attributeName="fill"
        begin="red-to-blue.end + 1s"
        from="blue"
        to="red"
        dur="2s"
        fill="freeze"
      />
    </rect>
    <path d="M 10 10 L 110 10 L 110 110 L 10 110" fill="none" stroke-width="1" stroke="blue"/>
</svg>
Copy the code

Implement a nice loading animation

  <svg viewBox="0 0 50 to 50." " width="200" height="200">
    <circle cx="25" cy="25" r="22" fill="none" stroke-width="3" stroke-dasharray="34" stroke="#3be6cb"
      stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" values="0 25 25; 360 25 25" dur="1.5 s"
        repeatCount="indefinite" />
      <animate attributeName="stroke" values="#3be6cb; #02bcfe; #3be6cb" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="25" cy="25" r="12" fill="none" stroke-width="3" stroke-dasharray="19" stroke="#02bcfe"
      stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" values="360 25 25; 0 25 25" dur="1.5 s"
        repeatCount="indefinite" />
      <animate attributeName="stroke" values="#02bcfe; #3be6cb; #02bcfe" dur="3s" repeatCount="indefinite" />
    </circle>
  </svg>
Copy the code