除了SMIL动画，通过SVG其他属性，也能制作很精美的动画效果:

1. Animated line drawing in SVG - jakearchibald

   • 通过 <path stroke-dasharray="" stroke-dashoffset=""> 的2个属性制作路径动画
   • 可通过 path.getTotalLength() 方法获取路径的总长度

2. How SVG Line Animation Works - @csstricks

   • 详细介绍 stroke-dasharray + stroke-dashoffset + CSS animations 制作动画的原理

3. 🔥SVG基础及其动画应用浅析 - 网易云@掘金

   • 先介绍svg基础
   • 列举出SVG动画的几种方式：
     • SMIL动画 + 例子
     • SMIL + 路径动画
     • 描边动画 -> stroke-dasharray + stroke-dashoffset 属性的使用
     • 轨迹动画 -> SMIL中 <animationMotion> 天然支持轨迹动画

4. 🚀Animate Anything Along an SVG Path - @tympanus 主要是SVG结合GSAP制作动画

   • gsap + path的 getPointAtLength() 制作酷炫动画效果

     • Random dots along path - @codepen

   • gsap + getTotalLength() 制作沿路径运动动画效果

     • Animate single element along path - @codepen

   • SVG + THREEJS 制作3D动画效果

2023年01月11日18:03:01