JS运动特效之链式运动分析

什么是链式运动？

链式运动（chained animation）是指在一个元素上连续运用多个运动函数，从而实现多个运动效果的衔接。

在实际开发中，链式运动被广泛应用于页面的元素动态效果设计，为网页提供更加生动有趣的交互。

实现一个链式运动

下面我们通过一个例子来介绍如何实现一个链式运动。

HTML

<div id="demo">示例</div>

CSS

#demo {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

JS

function animate(obj) {
  obj.pos = obj.pos || 0; // 初始化位置
  obj.time = obj.time || 1000; // 初始化时间，默认1s
  obj.delay = obj.delay || 0; // 初始化延迟，默认0s
  obj.target = obj.target || {}; // 初始化目标属性对象

  var startTime = +new Date(); // 开始时间
  var startVal = {}; // 开始值
  var changes = {}; // 需要变化的值
  for (var key in obj.target) {
    startVal[key] = parseFloat(getComputedStyle(obj)[key]);
    changes[key] = obj.target[key] - startVal[key];
  }

  var timer = setInterval(function() {
    var elapsedTime = +new Date() - startTime - obj.delay;
    if (elapsedTime < obj.time) {
      var val = {}; // 每个属性的实时值
      for (var key in startVal) {
        val[key] = startVal[key] + changes[key] * elapsedTime / obj.time;
        obj.style[key] = val[key] + 'px';
      }
      obj.pos = requestAnimationFrame(function() {
        animate(obj);
      });
    } else {
      clearInterval(timer);
      cancelAnimationFrame(obj.pos);
      for (var key in startVal) {
        obj.style[key] = obj.target[key] + 'px';
      }
      obj.callback && obj.callback();
    }
  }, 16);
}

animate({
  target: {
    left: 400,
    top: 200,
    opacity: 0.5,
    width: 200,
    height: 200
  },
  time: 2000,
  delay: 1000,
  callback: function() {
    console.log('动画完成！');
  }
});

案例分析

下面我们通过两个案例来分析链式运动的实现过程。

案例一

首先我们需要依次实现一个元素从左到右、从上到下、放大缩小的动画效果。

// 实现一个元素从左到右移动的动画效果
animate({
  target: {
    left: 400
  },
  time: 1000,
  callback: function() {
    // 实现一个元素从上到下移动的动画效果
    animate({
      target: {
        top: 300
      },
      time: 1000,
      callback: function() {
        // 实现一个元素放大缩小的动画效果
        animate({
          target: {
            width: 200,
            height: 200
          },
          time: 500,
          callback: function() {
            animate({
              target: {
                width: 100,
                height: 100
              },
              time: 500,
              callback: function() {
                console.log('动画完成！');
              }
            });
          }
        });
      }
    });
  }
});

在上面的代码中，我们通过嵌套不同的animate函数实现了一个元素从左到右、从上到下、放大缩小的动画效果，其中animate函数是我们前面所定义的链式动画函数。

案例二

接下来我们在一个元素上同时运用水平移动、旋转和透明度变化三个动画效果。

animate({
  target: {
    left: 400,
    transform: 'rotate(360deg)',
    opacity: 0.5
  },
  time: 1000,
  callback: function() {
    console.log('动画1完成！');
    animate({
      target: {
        left: 100,
        transform: 'rotate(-360deg)',
        opacity: 1
      },
      time: 1000,
      callback: function() {
        console.log('动画2完成！');
      }
    });
  }
});

在上面的代码中，我们将水平移动、旋转和透明度变化三个动画效果通过同时改变多个属性实现，而且通过多次调用animate函数使得这三个动画效果串联在一起，形成了一个完整的链式动画效果。

总结

通过本篇文章的介绍，我们学习了如何使用JS实现链式动画效果，并通过两个案例分析具体的实现过程。对于网页的元素动态效果设计，链式动画效果是非常重要的一种手段，希望大家能够掌握这种技术，为你的网页设计增添更多的生动色彩。