基于svg使用anime.js构建动画

之前有调研过动画实现的方式,以及动画的种类(传送门:前端动画调研)。最近好好研究了一下svg的使用,在研究svg的同时又萌生了制作svg动画的想法,于是今天上场的主角就是使用JS驱动的动画库 anime.js 。文章前部分主要介绍使用anime.js完成对DOM元素的动画制作,后半部分会简单介绍一下anime.js与svg如何搭配使用。

1.Anime.js

Anime.js是简单,强大的轻量级JavaScript动画库,它可作用于css 属性,SVG,DOM 属性 以及JavaScript对象。根据官方的这段介绍,可以看出其对Canvas绘制是并不支持的,如果你需要对Canvas进行深度操作,推荐查看 PixiJSCreateJS 。通过anime.js我们可以使用js去编写原本需要在css中书写很长的keyframes,也可以通过使用timeline来同时处理多个元素的动画效果,这一切都不需要再编写css。看一段简单的代码:

// 引入animejs
import anime from 'animejs/lib/anime.es.js';

// 初始化anime方法,即可对指定元素激活动画效果
anime({
  targets: 'div',
  translateX: 250,
  rotate: 360,
  backgroundColor: '#FFF',
  duration: 800
});

上述代码的意味着,当调用anine()方法时,便将所有的div标签立即执行向右移动250px,同时旋转360deg,并将颜色同时修改为白色,整个动画持续800ms。需要注意的是,targets默认使用document.querySelectorAll(),所以这里所有的div标签都会注入刚才定义的动画

通过这段代码是不是觉得定义一个动画非常的简单,有种将css代码放入JS对象中的感觉。那么anime.js是如何实现关键帧keyframes,接着往下看。

2.keyframes关键帧

在css中,我们可以通过 transition 实现线性的动画,通过设置duration以及作用的元素,即可实现一段简单的如放大缩小动画。

https://jsfiddle.net/o02yda5j/

然而如果需要实现更加复杂的非线性多段动画,必然要使用 animations

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章