Precise control and optimization practice of SVG SMIL animation

This tutorial explores in detail how to precisely control SMIL animations in SVG, especially pause and play for specific elements. The article corrects common misunderstandings, such as the global animation control of SVGSVGElement, and introduces the fine management of single animations through the beginElement() and endElement() methods of the ElementTimeControl interface. At the same time, the tutorial also provides best practices to optimize animation structure, simplify alternating animations, and ensure consistency in animation behavior.

Basics and common misunderstandings of SMIL animation

In SVG, SMIL (Synchronized Multimedia Integration Language) provides a declarative way to define animations. However, in practical applications, developers often encounter some misunderstandings about animation control.

values ​​Pairing usage with keyTimes attribute

When using the element for animation, if the values ​​attribute is specified to define the sequence of keyframe values ​​of the animation, a corresponding keyTimes attribute must be provided at the same time. The keyTimes property defines the time point in which each value in the values ​​list occurs, the value should be a semicolon-separated sequence of incremental numbers between 0 and 1, and the number must be the same as the number of values ​​in the values.

For example, if values="value1;value2", then keyTimes must be "0;1". If values="value1;value2;value3", then keyTimes can be "0;0.5;1". If keyTimes are omitted, or their value does not match values, the animation may not be played or controlled properly.

Error example (keyTimes missing) :

 <animate attributename="d" values="pathData1;pathData2" dur="1.5s"></animate>

Correct example (add keyTimes) :

 <animate attributename="d" values="pathData1;pathData2" keytimes="0;1" dur="1.5s"></animate>

SVGSVGElement level animation control

SVG DOM provides the SVGSVGElement interface, which contains pauseAnimations() and unpauseAnimations() methods. The purpose of these methods is to pause or restore all SMIL animations inside the entire SVG element . This means that if you call these methods on an SVG root element with multiple animations, all animations will be paused or resumed at the same time.

For example, the following code will pause or restore all animations within the SVG element with ID svg:

 document.getElementById("svg").pauseAnimations(); // Pause all animations document.getElementById("svg").unpauseAnimations(); // Restore all animations

This global control method cannot meet the need to control only specific animations. For example, in an SVG, part of the animation needs to be continuously run, while the other part requires user interaction to control.

Accurate control of single SMIL animations

To achieve precise control of a single SMIL animation in SVG, we need to utilize the methods provided by the ElementTimeControl interface, which can be called directly on the element.

ElementTimeControl interface and its methods

The ElementTimeControl interface provides the following key methods to control the playback of a single animation:

• beginElement(): Start the animation. If the animation is already active, calling this method will start it again.
• endElement(): End the animation. Calling this method will immediately stop the animation and return it to its initial state (unless fill="freeze" is set).

It should be noted that beginElement() and endElement() provide the start and end control of the animation, but they do not provide the function of "pause" in the intermediate state like the video player. To achieve a pause-like effect, it is often necessary to combine other techniques, or redesign the animation logic.

Example: Control specific animations through buttons

Suppose we have an SVG that contains two sets of animations: the animation of the poi_back group needs to be continuously running, while the animation of the poi_front group needs to be controlled by buttons to control its start and stop.

First, make sure your element has a unique id so that it can get its reference via JavaScript. For animations that require manual control, set its begin property to "indefinite", indicating that it will not start automatically and needs to be triggered manually through beginElement().

HTML structure :

 <button id="startButton">START</button>
<button id="stopButton">STOP</button>
<svg width="100%" height="100%" version="1.1" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" id="svg">
    <!-- ... Omit the bottle path... -->

    <!-- Rear animation (continuously running) -->
    <path fill="#9bc300" id="poi_back">
        <animate id="poi_back_animation" attributename="d" values="m 62.692,157.03 c ... initial state...; m 62.692,157.03 c ... intermediate state...; m 62.692,157.03 c ... initial state..." keytimes="0;0.5;1" begin="0s" automatic start-->
            dur="3s"
            repeatCount="indefinite"
        />
    </animate></path>    

    <!-- Front animation (manual control) -->
    <g id="poi_front">
        <path fill="#739a00">
            <animate id="poi_front_animation" attributename="d" values="m62.692 157.03c ... Initial state...; m 62.692,157.03c ... Intermediate state...; m62.692 157.03c ... Initial state..." keytimes="0;0.5;1" begin="indefinite" manual control-->
                dur="3s"
                repeatCount="indefinite"
                fill="freeze" <!-- Keep the final state after the animation is over->
            />      
        </path> 
    </g>    
</svg>

JavaScript control logic :

 // Get the animation element that needs to be controlled const poiFrontAnimation = document.getElementById("poi_front_animation");

// Add event listener document.getElementById("startButton").onclick = function() {
    poiFrontAnimation.beginElement(); // Start poi_front animation};   

document.getElementById("stopButton").onclick = function() {
    poiFrontAnimation.endElement(); // Stop poi_front animation};

CSS style (keep the same, for page layout) :

 html, body {
    height: 100%;
    margin: 0%;
    padding: 0%;
    overflow: hidden;
}
body {
    height: 100vh;
    display: flex;
    background-color: #2a0000;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
}  
#startButton {
    width: 60px;
    height: 30px; 
    background-color: orange;
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}
#stopButton {
    width: 60px;
    height: 30px; 
    background-color: yellow; 
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

In this example, the beginning="0s" of poi_back_animation makes it automatically start and loop infinitely after the page is loaded. The begin="indefinite" of poi_front_animation makes it wait for the user to click the "START" button to start through the beginElement() method, and click the "STOP" button to stop through the endElement() method.

Optimize SMIL animation structure

Original SMIL animations often implement alternating animations through chain triggering (for example, begin="0s;poi_back_2.end"). This approach, while feasible, adds complexity in management and debugging, especially when manual control is required, the trigger of endEvent may accidentally restart the painting.

Merge alternating animations

A simpler practice is to merge two alternating animations into a element. This can be achieved by extending the values ​​and keyTimes properties.

For example, if the animation alternates between state A and state B, we can define values="StateA;StateB;StateA" and set keyTimes="0;0.5;1". In this way, the animation will go from A to B and then back to A in dur time, completing a complete loop.

Structure before optimization (two alternating animations) :

 <animate id="anim_1" attributeName="d" values="StateA;StateB" begin="0s;anim_2.end" dur="1.5s"/>
<animate id="anim_2" attributeName="d" values="StateB;StateA" begin="anim_1.end" dur="1.5s"/>

Optimized structure (a merge animation) :

 <animate 
    id="single_anim"
    attributeName="d"
    values="StateA;StateB;StateA"
    keyTimes="0;0.5;1"
    dur="3s" <!-- Duplicate duration->
    repeatCount="indefinite"
    begin="0s" <!-- or "indefinite" -->
/></animate></path></g></svg>

In this way, the animation logic becomes clearer and easier to control through beginElement() and endElement(), because there is only one animation element that needs to be managed.

The function of fill="freeze"

When the animation ends, the element's properties will usually return to the state before the animation begins. If you want the element to remain in its final state after the animation is over, you can set the fill="freeze" attribute on the element. This is very useful when you stop an animation and want it to stay at the last frame of the animation.

Complete sample code

Below is a complete example code combining all the optimization and control strategies mentioned above.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG SMIL animation precision control</title>
    <style>
        html, body {
            height: 100%;
            margin: 0%;
            padding: 0%;
            overflow: hidden;
        }
        body {
            height: 100vh;
            display: flex;
            background-color: #2a0000;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
        }  
        #startButton {
            width: 60px;
            height: 30px; 
            background-color: orange;
            position: relative;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        #stopButton {
            width: 60px;
            height: 30px; 
            background-color: yellow; 
            position: relative;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    </style>


    <button id="startButton">START</button>
    <button id="stopButton">STOP</button>
    <svg width="100%" height="100%" version="1.1" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" id="svg">
        <!--Begin Bottle -->
        <path d="m166.76 57.45c-13.062-0.0623-26.955 0.73204-46.311 0.0859-2.7685-0.0924-5 2.23-5 5v10.709c-2e-5 2.77 2.23 5 5 5h4.7226v6.209a88.388 88.388 0 0 0 -67.176 85.715 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 -88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 88.389 88.388 88.388 0 0 0 0 0 -67.176 -85.695v-6.2285h4.7227c2.77 0 5-2.23 5-5v-10.709c0-2.77-2.231-4.9242-5-5-1.8457-0.0506-3.6945-0.077-5.5606-0.0859z" fill="#1b000c"></path>
        <path d="m231.11 170.17c0 46.793-37.933 84.727-84.727-46.793 0-84.727-37.933-84.727-84.727-1e-6 -40.912 28.997-75.051 67.559-82.986 12.071 2.5421 23.795 1.9463 35.395 0.22531 38.033 8.3382 66.499 42.225 66.499 82.761z" fill="#270600"></path>
        <path d="m122.57 61.1c16.221 0.59986 32.004 0.30589 47.553 0 1.8278-0.036 3.3 1.4718 3.3 3.3v6.2541c0 1.8282-1.4718 3.3-3.3 3.3h-47.553c-1.8282 0-3.3-1.4718-3.3v-6.2541c0-1.8282 1.473-3.3676 3.3-3.3z" fill="#270600"></path>
        <path d="m129.08 77.57v6.0117c9.8102 2.4161 28.289 2.4275 35 0v-6.0117z" fill="#270600"></path>
        <!--End Bottle -->

        <!--Begin Poison Back (continuous operation)-->
        <path fill="#9bc300" id="poi_back">
            <animate id="poi_back_animation" attributename="d" values="m 62.692,157.03 c -0.66726,4.2839 -1.0332,8.6677 -1.0332,13.139 2e-6,46.793 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.933 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -14.83662,12.68631 -46.3415,32.04916 -110.09827,6.15172 C 55.89527,130.25689 61.6596,170.1687 62.6926,157.03 Z; m 62.692,157.03 c 0.858416,-8.12931 -0.379575,2.34105 -1.0332,13.139 -2.827316,46.70751 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.933 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -8.28777,2.68817 -30.19905,-24.60832 -80.45959,1.45473 C 92.556926,187.6518 60.557883,163.01304 61.6588,170.169 Z;m 62.692,157.03 c -0.66726,4.2839 -1.0332,8.6677 -1.0332,13.139 2e-6,46.793 37.933,84.727 84.727,84.727 46.793,0 84.727,-37.9333 84.727,-84.727 0,-4.4706 -0.36411,-8.8552 -1.0312,-13.139 -14.83662,12.68631 -46.3415,32.04916 -110.09827,6.15172 C 55.89527,130.25689 61.6596,170.1687 62.6926,157.03 Z" keytimes="0;0.5;1" begin="0s" automatic start-->
                dur="3s"
                repeatCount="indefinite"
            />
        </animate></path>    
        <!--End Poison Back-->

        <!--Begin Poison Front (Manual Control)-->
        <g id="poi_front">
            <path fill="#739a00">
                <animate id="poi_front_animation" attributename="d" values="m62.692 157.03c-0.66726 4.2839-1.0332 8.6677-1.0332 13.139 2e-6 46.793 37.933 84.727 84.727 84.727 46.793 0 84.727-37.933 84.727-84.727 0-4.4706-0.36411-8.8552-1.0312

">

The above is the detailed content of Precise control and optimization practice of SVG SMIL animation. For more information, please follow other related articles on the PHP Chinese website!