乐趣区

关于svg动画:公众号SVG序列帧动画

jiezi

最近在水果公众号上看到一段菊花绽开的动画，丝般光滑的感触，吹弹可破的花瓣，让我忍不住看了下到底，将所得整顿了下，作为小技巧分享给大家。

具体看下图，视频转换成 GIF 品质降落，有趣味能够去水果公号看。

水果绽开动画

瞄了下源代码，竟然是用 SVG 动画拼成的序列帧。序列帧是什么？水果前端为什么好好的 GIF 图不必，要用序列帧？起因听我缓缓道来。

什么是序列帧？

序列帧就是一系列静止图像，将这些图像依照肯定的频率播放，就造成了间断的动画，个别认为到达到每秒 24 帧的速率，人们才会看到平滑动画，大家平时看到的视频和动图实质都是由序列帧组成的。

电影画面中序列帧

翻页动画

应用序列帧有什么益处？

  1. 能够保障图片品质 因为公众号后盾会压缩上传的 GIF 图片，而且 GIF 图像自身对透明度反对不佳，对图像品质要求较高的场景就不适合了。而应用序列帧，咱们能够应用无损的 PNG 图片，保障动画高清显示。
  2. 动画更平滑 绝对于 GIF 动画，程序控制的动画用户体验更加平滑晦涩。

怎么应用序列帧？

在平时的 web 开发中，咱们能够很容易地用 js 或者 css 实现相似的帧动画，因为公众号图文环境的限度，咱们只能用 SVG 来实现这个成果，水果公号里用 animate 标签奇妙的解决这个问题。

通过把每一帧的图片独自放在一层里，并使每一层重叠在一起。应用透明度动画来管制每个图片帧的呈现工夫，产生间断播放的动画成果。

绽开动画的序列帧叠加演示 

<div style="height:0;">
  <svg opacity="0" viewBox="0 0 828 828" style="width:100%;background-image:url('img/02.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
    <animate attributename="opacity" begin="1.3125s" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.010; 0.012; 1" fill="freeze"></animate>
  </svg>
</div>

<div style="height:0;">
  <svg opacity="0" viewBox="0 0 828 828" style="width:100%;background-image:url('img/01.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
    <animate attributename="opacity" begin="1.25s" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.010; 0.012; 1" fill="freeze"></animate>
  </svg>
</div>

原理懂了，可是动画整整有 70 多帧，复制黏贴显然不适宜我这样（lan）机智的前端，于是拿出了看家本领 javascript 大法。

const generateFrames = () => {const container = document.querySelector('#container')
  const totalFrames = 72
  let html = ''
  for(let i = totalFrames; i > 0; i--) {
    const inter = 0.0625
    const height = i == 1 ? 'auto' : '0px'
    const opacity = i == 1 ? 1 : 0;
    const begin = (1.5 + inter * i) + 's'
    
    const dom = `
      <div token interpolation">${height};">
        <svg opacity="${opacity}" viewBox="0 0 828 828" token interpolation">${i}.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
          <animate attributename="opacity" begin="${begin}" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.010; 0.012; 1" fill="freeze"></animate>
        </svg>
      </div>
    `
    html += dom
  }
  container.innerHTML = html
}
generateFrames()

将生成的代码，在开发者工具中复制黏贴。

chrome 开发者工具中复制黏贴

搞定，出工！

源码：
https://dev.xingway.com/tutor…

原文地址：
https://dev.xingway.com/svg-f…

退出移动版