属性动画的思维剖析 - 亲手打造属于你的属性动画框架

Android

2023-12-11 19:41:05

揭开属性动画的神秘面纱：动手打造精简版框架

在网页开发的世界中，属性动画因其创建流畅、引人入胜的交互而备受推崇。但对于初学者来说，理解其背后的机制可能像解开一道谜题一样令人费解。

属性动画的精髓

本质上，属性动画通过操纵元素的属性值（例如，位置、颜色或透明度）来产生视觉上的变化。通过利用“补间”技术，它在动画开始和结束状态之间创造平滑的过渡。

打造你的精简版框架

为了深入理解属性动画的核心概念，让我们亲手打造一个精简版框架：

1. 属性值补间

我们的框架将使用线性插值算法，根据时间进度计算每个属性值在动画过程中的中间状态。

function lerp(start, end, progress) {
  return (1 - progress) * start + progress * end;
}

2. 时间控制

计时器函数每隔一段时间调用更新函数，从而控制动画的时间进度。

let timer = null;

function startAnimation() {
  if (!timer) {
    timer = setInterval(update, 16);
  }
}

function stopAnimation() {
  clearInterval(timer);
  timer = null;
}

3. 动画循环

通过使用标志位，我们的框架可以实现动画循环，在动画完成后自动重新开始。

let isRunning = false;

function startLoop() {
  isRunning = true;
  startAnimation();
}

function stopLoop() {
  isRunning = false;
  stopAnimation();
}

完整的框架代码

将所有组件结合在一起，我们得到了一个完整的精简版属性动画框架：

const Animation = {
  _tweens: [],
  _timer: null,
  _isRunning: false,

  lerp: (start, end, progress) => {
    return (1 - progress) * start + progress * end;
  },

  start: function() {
    if (!this._timer && this._tweens.length) {
      this._timer = setInterval(this.update, 16);
      this._isRunning = true;
    }
  },

  stop: function() {
    clearInterval(this._timer);
    this._timer = null;
    this._isRunning = false;
  },

  startLoop: function() {
    this._isRunning = true;
    this.start();
  },

  stopLoop: function() {
    this._isRunning = false;
    this.stop();
  },

  add: function(tween) {
    this._tweens.push(tween);
  },

  update: function() {
    if (!this._isRunning || !this._tweens.length) {
      return;
    }

    let progress = this._tweens[0].progress();
    if (progress >= 1) {
      this._tweens.shift();
      if (!this._tweens.length) {
        this.stop();
        return;
      }
    }

    for (let tween of this._tweens) {
      tween.update(progress);
    }
  },
};

使用框架

要使用框架，只需实例化一个 Animation 对象并添加补间对象即可：

const animation = new Animation();

animation.add({
  element: document.getElementById("myElement"),
  property: "opacity",
  startValue: 0,
  endValue: 1,
  duration: 1000,
});

animation.startLoop();