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
      })
  • 相关阅读:
    Python 中的一些小技巧
    Java/Python/Elixir 正则库使用上的注意事项
    Scrapy 学习笔记(一)数据提取
    记第一次面试
    Spring Web MVC 笔记
    Java 单元测试
    Spring 笔记(四)AOP
    C 语言 进阶
    编程的智慧
    Spring 笔记(三)Bean 装配
  • 原文地址:https://www.cnblogs.com/neilniu/p/10059576.html
Copyright © 2011-2022 走看看