一款轻量级且功能强大的 JavaScript 动画库-Anime.js

简介

Anime.js 是一个轻量级的 JavaScript 动画库，它的 api 相当强大且简单易用

目前 github 的 star 量 45K，可想而知受多少人的喜爱

官方地址：https://animejs.com/

github 地址：https://github.com/juliangarnier/anime/

安装

npm install animejs -S

引入使用

import anime from 'animejs/lib/anime.es.js'
// div这个元素// 右移300// 背景颜色变为白色// 动画时长600毫秒
anime({targets: 'div',translateX: 300,backgroundColor: '#FFF',duration: 600

常用示例

1、右移 250px

// targets是需要动画的对象
// 可以是一个css类，或者dom对象
// targets支持单个对象，也支持数组
anime({targets: '.el',
// targets: ['.el1','el2',node1]
translateX: 250
})

效果

2、所有的 CSS 属性都可以做动画

anime({
    targets: '.el',
    // 距离左侧240px
    left: '240px',
    // 背景颜色变成白色       
    backgroundColor: '#FFF',
    // 边框变成圆角
    borderRadius: ['0%', '50%'],
    // 指定动画的效果
    easing: 'easeInOutQuad'
})

效果

3、支持所有的 transform 动画

anime({
    targets:'.el',
    // 右移250px
    translateX: 250,
    // 缩放2倍
    scale: 2,
    // 旋转一圈
    rotate: '1turn'
})

效果

4、支持 dom 的属性修改动画

anime({
    targets: 'input',
    // 输入框的值由0到1000变化
    value: [0, 1000],
    round: 1,
    easing: 'easeInOutExpo'
})

效果

5、其它参数

anime({
    targets:'.duration-demo .el',
    translateX: 250,
    // 持续时间
    duration: 3000,
    // 延时一秒执行
    delay:1000,
    // 动画方式选择
    easing:'easeInOutExpo',
    // 反方向执行
    direction:'reverse',
    // 是否循环，还可以指定具体次数，比如
    3loop:true,
    // 最开始的时候，自动执行
    autoplay:true
})
// 还可以对单个动画效果细分
anime({
    targets: '.el',
    translateX: {value: 250,duration: 800},
    rotate: {value: 360,duration: 1800,easing: 'easeInOutSine'},
    scale: {value: 2,duration: 1600,delay: 800,easing: 'easeInOutQuart'},
    delay: 250
})

效果

6、动画片断执行

anime({
    targets: '.animation-keyframes-demo .el',
    keyframes: [{translateY: -40},{translateX: 250},{translateY: 40},{translateX: 0},{translateY: 0}],
    duration: 4000,
    easing: 'easeOutElastic(1, .8)',
    loop: true
})

效果

Api 是不是非常的简单理解，但是功能又强大