登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > SVGSMIL动画暂停与播放技巧

SVGSMIL动画暂停与播放技巧

2025-09-09 17:18:36 0浏览 收藏

本文深入探讨了SVG SMIL动画的暂停与启动方法，旨在解决使用`pauseAnimations()`和`unpauseAnimations()`方法控制动画时作用范围过大的问题。针对SVG动画，特别是需要独立控制的动画，本文提出了利用`ElementTimeControl`接口的`beginElement()`和`endElement()`方法来精确控制单个动画的开始和结束。此外，文章还分享了优化SVG动画结构，例如合并交替动画，通过调整`values`、`keyTimes`、`dur`和`repeatCount`等属性，以及设置`begin`属性为`indefinite`，从而简化动画控制的技巧。通过学习本文，开发者可以更有效地控制SVG动画，创建更具交互性的动态效果。

控制SVG中SMIL动画的暂停与启动

在SVG中，使用SMIL动画可以为图形元素添加动态效果。然而，在需要对多个动画进行独立控制时，直接使用pauseAnimations()和unpauseAnimations()可能会遇到问题，因为它们会影响整个SVG文档中的所有动画。本文将介绍如何更精确地控制SVG中的SMIL动画，包括暂停、启动特定动画，以及优化动画结构以简化控制。

理解pauseAnimations()和unpauseAnimations()的局限性

pauseAnimations()和unpauseAnimations()方法是SVGSVGElement接口提供的，它们分别用于暂停和恢复SVG文档中的所有动画。这意味着，如果你只想控制某个特定元素的动画，这两个方法就显得过于宽泛。

// 暂停SVG文档中的所有动画
document.getElementById("svg").pauseAnimations();

// 恢复SVG文档中的所有动画
document.getElementById("svg").unpauseAnimations();

使用ElementTimeControl接口控制单个动画

要实现对单个动画的精确控制，可以使用ElementTimeControl接口。该接口提供了beginElement()和endElement()方法，分别用于启动和停止动画。需要注意的是，这种方式无法在动画的中间状态暂停和恢复，只能控制动画的开始和结束。

// 获取需要控制的动画元素
var poiFront1 = document.getElementById("poi_front_1");

// 启动动画
poiFront1.beginElement();

// 停止动画
poiFront1.endElement();

优化动画结构：合并交替动画

在某些情况下，SVG动画可能由多个交替进行的动画组成，例如在提供的代码中，poi_front元素包含两个交替的动画poi_front_1和poi_front_2。为了简化控制，可以将这两个动画合并为一个。

  1. 合并values属性： 将两个动画的values属性合并为一个，使用分号分隔，形成"...state1...;...state2...;...state1..."的格式。
  2. 设置keyTimes属性： 为合并后的values属性设置对应的keyTimes属性，确保keyTimes的数量与values的数量一致，并按升序排列，例如"0;0.5;1"。
  3. 调整dur属性： 将动画的dur属性设置为原始单个动画时长的两倍。
  4. 设置repeatCount属性： 设置repeatCount="indefinite"，使动画无限循环播放。
  5. 控制动画的启动方式： 如果希望动画自动播放，则设置begin="0s"。如果希望通过JavaScript控制动画的启动，则设置begin="indefinite"。

以下是修改后的SVG代码示例：

<path fill="#739a00">
    <animate
        id="poi_front_1"
        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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z; 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; 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z"
        keyTimes="0;0.5;1"
        begin="indefinite"
        dur="3s"
        repeatCount="indefinite"
    />
</path>

完整示例

<!DOCTYPE html>
<html>
<head>
    <title>SVG Animation 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;
        }  
        #button{
            width: 60px;
            height: 30px; 
            background-color: orange;
            position: relative;
            margin-top: 5px;
            margin-bottom:  5px;
        }
        #button2{
            width: 60px;
            height: 30px; 
            background-color: yellow; 
            position: relative;
            margin-top: 5px;
            margin-bottom:  5px;
        }
    </style>
</head>
<body>
    <button id="button">START</button>
    <button id="button2">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.389 88.388 88.388 0 0 0 88.389 -88.389 88.388 88.388 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 
            d="m231.11 170.17c0 46.793-37.933 84.727-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 
            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.3-3.3v-6.2541c0-1.8282 1.473-3.3676 3.3-3.3z" 
            fill="#270600"/>
        <path 
            d="m129.08 77.57v6.0117c9.8102 2.4161 28.289 2.4275 35 0v-6.0117z"
            fill="#270600"/>
        <!--End Bottle -->
        <!--Begin Poison Back-->
        <path 
            fill="#9bc300"
            id="poi_back">
            <animate 
                id="poi_back_1"
                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.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"
                keyTimes="0;0.5;1"
                begin="0s"
                dur="3s"
                repeatCount="indefinite"
            />
        </path>    
        <!--End Poison Back-->
        <!--Begin Poison Front-->
        <g id="poi_front">
            <path 
                fill="#739a00"
                >
                <animate
                    id="poi_front_1"
                    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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z; 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; 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-13.139-7.1302-16.488-52.947-12.538-86.979 5.0508-31.611 16.066-81.443 8.0879-80.41-5.0508z"
                    keyTimes="0;0.5;1"
                    begin="indefinite"
                    dur="3s"
                    repeatCount="indefinite"
                />
            </path> 
        </g>    
        <!--End Poison Front-->
    </svg>

    <script>
        var poiFront1 = document.getElementById("poi_front_1");

        document.getElementById("button").onclick = function (){
            poiFront1.beginElement();
        }   

        document.getElementById("button2").onclick = function (){
            poiFront1.endElement();
        }
    </script>
</body>
</html>

注意事项

  • 确保你的SVG文档正确引入了SMIL动画所需的命名空间。
  • keyTimes属性的值必须与values属性的值一一对应。
  • 使用ElementTimeControl接口控制动画时，无法在动画的中间状态暂停和恢复。
  • beginElement()和endElement()方法只能在begin属性设置为indefinite的动画上使用。
  • 如果希望在动画停止后保持在屏幕上，可以设置fill="freeze"。

总结

通过本文，你学习了如何精确控制SVG中的SMIL动画，包括使用ElementTimeControl接口控制单个动画的启动和停止，以及如何通过优化动画结构来简化控制流程。掌握这些技术可以帮助你创建更复杂、更具交互性的SVG动画。

今天关于《SVGSMIL动画暂停与播放技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

Golang代理优化与HTTP性能解析Golang代理优化与HTTP性能解析
上一篇
Golang代理优化与HTTP性能解析
Java开发机器人：ROS2接口使用教程
下一篇
Java开发机器人：ROS2接口使用教程
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    514次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    499次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    484次学习
查看更多
AI推荐
  • SEO AI Mermaid 流程图：自然语言生成，文本驱动可视化创作
    AI Mermaid流程图
    SEO AI Mermaid 流程图工具：基于 Mermaid 语法，AI 辅助，自然语言生成流程图，提升可视化创作效率，适用于开发者、产品经理、教育工作者。
    35次使用
  • 搜获客笔记生成器：小红书医美爆款内容AI创作神器
    搜获客【笔记生成器】
    搜获客笔记生成器，国内首个聚焦小红书医美垂类的AI文案工具。1500万爆款文案库，行业专属算法，助您高效创作合规、引流的医美笔记，提升运营效率，引爆小红书流量！
    5次使用
  • iTerms：一站式法律AI工作台，智能合同审查起草与法律问答专家
    iTerms
    iTerms是一款专业的一站式法律AI工作台，提供AI合同审查、AI合同起草及AI法律问答服务。通过智能问答、深度思考与联网检索，助您高效检索法律法规与司法判例，告别传统模板，实现合同一键起草与在线编辑，大幅提升法律事务处理效率。
    42次使用
  • 迅捷AIPPT：AI智能PPT生成器，高效制作专业演示文稿
    迅捷AIPPT
    迅捷AIPPT是一款高效AI智能PPT生成软件，一键智能生成精美演示文稿。内置海量专业模板、多样风格，支持自定义大纲，助您轻松制作高质量PPT，大幅节省时间。
    29次使用
  • 迅捷AI写作软件：AI智能创作专家，赋能高效文本处理
    迅捷AI写作
    迅捷AI写作，您的智能AI写作助手！快速生成各类文稿，涵盖新媒体、工作汇报。更兼具文字识别、语音转换、格式转换等实用功能，一站式解决文本处理难题，显著提升工作效率。
    15次使用
查看更多
相关文章
关于我们 免责声明 意见反馈 联系我们 内容提交
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
技术交流群
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
  • Golang学习网
    关注公众号
    Golang学习网
微信登录更方便
  • 密码登录
  • 注册账号
忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码