anime动画库

最新推荐文章于 2024-08-12 11:00:42 发布

paidaboluo

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量608

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/paidaboluo/article/details/126572180

版权

安装

npm install animejs --save

引入

我是在vue项目下

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

基础示例

需要动画的元素

<section>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</section>

引入anime实例，可以直接使用

let boxs = document.querySelectorAll(".box");
anime({
  targets: boxs,
  translateX: '250px',
})

targets 为选中的 dom，单个或者数组，也可是直接写 css选择器

两行代码的效果就是，boxs 选中的dom ，会向 x 轴移动 250px

类似的值（宽高、缩放、位移等等）都可以选择带不带单位，百分比，也支持数组，混用，比如我们需要，元素在开始的时候在 y轴 200px 的位置，动画结束后，回到原位可以这样写：

translateX: ['200px',0],

可以编辑数字，innerHTML，设置步长，小数点位数

      innerHTML: [0, 1000],
      step: [10],
      round: 1, // 为1的时候显示整数

也支持动画属性，按顺序播放，使用 duration 指定每一个动画属性的持续时间

  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },

上面代码的效果：先x轴位移，持续800毫秒，之后再进行旋转，1800毫秒

动画播放模式

direction:'xxxx'

属性	描述
`'normal'`	动画进度从 0% 变为 100%
`'reverse'`	动画进度从 100% 变为 0%
`'alternate'`	动画进度从 0% 变为 100%，然后返回到 0%

loop: 3,

属性	描述
`Number`	迭代次数
`true`	无限期循环

anime.stagger

如果你需要多个元素，各自按不同的处理进行动画，你就需要 anime.stagger

delay: anime.stagger(100)
delay: anime.stagger(100, {start: 500})
rotate: anime.stagger([-360, 360])

三个例子：

1. 延迟按照，第一个盒子 100*0，第二个盒子 100*1

2.附带开始延迟：第一个盒子 500+(100*0)，第二个盒子 500+(100*1)

3.数组平均分配给元素，比如两个元素，第一个就是 -360 第二个就是 360

anime.stagger 第二个参数对象也可选 from

delay: anime.stagger(400, { from: "center" })

center 比如有4个元素被选中，动画从中间的两个元素先开始

例：

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

let boxs = document.querySelectorAll(".box");
anime({
  delay: anime.stagger(400, { from: "center" })
});

盒子 2 3 先进行动画，随后是 1和4

还有 easing direction grid 等等，可有类似波纹特效

更多动画选项可以查看官方文档：

Documentation | anime.js (animejs.com)