虎虎生威，五分钟玩转animation、keyframes实现旋转动画

前端

2023-12-17 00:22:20

虎年来临，第一弹就从帧动画开始。2021年的开发中，帧动画已经很少用了，大多数时候我们都在用CSS3的动画来实现页面动效，但是为了向经典致敬，并且让大家理解一下这个概念，我们来用帧动画写一个比较简单的虎虎动画。

首先，准备动画素材

我们需要一个旋转的“虎”的序列图片。

你可以点击这个链接下载： 虎的序列图片

之后，将这些图片存放在本地电脑中。

其次，创建HTML文档

创建一个名为“tiger.html”的HTML文档，并在其中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
</head>
<body>
  <div id="tiger"></div>

  <script src="tiger.js"></script>
</body>
</html>

接着，编写JavaScript代码

创建一个名为“tiger.js”的JavaScript文件，并在其中添加以下代码：

// 虎的图片序列
const tigerImages = [
  "tiger-01.png",
  "tiger-02.png",
  "tiger-03.png",
  "tiger-04.png",
  "tiger-05.png",
  "tiger-06.png",
  "tiger-07.png",
  "tiger-08.png",
];

// 循环次数
const loopCount = 2;

// 创建一个新的动画
const animation = bodymovin.loadAnimation({
  container: document.getElementById("tiger"),
  renderer: "svg",
  loop: loopCount,
  autoplay: true,
  path: "tiger.json",
});