SVG 的 SMIL 是否已弃用、未弃用或...已暂停但最终将被弃用？

Question

SVG 的 SMIL 是否已弃用、未弃用或...已暂停但最终将被弃用？

Rou*_*ica 14 svg gecko blink smil

TLDR：我正在尝试确定是否值得花一些时间掌握SMIL。官方路线（至少来自 Blink，但可能不是来自 Gecko）似乎是这种动画技术在功能上已被弃用……但实际情况表明情况并非如此。

我想学习 SMIL，因为它让我觉得它是一种优雅的技术——但我不想今年花几个月的时间学习一两年后就会过时的东西。

问题： 值得学习SMIL吗？

几年前，人们一致认为SVG的动画语言SMIL（同步多媒体集成语言）将被弃用：

2015 年 4 月，Blink团队写道：

“我们打算弃用 SMIL 动画以支持 CSS 动画和 Web 动画”

资料来源： https : //groups.google.com/a/chromium.org/g/blink-dev/c/5o0yiO440LM）

五年半前有意弃用的两个主要原因似乎是：

“在实现方面，SMIL 为 Blink 增加了显着的复杂性”
“Internet Explorer 不支持 SMIL，这限制了它对关键功能的使用”

滚动到 2020 年，Internet Explorer迷失在时间的迷雾中，MSIE 的继任者Edge现在使用Blink渲染引擎（以及Chromium、Chrome、Opera、Brave等）。

眨眼的主要竞争对手，壁虎，也似乎完全满意SMIL：

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

最终结果是SMIL现在在整个现代浏览器领域都得到了强有力的支持：

https://caniuse.com/svg-smil

那么我们现在在哪里？我们能否安全地忘记 2015 年的弃用意图，并在SMIL回归并继续存在的基础上工作？

提议的重复问题及其答案很好地参考了 Blink 最初宣布打算弃用 SMIL 以及后来宣布打算暂停弃用 SMIL（稍后将继续）。但讨论是从 2016 年开始的。问题并没有考虑到 2020 年，SMIL 的拥护者是否会（？）悄悄占上风，尽管缺乏官方澄清，但可能根本不再有任何坚决反对 SMIL 的意图。（例如，Gecko 似乎从来没有任何反对 SMIL 的热情，是吗？）

Answer 1 · 2020-10-24T22:01:55.000020+08:00

Ale*_*_TT 10

试图确定是否值得花一些时间掌握 SMIL。官方的说法似乎是这种动画技术在功能上已被弃用……但实际情况表明情况并非如此。

当然，在我看来掌握 SMIL 是值得的。

由于许多原因，值得学习：

SMIL 是一个用它开发的原生 SVG 框架
SVG 的 CSS 动画仍然无法复制 SMIL 的所有丰富功能，
我将尝试通过具体示例来展示这一点。
对其属性的 SVG 过滤器和 CSS 动画支持不佳
CSS 对矢量对象及其属性的支持非常弱。例如宽度、高度、半径、字母，作为向量元素。Chrome 确实开始支持它，但并非所有浏览器都支持它。

使用下面的例子，我们将考虑动画逻辑 SMIL VS CSS Animation 的组织差异

所有 SMIL 动画对象都通过条件逻辑链相互连接。
比如小人的动作动画会在绘制路线动画结束后开始 begin="anPathWalk.end"

CSS中没有这种可能性，每次都要计算动画开始时间或其延迟的绝对值。

这给设计带来了很大的困难，甚至在改变对象交互的逻辑时会遇到更大的困难

在smil中，当改变逻辑时，改变动画开始的逻辑链就足够了，SMIL预处理器会计算必要的动画开始次数

<style>
.container {
width:100%;
height:100%;
}
.play-audio {

position:absolute;
top:0%;
left:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" version="1"   viewBox="0 0 800 540"  >
  <defs>
   <path id="walk"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"  />
  <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
      </g>
  </defs>
  
  <image xlink:href="https://i.stack.imgur.com/XPdWW.png" width="100%" height="100%" />
  <path id="train" stroke-dasharray="312" stroke-dashoffset="312" stroke-width="2" d="M443 534 426 477 415 435 397 391 375 347 350 304 334 277 317 251" style="fill:none;stroke:violet;"/>
  
    <text
      font-size="28"
      font-family="Times New Roman"
      fill="#517DA6" >
<textPath id="result"
xlink:href="#train">
<tspan dx="0" > &#128645; </tspan>
<tspan dx="-12">  &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15">   &#128643; </tspan>
<tspan dx="-12">   &#45; </tspan>
<tspan dx="-15"> &#128643;</tspan>
<tspan dx="-12">   &#45;</tspan>
<tspan dx="-15" >   &#128642; </tspan>
 <animate id="anTrain"
   begin="0s;an5.end"
   dur="12s"
   repeatCount="1"
   attributeName="startOffset"
   values="-60%;45%;45%;-60%"
   fill="freeze"/> 
</textPath>
</text>  
  
  <path id="walk"
   stroke-dasharray="409"
   stroke-dashoffset="409"
   stroke-width="3"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"
   style="fill:none;stroke:#B34EE9">
  <animate id="anPathWalk"
   attributeName="stroke-dashoffset"
   begin="anTrain.end-7.5s"
   dur="2s"
   values="409;0"
   fill="freeze" />
  </path>

 <use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an2"
       begin="anPathWalk.end"
       dur="16s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
     </animateMotion>    

          </use>    

      <use xlink:href="#Man" transform="translate(0,0) scale(1.2)" style="stroke:crimson;" > 
     <animateMotion id="an3"
       begin="anPathWalk.end+0.5s"
       dur="17s" repeatCount="1"  >
             <mpath xlink:href="#walk"/>
      </animateMotion>   
     </use> 
       <use xlink:href="#Man"
       transform="translate(0,0)
       scale(1)"
       style="stroke:black;"> 
     <animateMotion id="an4"
       begin="anPathWalk.end+1s"
       dur="13s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
      </animateMotion>   
       </use>      
       
       <use xlink:href="#Man"
       transform="translate(0,0)
       scale(0.8)"
       style="stroke:red;
       fill:black;"> 
     <animateMotion id="an5"
       begin="anPathWalk.end+1.5s"
       dur="11s"
       repeatCount="1"  >
          <mpath xlink:href="#walk"/>
     </animateMotion>    
       </use>    
        <use xlink:href="#Man"
        transform="translate(0,0)
        scale(0.8)"
        style="stroke:black;"> 
     <animateMotion id="an5"
      begin="anPathWalk.end+1.8s"
      dur="9.5s" repeatCount="1"  >
         <mpath xlink:href="#walk"/>
     </animateMotion>    
       </use>   
  
</svg>

</div>
<div class="play-audio">    
        <audio class="my_audio" controls preload="true" autoplay="autoplay">
            <source src="https://w1.musify.club/track/dl/4064186/eruption-one-way-ticket-original.mp3" type="audio/mpeg">
        </audio>
<div>

Run Code Online (Sandbox Code Playgroud)

textPathCSS 中没有 svg模拟（我可能是错的，正确的）
看看在 SMIL 中制作逼真的动画是多么容易

<!-- https://stackoverflow.com/a/47860596/7394871 -->
<svg width="600" height="400" viewBox="100 100 400 300">

 <path id="pathChain" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" stroke="grey" fill="none"/>

<text font-size="36"  font-family="Times New Roman" fill="grey" >
<textPath id="result"    xlink:href="#pathChain">
<tspan dx="0" > &#7441; </tspan> <tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan><tspan dx="-15">   &#45; </tspan><tspan dx="-15"> &#7441;</tspan><tspan dx="-15">   &#45;</tspan><tspan dx="-15">   &#7441; </tspan>
<animate  dur="10s" repeatCount="2" attributeName="startOffset" values="1%;55%;1%"/> 
</textPath>
</text>             
</svg>

Run Code Online (Sandbox Code Playgroud)

3. SVG 过滤器示例

CSS 中只有一个属性用于文本轮廓-webkit-text-stroke:
SVG 拥有最丰富的过滤器集，可以使用 SMIL 为其属性设置动画

#3.1 使用feMorphology和 feColorMatrix过滤器勾勒字母

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="4" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.5
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="0" font-family="sans-serif" fill="none" stroke="white" stroke-width="4" > DES 
        
    </text>
</svg>

Run Code Online (Sandbox Code Playgroud)

#3.2 描边动画

只添加一行代码

<animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="200" viewBox="0 0 330 200" >
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.1
                             0 0 0 0 0.9
                             0 0 1 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
    <rect width="100%" height="100%" fill="#111111" />
    <text x="10" y="150" filter="url(#outText)" font-size="150px" stroke-dasharray="20" font-family="sans-serif" fill="none" stroke="silver" stroke-width="4"  > DES           
       <animate attributeName="stroke-dashoffset" dur="5s" values="300;0" repeatCount="indefinite" />
    </text>
</svg>

Run Code Online (Sandbox Code Playgroud)

#3.3 水湍流效果

对于湍流的影响feTurbulence， feDisplacementMap使用过滤器

将鼠标悬停在图片上以开始动画

<style>
.container {
width:60%;
height:60%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"   viewBox="0 0 500 300">
  <defs>
    <filter id="myFilter" >
      <feTurbulence type="turbulence" baseFrequency="0.0001" numOctaves="1" result="turbulence" >
     <animate attributeName="baseFrequency" dur="18s" values="0.0001;0.02;0.0001;0.02;0.0001" begin="img1.mouseover" end="img1.mouseout" />
      </feTurbulence>
     <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="25" in="SourceGraphic" in2="turbulence" />
    </filter>
  </defs>
<image id="img1" xlink:href="https://i.stack.imgur.com/hHGO8.jpg" width="100%" height="100%" filter="url(#myFilter)" /> 
  </svg>
</div>

Run Code Online (Sandbox Code Playgroud)

4. 字母作为向量

SVG 中的任何文本都是矢量对象。因此，整个单词或其中包含的每个字母都有坐标，x, y 因此，您可以使用 SMIL 更改这些坐标以创建各种动画效果。
以下是飞行信件的一个可能示例

<style>
 #text1 {

fill:#D0FF00;
}
 
</style>
<svg id="svg1" width="70%" height="70%" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
 
    <title>Animation of text x and y attributes</title> 
    

<defs>
<linearGradient id="grad"
    x1="0" y1="0" x2="0" y2="100%"
    gradientUnits="userSpaceOnUse">
        <stop offset="2%" stop-color="#151515" />
          <stop offset="70%" stop-color="yellowgreen" />
    </linearGradient>
</defs> 
 <rect width="100%" height="100%" fill="url(#grad)" />
<text  x="200 " y="500" 
font-size="90" fill="#d3d3d3" stroke-width="1" stroke="#d3d3d3">Stackoverflow</text> 
<text id="text1" x="200" y="500"
font-size="90">Stackoverflow</text> 

<animate xlink:href="#text1" 
      attributeName="x" 
      attributeType="XML"
    values="200 233 266 299 332 365 400 431 464 497 530 563 596;
    100 600 200 365 700 465 465 563 530 398 431 850 900; 
    200 500 900 950 150 531 300 620 150 266 365 650 900;
    332 233 820 300 800 633 200 670 300 850 800 530 266;
    464 900 900 900 820 670 430 900 530 600 233 365 100;
    332 100 100 100 500 100 800 563 900 700 900 100 100;
    200 233 266 299 332 365 400 431 464 497 530 563 596"
    dur="4s"
    begin="svg1.click"
    repeatCount="2" />
<animate xlink:href="#text1"
      attributeName="y" 
      attributeType="XML"
    values="500 500 500 500 500 500 500 500 500 500 500 500 500;
    100 200 850 100 250 175 750 100 750 720 850 500 50; 
    100 600 600 250 200 450 50 200 520 550 300 300 750;
    500 100 650 650 600 150 550 50 150 550 200 550 400; 
    800 300 100 750 150 650 75 350 550 700 755 120 800;
    800 600 300 150 750 350 700 650 200 250 500 650 100;
    500 500 500 500 500 500 500 500 500 500 500 500 500"
        dur="3s"
      begin="svg1.click"
        repeatCount="2" />
</svg>

Run Code Online (Sandbox Code Playgroud)

更新

世界地图上的 StackOverflow

<style>
.container {
width:100vw;
height:100vh;
}
</style>
<div class="container">
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="-10 150 1800 1253" >

<defs>
 <path id="Strack" d="m322.1 281.9c0 0 75.6 16 97.2 44.3 38 49.7-13.2 140.2 30.3 185.2 32.5 33.6 94.4 9.6 137.7 27.2 26.4 10.7 44.3 38.6 71.6 46.7 7 2.1 21.8 0 21.8 0" fill="none" stroke="black" /> 
 
 <path id="Ttrack" d="m 144.7062,657.68616 c 0,0 37.753,-102.00963 83.24497,-115.92056 40.72325,-12.4527 79.61954,30.26928 119.81051,44.34545 31.19139,10.92423 61.09073,30.67633 94.13684,31.11961 25.18481,0.33783 47.2325,-23.61256 72.3531,-21.78373 26.84437,1.95434 48.54017,23.28963 73.1311,34.23157 11.57342,5.1497 19.26927,7.93532 35.00956,14.78182 32.47733,14.12656 11.1456,44.34609 68.43253,-59.12726" fill="none" />  
 
 <path id="Atrack" d="m1145.2 859.2c0 0 25.7-28.7 27.2-46.7 2.4-27.5-8.5-59-28.8-77.8-31.6-29.4-89.6-10.3-124.5-35.8-36.7-26.9-35.4-92.1-75.5-113.6-74.3-39.8-252.9 0-252.9 0" fill="none" /> 
 
 <path id="Ctrack" d="m220 368.1c0 0 73.9 53.2 89.1 93.5 16.5 43.6-26.4 98.1-5.5 139.7 22.7 45.3 76.6 72.2 125.4 85.8 51.6 14.4 107.1-12.2 160.6-8.8 82.6 5.3 206.4 118.7 244.3 45.1 30.3-59-143.2-138.1-143.2-138.1" fill="none" /> 
 
 <path id="Ktrack" d="m1555.7 922.6c0 0 25.2-71.8 14.3-105.6-10.8-33.6-51.3-48.9-72.6-77-39.7-52.5-75.9-108.7-101.2-169.4-12.5-30.1 11.3-48.4-24.2-94.6-64.2-83.6-204.6-76.2-246.5-5.5-54.4 91.9 207.9 181.5 160.6 277.3-45.5 92.2-206 64.1-305.9 39.6C866 759.3 690.8 585.3 690.8 585.3" fill="none" />    
 
   <path id="all_Letter" transfotm="translate(0 -55)" d="M690.8 585.3H505c0 0-229.3 55.3-267.8-25.7-23.1-48.7 71.5-83.7 89.7-134.4 16-44.7-28.4-120.8 14.2-141.8 71.8-35.4 126 108.5 204 126.5 82.6 19.1 169.7-41.5 253.1-25.9 75.4 14.1 128.4 101.5 205 104.4 94.6 3.5 169.3-129.2 261.9-109.6 92.6 19.6 181 112.9 194.9 206.5 6.8 45.6-19.5 105-61.6 123.8-60.4 27-125.4-55.6-191.5-52.5-84.9 3.9-157.1 113.9-238.7 90-64.3-18.9-60.1-131.1-119.9-161.2-46.9-23.6-157.5 0-157.5 0z" style="fill:none;stroke-width:3;stroke:#0000f1"/>
    
         <!-- Shadow for letters -->
    <filter id="dropShadow">
      <feDropShadow dx="4" dy="4" stdDeviation="8" result="shadow"/>
       <feComposite in2="mask" in="shadow" operator="in" result="comp" />
      <feMerge result="merge">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="comp" />
      </feMerge> 
    </filter>
    <linearGradient id="gradEarth">
            <stop offset="40%" stop-color="dodgerblue"></stop>
            <stop offset="100%" stop-color="yellowgreen" ></stop>
        </linearGradient>   
      <linearGradient id="Lg" x2="0" y2="0%">
            <stop offset="10%" stop-color="yellow"></stop>
            <stop offset="25%" stop-color="#F437FE"></stop>
            <stop offset="50%" stop-color="dodgerblue"></stop>
            <stop offset="75%" stop-color="#1EFE6B"></stop>
            <stop offset="100%" stop-color="red"></stop>
            <animate attributeName="y2" dur="8s" values="0%;100%;100%;0%;0%" repeatCount="indefinite" />
              
        </linearGradient>   
</defs>  
   <image xlink:href="https://i.stack.imgur.com/lDCcN.jpg" width="1800px" height="1253px" opacity="0.8" />
   
 <g id="Gr_All" >
   <!-- Letter "S" -->
<g id="Sgroup"  transform="scale(1.5)" filter="url(#dropShadow)">
       <!-- Left leg -->
 <path id="leftF" fill="crimson"  d="m31.9 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2M58.7 64.5" class="leg">
    <animateTransform attributeName="transform" type="rotate" begin="btn1.click" dur="0.5s"
    values="0, 29.41,64.39;30, 29.41,64.39;0, 29.41,64.39" fill="freeze" repeatCount="indefinite" />
  </path>
       <!-- Right leg  -->
 <path id="rightF" fill="crimson" d="m58.7 64.5c0 0-5.6 18.1 0 23.7 3.1 3.1 12.4 4.3 12.9 0 0.4-3.4-9.9-2.6-9.9-2.6l-3-21.2" class="leg">
     <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.25s" dur="0.5s"
    values="0, 56.21,64.39;30, 56.21,64.39;0, 29.41,64.39" fill="freeze" repeatCount="indefinite" />
</path> 
          <!-- Outline letter "S" -->  
 <path  class="Sbody" fill="url(#Lg)"  d="m59.3 12.8 6.4 20.3q-5.3-4.5-9.5-6.9-4.2-2.4-6.8-2.4-2 0-3.1 1.1-1.1 1.1-1.1 3 0 2.4 2.4 4.3 2.4 1.9 7.5 3.4 11.3 3.4 15.3 6.7 4 3.3 4 8.4 0 8.3-8.1 13.6-8.1 5.3-20.9 5.3-6.5 0-12.9-2.3-6.4-2.4-11.8-6.7V69.6L13.9 49.3q4.7 3.8 9.2 5.9 4.6 2 8.3 2 4 0 6.2-1.7 2.2-1.7 2.2-4.7 0-2.8-1.8-4.5-1.8-1.7-8-3.6-9-2.9-13.5-6.8-4.4-4-4.4-9.3 0-6.7 5.9-11 5.9-4.3 15.4-4.3 6.2 0 12.2 2.2 5.9 2.2 12.2 6.9z"> 
       <!-- Wiggle the letter "S" -->
   <animateTransform attributeName="transform" type="rotate" begin="btn1.click+0.5s" dur="1.5s"
    values="
    0, 43.25,51.14;
    30, 43.25,51.14;
    0, 43.25,51.14;
    -30, 43.25,51.14;
    0, 43.25,51.14"
    fill="freeze"
    repeatCount="indefinite"
    additive="sum"
    restart="whenNotActive" />
</path> 
</g> 
   <animateMotion xlink:href="#Sgroup" begin="btn1.click" dur="18s" restart="whenNotActive">
    <mpath 
        
          
          
              精彩的例子，谢谢！ (2认同)
           
          
          
              @Todd Main 感谢您的积极反馈 (2认同)
           
          
          
              @ToddMain 可能我的发言不够谦虚，但无法抗拒:) - 所有的例子都是我最初的发展 (2认同)
           
          
          
              这些都很棒，你应该感到自豪。我正在考虑用 SVG 自己做 SMIL，这些展示了它如何具有巨大的可能性。 (2认同)


  
  
    
      
        
        Rob*_*era
        
         5
      
      
SMIL 的弃用被暂停。引用一下，以防网站发生变化：
\n\n尽管 Chrome 45 弃用了 SMIL，转而支持 CSS 动画和 Web 动画，但 Chrome 开发人员已暂停了这一弃用。
\n
\n引用自链接：
\n\n因此，我们\xe2\x80\x99决定暂缓弃用的意图，并采取较小的步骤转向其他选项。
\n
\nSMIL 不仅可以做一些很棒的事情，而且还拥有额外的能力，例如。CSS 动画，它提供了另一种思考 DOM 动画的方式。我认为即使很少使用它也是有用的。一些替代方案，例如。CSS Houdini 已经开发多年，但没有跨浏览器可用性。所以值不值就看每个人的了。取决于可用时间。也可以为了好玩而做。对于像 Lottie/Bodymovin 这样的 JS（非 SMIL）库也是如此
\n
        
          
          
              @Robert Monfera 感谢您对 SMIL 的支持 (2认同)

Answer 2

Rob*_*era 5

SMIL 的弃用被暂停。引用一下，以防网站发生变化：

\n

\n
尽管 Chrome 45 弃用了 SMIL，转而支持 CSS 动画和 Web 动画，但 Chrome 开发人员已暂停了这一弃用。
\n

\n

引用自链接：

\n

\n
因此，我们\xe2\x80\x99决定暂缓弃用的意图，并采取较小的步骤转向其他选项。
\n

\n

SMIL 不仅可以做一些很棒的事情，而且还拥有额外的能力，例如。CSS 动画，它提供了另一种思考 DOM 动画的方式。我认为即使很少使用它也是有用的。一些替代方案，例如。CSS Houdini 已经开发多年，但没有跨浏览器可用性。所以值不值就看每个人的了。取决于可用时间。也可以为了好玩而做。对于像 Lottie/Bodymovin 这样的 JS（非 SMIL）库也是如此

\n

@Robert Monfera 感谢您对 SMIL 的支持 (2认同)

归档时间：	5 年前
查看次数：	1053 次
最近记录：	4 年，5 月前