code狂魔

V1

2022/09/28阅读:20主题:萌绿

前端必会的anime动画库

大家好,我是前端实验室的大师兄!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等~

新年公司派给我的第一个项目就是一个小游戏,游戏中涉及到一部分动画,今天大师兄就给大家推荐一款小巧而又强大的动画库:anime.js

介绍

anime.js是一款功能强大的javascript动画库插件,anime.js 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。

压缩完只有9kb左右,麻雀虽小,却五脏俱全。

github上也有41.5k 的star,最近的更新也在十天前

安装方式

方式一:使用npm 进行安装

npm install animejs 

方式二:下载anime.js 的文件包,在页面中引入anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

使用

引入anime.js后,就可以开始来编写动画效果。

首先来编写一个弹球的动画效果,HTML:

<div class="wrapper">
 <div class="ball"></div>
</div>

CSS代码:

body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: black;
}
.wrapper {
 height: 80vh;
 width: 100%;
 margin: 0;
 padding: 0;
 position: relative;
 overflow: hidden;
 border: 1px solid blue;
 background-color: lightblue;
 color: #444;
}

.ball {
 height: 200px;
 width: 200px;
 position: absolute;
 top: 20px;
 bottom: 0;
 left: calc(50% - 100px);
 background-color: darkblue;
 border-radius: 50%;
}

使用anime.js提供的方法来编写好基本的结构:

var bouncingBall = anime({

  //code here

});

然后在里面使用anime.js提供的对应的方法来实现动画效果,比如要操纵的dom元素,动画的时间以及缓动曲线等等。

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

targets属性是用来指定要运动的元素,可以使用类似CSS选择器来选择元素,或者是下面几种方法来选择元素:

DOM选择方法document.querySelector('.ball')或者是document.querySelectorAll('.ball')方法;

js数组的方式`['.ball']``

js对象的方式{elementName: 'ball'}

如果你要操作的元素有多个值或者是要操作多个元素,可以这样做:

var bouncingBall = anime({
  targets: ['.ball''.kick'],
  //rest of the code
});

translateY也就是要操作元素做出变化的属性,和CSS中操作元素的方法非常相似。作为一个经常和动画打交道的前端开发人员,对于使用transform属性来提高动画的性能想必是非常清楚的,同样在使用animejs来编写动画效果的时候,特别涉及操作元素位置的时候也建议使用transform等属性来操作来提高动画性能。

duration即动画的运行时间。如果要延迟执行动画,可以使用delay这个参数来指定动画延迟时间。

loop属性是用来定义动画是否循环运行。默认值是false,即动画只运行一次。当然也可以指定具体的数字来定义动画运行的次数或者是定义为true一只无限循环运行下次。

direction属性定义是否应该轮流反向播放动画。有三个值defaultalternatereverse。alternate表示动画应该轮流反向播放。reverse表示反方向运行。

easing它是用来定义动画运行速度曲线的,与CSS3中的动画曲线一样。

在上面的代码中,实现的效果只是球的上下弹起的效果。在真实世界中,当一个球掉在地上的时候,球会受到自身的压力从而产生一个变形的效果,可以使用transform中的scaleX来达到这个动画效果。

下面是具体代码:

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,  //代表缩放的值
    duration: 150,  // 运行时间
    delay: 268   //延迟多久执行
  }
});

动画控制

anime.js还提供了诸如play、pause和restart方法来控制动画的执行、暂停和重新运行动画。也可以使用seek()方法来跳帧运行动画。

下面通过按钮分别来控制动画开始效果:

//新增一个button
<div class="wrapper">
 <button class="btn">开始</button>
 <div class="ball"></div>
</div>

//js代码获取按钮,并添加点击事件
var btn = document.querySelector('.btn')
btn.addEventListener('click'function(e) {
  e.preventDefault();
  bouncingBall.play();
});

效果如下:

上面通过两个简单的实例介绍了anime.js的一个使用方法,更多的使用方法就要靠你的想象力了。

最后

关注【前端实验室】公众号回复: bbbb223

即可免费获取拉勾教育价值17999元的全套前端教程

分类:

前端

标签:

CSS

作者介绍

code狂魔
V1