登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > SVG中SMIL动画暂停播放控制方法

SVG中SMIL动画暂停播放控制方法

2025-09-14 12:18:29 0浏览 收藏

前往漫画官网入口并下载

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《SVG中SMIL动画暂停与播放控制方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

控制SVG中SMIL动画的暂停与运行

本文旨在解决如何精确控制SVG中特定SMIL动画的暂停与运行，同时保持其他动画的连续播放。文章将深入探讨pauseAnimations()和unpauseAnimations()方法的局限性，并介绍如何利用ElementTimeControl接口的beginElement()和endElement()方法实现对单个动画的精细控制。此外，还将提供优化SMIL动画结构，简化动画控制逻辑的实用技巧。

理解动画控制的局限性

在SVG中，使用pauseAnimations()和unpauseAnimations()方法只能作用于元素本身，它们会暂停或恢复SVG文档中所有的动画元素。这意味着无法直接通过这些方法单独控制特定动画的播放状态。

例如，以下代码会暂停或恢复整个SVG文档的动画：

document.getElementById("svg").pauseAnimations();
document.getElementById("svg").unpauseAnimations();

使用ElementTimeControl接口控制单个动画

要实现对单个动画的精确控制，我们需要使用ElementTimeControl接口，该接口提供了beginElement()和endElement()方法。这些方法允许我们启动或停止特定的元素。

以下代码演示了如何使用beginElement()和endElement()方法控制id为"poi_front_1"的动画：

var poiFront1 = document.getElementById("poi_front_1")

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

document.getElementById("button2").onclick = function (){
    poiFront1.endElement();
}

优化SMIL动画结构

当动画需要在两个状态之间循环切换时，可以考虑将两个独立的元素合并为一个。通过使用values、keyTimes、dur和repeatCount属性，可以更简洁地定义动画的行为。

例如，可以将以下两个元素：

<animate
    id="poi_front_1"
    attributeName="d"
    values="...state1...;...state2..."
    begin="0s;poi_front_2.end"
    dur="1.5s"
/>
<animate
    id="poi_front_2"
    attributeName="d"
    values="...state2...;...state1..."
    begin="poi_front_1.end"
    dur="1.5s"
/>

合并为：

<animate
    id="poi_front_1"
    attributeName="d"
    values="...state1...;...state2...;...state1..."
    keyTimes="0;0.5;1"
    begin="0s"  // 或 "indefinite"
    dur="3s"
    repeatCount="indefinite"
/>

在这个例子中：

  • values属性包含了动画的起始状态、中间状态和结束状态（与起始状态相同，用于循环）。
  • keyTimes属性定义了每个状态对应的时间点，这里将动画分为三个阶段，每个阶段占据总时间的1/2。
  • dur属性设置为3秒，是原始两个动画时长的总和。
  • repeatCount="indefinite" 确保动画无限循环。
  • begin="0s" 设置为自动开始，设置为 "indefinite" 可以使用 beginElement() 和 endElement() 控制。

HTML代码

<button id="button">START</button>
<button id="button2">STOP</button>

JavaScript代码

var poiFront1 = document.getElementById("poi_front_1")

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

document.getElementById("button2").onclick = function (){
    poiFront1.endElement();
}

SVG代码

<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>

CSS代码

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;
}

额外技巧

  • keyTimes属性: 确保keyTimes属性的值的数量与values属性的值的数量一致，并且按照升序排列（从0到1）。
  • fill="freeze": 如果希望动画在停止后保持在最终状态，可以设置fill="freeze"。
  • 事件处理: 使用beginElement()和endElement()方法时，注意处理可能的事件冲突，确保动画状态的正确切换。

总结

通过理解pauseAnimations()和unpauseAnimations()方法的局限性，并掌握ElementTimeControl接口的使用，可以实现对SVG中SMIL动画的精细控制。此外，优化动画结构可以简化控制逻辑，提高代码的可维护性。在实际应用中，请根据具体需求选择合适的动画控制策略。

以上就是《SVG中SMIL动画暂停播放控制方法》的详细内容，更多关于的资料请关注golang学习网公众号！

Golang反射用途及实战解析Golang反射用途及实战解析
上一篇
Golang反射用途及实战解析
Excel公式下拉不变的设置方法
下一篇
Excel公式下拉不变的设置方法
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
    3193次使用
  • Any绘本：开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
    3405次使用
  • 可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图
    可赞AI
    可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
    3436次使用
  • 星月写作：AI网文创作神器，助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
    4543次使用
  • MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
    3814次使用
查看更多
相关文章
关于我们 免责声明 意见反馈 联系我们 内容提交
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
技术交流群
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
  • Golang学习网
    关注公众号
    Golang学习网
微信登录更方便
  • 密码登录
  • 注册账号
忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码