svg动画制作 svg动画教程

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

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

例如，以下代码会暂停或恢复整个SVG文档的动画：document.getElementById(quot；svgquot；).pauseAnimations()；document.getElementById(quot；svgquot；).unpauseAnimations()；登录后复制使用ElementTimeControl接口控制单个动画

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

以下代码演示了如何使用beginElement()和endElement()方法控制id为“poi_front_1”的动画：var poiFront1 = document.getElementById(quot；poi_front_1quot；)document.getElementById(quot；buttonquo​​t；).onclick = function (){ poiFront1.beginElement()；} document.getElementById(quot；button2quot；).onclick = function (){ poiFront1.endElement()；}登录后复制登录后复制优化SMIL动画结构

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

例如，可以将以下两个lt；animategt；元素：lt；animate id=quot；poi_front_1quot；attributeName=quot；dquot；values=quot；...state1...；...state2...quot；begin=quot；0s；poi_front_2.endquot；dur=quot；1.5squot；/gt；lt；animate id=quot；poi_front_2quot；attributeName=quot；dquot； value=quot；...state2...；...state1...quot；begin=quot；poi_front_1.endquot；dur=quot；1.5squot；/gt；登录后复制

MD为：lt；animate id=quot；poi_front_1quot；attributeName=quot；dquot；values=quot；...state1...；...state2...；...state1...quot；keyTimes=quot；0；0.5；1quot； begin=quot；0squot； // 或 ”；不定”； dur=”；3s”； RepeatCount=quot；indefinitequot；/gt；登录后复制

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

HTML代码lt；按钮id=quot；buttonquo​​t；gt；STARTlt；/buttongt；lt；按钮id=quot；button2quot；gt；STOPlt；/buttongt；登录后复制

JavaScript代码var poiFront1 = document.getElementById(quot；poi_front_1quot；)document.getElementById(quot；buttonquo​​t；).onclick = function (){ poiFront1.beginElement()；} document.getElementById(quot；button2quot；).onclick = function (){ poiFront1.endElement()；}登录后复制登录后复制

SVG代码lt；svg width=quot；100quot； height=quot；100quot； version=quot；1.1quot；viewBox=quot；0 0 300 300quot； xmlns=quot；http：//www.w3.org/2000/svgquot； id=quot；svgquot；gt；lt；!--开始瓶子--gt； lt；路径 d=quot；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.0859zquot； fill=quot；#1b000cquot；/gt； lt；路径 d=quot；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.761zquot； fill=quot；#270600quot；/gt； lt；path d=quot；m122.57 61.1c16.221 0.59986 32.004 0.30589 47.553 0 1.8278-0.0

36 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.3zquot； 填充=quot；#270600quot；/gt； lt；路径 d=quot；m129.08 77.57v6.0117c9.8102 2.4161 28.289 2.4275 35 0v-6.0117zquot； 填充=quot；#270600quot；/gt； lt；!--结束瓶子--gt； lt；!--开始毒液回归--gt； lt；path fill=quot；#9bc300quot； id=quot；poi_backquot；gt； lt；animate id=quot；poi_back_1quot； attributeName=quot；dquot； values=quot；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

Zquot； keyTimes=quot；0；0.5；1quot； begin=quot；0squot； dur=quot；3squot； repeatCount=quot；indefinitequot； /gt； lt；/pathgt； lt；!--结束毒药后部--gt； lt；!--开始毒药前部--gt； lt；g id=quot；poi_frontquot；gt； lt；path fill=quot；#739a00quot； gt； lt；animate id=quot；poi_front_1quot； attributeName=quot；dquot； values=quot；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"； /gt； lt；/pathgt； lt；/ggt； lt；!--结束点

on Front--gt；lt；/svggt；登录后复制

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；背景色：橙色；位置：relative；margin-top：5px；margin-bottom：5px；}#button2{ width：60px；height：30px；background-color：黄色；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动画的暂停与运行的详细信息，更多请关注乐哥常识网其他相关！