zoukankan      html  css  js  c++  java
  • 学习animejs

    1.安装方式

    (1)npm install animejs

    2.引入

    import anime from 'animejs'

    3.使用

    anime({

      targets: 'div',
      translateX: [
        { value: 100, duration: 1200 },
        { value: 0, duration: 800 }
      ],
      rotate: '1turn',
      backgroundColor: '#FFF',
      duration: 2000,
      loop: true
    });
    targets:DOM对象,
    loop:动画循环播放
    duration:动画时长(默认1000,单位毫秒,类型number),
    delay:延迟(默认0,单位毫秒)
    可写函数比如:
    delay:function(target,下标) {
      return 下标* 时间(毫秒)
    }
    达到的效果就是连续动画

    easing:动画缓冲(缓冲函数,默认‘easeQutElastic’,类型string或自定义贝塞尔曲线坐标【数组】)
    elasticity:弹性(默认500,类型number,range[0-1000])
    translateX: X轴的值
    translateY: y轴的值
    retate:旋转
    scale:大小变换
    rotate:2D旋转 rotate:'1turn'(旋转一周)
    direction :方向(默认normal,类型:normal,reverse反向,alternate会还原)
    autoplay:自动播放(默认true)

    timeline:通过创建时间轴按顺序播放动画
    var myTimeline = anime.timeline({
      direction: 'alternate',
      loop: 3,
      autoplay: false
    })
    使用.add()给timeline添加动画:
    .add({
        targets: '.square',
        translateX: 250
        })
    .add({
        targets: '.circle',
        translateX: 250
        })
    .offset() 1.定义时间轴动画的开始


    .add({
        targets: '.circle',
        translateX: 250,
        offset: '-=600' // 在前一个动画结束前600ms开始
      })
    2.使用数字在时间轴上定义绝对开始时间
    .add({
        targets: '.square',
        translateX: 250,
        offset: 1000 // Starts at 1000ms
      })
  • 相关阅读:
    第五周学习进度条
    课堂实验4.1(环数组)
    每日站立会议(3)
    每日站立会议(2)
    找水王
    购买一批书的最低价格
    每日站立会议(1)
    NABCD分析
    团队开发博客
    返回一个二维整数数组中的最大子数组之和(环)
  • 原文地址:https://www.cnblogs.com/neilniu/p/10059576.html
Copyright © 2011-2022 走看看