使用Anime.js制作火箭升空的动画效果

由头：最近在公司第一次使用Golang做了一个beta版的小型Saas项目，在编写项目前端主页的时候看到很多类似项目首页都多少添加了动画效果，这种展示方式结合文案显得格外生动。于是我就准备在项目中添加动画元素。

  经过搜索引擎的内容索引，我发现现在这个阶段可以实现动画效果有几种方式：gif, css3, openGL，canvas，Javascript等。我首先排除了gif这种方式，原因很简单这种动画方式会随着网页的缩放失真，我们无法预期用户展开网站之后的尺寸所以就先pass掉了。其他几种方式都已经成为了新的web标准，而且都是通过矢量方式实现动画效果，不会损失渲染后的效果。 对于我来说接下来还有个难题，那就是如何在短时间内上手其中之一应用到项目，毕竟我没有在项目开发周期中预留这部分的时间，这也算是个让人难以抉择的问题。

  做项目就是这样，想要把新的东西引入到项目，会面对很多不确定性。然而为了拓展一下边界，总是得面对这种不确定性，才能在不确定性中受益。依照我web项目开发的经验，既然这几种动画效果的实现方式都已经成为web标准，那么肯定有很多人已经或者至少想过封装出更加易用的工具库或者是脚手架。继续搜索🔍"web animation package", 然后找到了一个匹配度很高的JS库：anime,使用anime可以为dom结构，css属性，svg图片，JS对象创建动画效果，看了下文档，简单的动画效果很容易实现。现在有动画制作的工具库了，接下来就准备着手准备动画素材。

  本人没有任何绘制矢量图的能力和经验，所以这些素材也要在互联网上找。我对于素材的预期有一个标准那就是尽可能的让所有的素材风格统一，没有人喜欢看一堆风格不统一的元素乱凑在一起，显得非常不专业。于是我又物色到了一个开源的svg素材网站：undraw和阿里巴巴icon。undraw有丰富的基于web项目的svg素材：

阿里巴巴icon有丰富icon的可供选择：

  我可以从这两个网站下载svg素材，然后使用Figma为svg做一些简单编辑：

  以上都是准备阶段的阐述，好像略微有些啰嗦。我的目的主要是为了尽量详细的陈述我在做这件事的整个过程，包括思维和各种尝试突破我已有的知识体系可以探索的边界。接下来重点来啦，那么如何使用animejs结合图片素材制作web动画？在此我只讲一个简单的小案例非常简单。

提示：代码块如果有样式问题可以通过CScript公众号查看

首先根据你的web project类型选择安装anime的方式，如果只是个简单的html静态页面不依赖任何前端编译工具，那么你只要使用script标签引入html：

“<script src="anime.min.js"></script>”

如果你的项目使用了npm那么可以：

引入anime之后就可以简单的调用了，例如我想制作一个svg素材动画。先看下动画效果：

徐徐上升的火箭下面有四朵熊熊燃烧火焰，那么是如何实现的呢？

四个上下摆动的火焰是svg的四个Vector节点：

这种方式可以制作简单的动画效果，但是想要制作出比较丰富的动画效果还是需要花时间去了解web动画的标准库例如CSS3，这只是一种可以快速实现的方式当时，今天的分享就到这里。

相关链接：

     https://github.com/juliangarnier/anime/

     https://undraw.co/illustrations

      https://www.figma.com/files/recent

更多关于CScrit频道的信息:

• 爱发电主页: https://afdian.net/@CScript
  

• Telegram群组: https://t.me/CScriptGroup 

• Norton的微博: https://www.weibo.com/u/25934729

• 加入微信交流群请添加频道小助手微信