强大的js动画animejs使用

anime.js官网_免费、灵活的轻型JavaScript动画库 | animejs

安装及引用:

// 终端中安装:
npm install animejs 

//文件中引入
import anime from "animejs"

使用:

//html:
    <div class="w375">HelloWorld</div>
    <div class="normal">正常文字</div>
    <em class="em">斜体文字</em>
    <article>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="yellow"></div>
    </article>
    <button class="play">play</button>
    <button class="pause">pause</button>
    <button class="restart">restart</button>
    <button class="reverse">reverse</button>
    <button class="skip">skip</button>

//css:
.w375{
  width: 375px;
  padding: 50px 0;
  font-size: 50px;
}
.blue{
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  border: 1px solid #f00;
}
.green{
  width: 100px;
  height: 100px;
  background: green;
  border: 1px solid #f00;
}
.yellow{
  width: 100px;
  height: 100px;
  background: yellow;
  border: 1px solid #f00;
}

//js:
var myAnimation = anime({
      targets: ['.blue', '.green' ,'.yellow'],//需要执行动画的目标元素
      translateX: '200px',//'translateX':'px';'translateY':'px';'translateZ':'px';'rotate':'deg';'rotateX':'deg';'rotateY':'deg';'rotateZ':'deg';'scale':—;'scaleX':—;'scaleY':—;'scaleZ':—;'skew':'deg';'skewX':'deg';'skewY':'deg';'perspective':'px';
      scale: { //特殊属性,高级用法
        value: 1.5,
        duration: 1600,
        delay: 800,
        easing: 'easeInOutQuart'
      },
      width: {
        value: '-=20px', // 原始值 - 20 ,可以+=或*=或/=
        duration: 1800,
        easing: 'easeInOutSine'
      },
      borderWidth:anime.random(0, 8),//随机数
      height:function(el, i, l) { return i*30 + 10; },//使用函数返回数值
      rotate: 360,//可以省略单位,会自动补上单位
      borderRadius: ['10%', '50%'],//设定动画初始值
      // backgroundColor:'#f00',
      innerHTML: [0, 10000],
      keyframes: [ //动画关键帧
        {translateY: -40},
        {translateX: 250},
        {translateY: 40},
        {translateX: 0},
        {translateY: 0}
      ],
      translateY: [ //属性关键帧
        { value: -40, duration: 500 },
        { value: 40, duration: 500, delay: 1000 },
        { value: 0, duration: 500, delay: 1000 }
      ],

      delay:anime.stagger(500, {start: 100}),//默认0,开始延迟毫秒数 number/function (el, index, total)/anime.stagger(500, {start: 100,direction: 'reverse'}):延迟从100ms开始,每个延迟500ms
      // anime.stagger(500, {start: 100,direction: 'reverse',easing: 'easeOutQuad'}) //direction:'reverse'(从目标元素最后一个元素到第一个元素执行动画)/'normal'(默认,按顺序执行)
      endDelay:function(el, i, l) {return i * 500;},//默认0,结束延迟毫秒数 number/function (el, index, total)
      duration: 3000,//默认1000,动画持续时长 number/function (el, index, total)
      autoplay:true,//默认true,是否自动执行动画
      loop: false,//默认false,是否循环执行动画或执行次数  number/boolean
      direction:"normal",//默认'normal',执行动画的方向 'normal'(正方向), 'reverse'(反方向), 'alternate'(往返)
      easing:'easeOutElastic(1, .5)',//默认easeOutElastic(1, .5),动画的速度曲线,可以为下面的值:
      // 匀速:linear,
      // 不匀速:easeIn/easeOut/easeInOut/easeOutIn + Quad(由快至慢)/Cubic(由快至慢，效果更强)/Quart(由快至慢，效果更强)/Quint(由快至慢，效果更强)/Sine(由快至慢，比Quad弱)/Expo(突然减速，效果较强)/Circ(突然减速，效果较弱)/Back(冲出终点后返回),例如 easeInOutSine
      // 三次贝塞尔:cubicBezier(.5, .05, .1, .3)
      // 弹簧:spring(1, 80, 10, 0)
      // 弹跳:easeInElastic,easeOutElastic,easeInOutElastic,
      // 台阶式:steps(10) //[1,+∞] 平均分成n份执行,有卡顿感
      // 自定义:function(el, i, total){return  function(time) {return Math.pow(Math.sin(time * (i + 1)), total);}}
      elasticity:400,//默认400,弹性大小,数值越大,弹性越大
      round:100,//默认false,给数字添加动画时,显示小数点后几位,10表示一位,1000表三位 number/boolean
      begin:function(animation){},//动画开始的回调,执行一次
      update:function(animation){},//动画进行中的回调,执行多次
      complete:function(animation){},//动画完成的回调,执行一次
      // styleAttrs:'xxx',//css属性名(小驼峰):对应的属性值,一般是opacity和transforms,其他的可能会导致动画不稳定
    })

    document.querySelector('.play').onclick = myAnimation.play;//开始动画
    document.querySelector('.pause').onclick = myAnimation.pause;//暂停动画
    document.querySelector('.restart').onclick = myAnimation.restart;//重新开始动画
    document.querySelector('.reverse').onclick = myAnimation.reverse;//反转动画的方向
    document.querySelector('.skip').onclick = myAnimation.seek(myAnimation.duration * 1.5);//动画跳转到特定时间（以毫秒为单位）定格
    anime.remove('.remove-demo .line:nth-child(2) .el');//删除指定目标元素的动画
    myAnimation.finished.then(()=>{console.log('动画执行完成的回调');});//动画执行完成的回调

    //创建时间轴动画,add一个就执行一个,根据偏移量确定开始执行时间
    anime.timeline({
      duration: 1500,
      delay: 1000,
      easing: 'easeInOutQuad',
      direction: 'alternate',
      loop: true
    })//父时间轴实例中设置的参数将由所有子项继承,可继承下面5个:targets,duration,delay,endDelay,round
    .add({ targets: '.w375',  background: '#FFF',translateX: 50 }, 0) //add第一个参数是对象(同上),第二个参数是偏移量(String/Number)
    .add({ targets: '.normal',  background: '#00F',translateX: 100 }, 1500)//绝对偏移量
    .add({ targets: '.em',  background: '#0F0',translateX: 100 }, '-=600')//相对偏移量