animejs 动画库

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@4.4.6/dist/css/swiper.min.css"
    /> -->
    <title>Document</title>
    <style>
      .target {
        width: 20px;
        height: 20px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app"><div class="target"></div></div>
    <script src="https://unpkg.com/vue@2.0.1/dist/vue.min.js"></script>
    <script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
    <!-- <script src="https://unpkg.com/swiper@4.4.6/dist/js/swiper.min.js"></script> -->
    <script>
      new Vue({
        el: '#app',
        data() {
          return {};
        },

        mounted() {
          // 为每种属性提供特定的动画参数 https://animejs.com/documentation/#specificPropParameters

          // 为动画的每个目标和属性获取不同的值 https://animejs.com/documentation/#functionBasedParameters

          // 添加,减去或乘以原始值。 https://animejs.com/documentation/#relativeValues

          // 帧动画 https://animejs.com/documentation/#animationKeyframes

          // 播放/暂停 https://animejs.com/documentation/#playPause

          // 回调函数,监听动画周期 https://animejs.com/documentation/#update
          var playPauseAnim = anime({
            targets: '.target',
            autoplay: true, // 定义动画是否应自动启动。
            // translateX: 250,
            // translateX: [-20, 20], // 强制动画以指定值开始。 [from, to]

            translateX: [
              { value: -20, duration: 0 },
              { value: 0, duration: 1000 },
              { value: 20, duration: 1000, delay: 2000 },
            ],

            opacity: [
              { value: 0, duration: 0 },
              { value: 1, duration: 1000 },
              { value: 0, duration: 1000, delay: 2000 },
            ],

            duration: 3000, // 动画的持续时间(以毫秒为单位)
            delay: 1000, // 动画的延迟(以毫秒为单位)
            // endDelay: 1000, // 动画结束时以毫秒为单位添加一些额外时间
            easing: 'linear', // 和css一样的动画曲线 https://animejs.com/documentation/#linearEasing
            // direction: 'alternate', // 定义动画的方向。 https://animejs.com/documentation/#direction
            loop: true, // 定义动画的迭代次数。

            // innerHTML: [0, 10000],
            // round: 10, // 将值向上舍入为x小数。

            //每帧都会触发回调,包括延迟时
            update: function() {
              // console.log('update');
            },
            begin: function(anim) {
              console.log('begin');
            },

            // 每次循环开始时都会触发一次loopBegin
            loopBegin() {
              console.log('loopBegin');
            },

            // 每次动画开始更改时都会触发changeBegin
            changeBegin: function(anim) {
              console.log('changeBegin');
            },

            //每次循环完成时都会触发一次loopComplete
            loopComplete: function(anim) {
              console.log('loopComplete');
            },

            // 每次动画停止更改时都会触发changeComplete
            changeComplete: function(anim) {
              console.log('changeComplete');
            },

            // 在延迟之后触发
            change: function() {
              console.log('change');
            },

            complete: function(anim) {
              console.log('结束');
            },
          });
        },

        methods: {},
      });
    </script>
  </body>
</html>
posted @ 2019-01-23 11:15  Ajanuw  阅读(676)  评论(0编辑  收藏  举报
微信打赏
微信打赏
支付宝打赏
支付宝打赏
Paypal
Paypal