javascript动画对象支持加速、减速、缓入、缓出的实现代码

实现JavaScript动画对象支持加速、减速、缓入、缓出的过程基本分为以下几个步骤：

定义动画对象，设置初始值和目标值
设置动画的持续时间、缓动方式等参数
在动画前缓存当前状态
执行动画过程，不断更新当前状态
到达目标值后停止动画

下面详细介绍一下每个步骤

1. 定义动画对象

定义动画对象可以使用原生Javascript实现，例如：

var element = document.getElementById('myElement');
var myAnimation = { 
  position: 0,  // 初始值 
  target: 100   // 目标值
};

在上面的代码中，我们创建了一个动画对象myAnimation，其中包含了当前的position和目标值target。这里特别提醒一下，需要使用定时器循环执行一个函数，来不断更新myAnimation.position的值，从而实现动态效果。

2. 设置动画的持续时间、缓动方式等参数

接下来，我们需要为动画对象设置一些基本参数，例如动画的持续时间、缓动方式等。这里，我们可以根据需要自行定义这些参数。例如：

var myAnimation = { 
  position: 0,      // 初始值 
  target: 100,      // 目标值 
  duration: 1000,   // 持续时间（单位：毫秒） 
  easing: 'linear'  // 缓动方式
};

在上面的代码中，我们定义了动画对象的持续时间为1秒，缓动方式为线性（即匀速运动）。

3. 在动画前缓存当前状态

在动画前，我们需要先缓存当前状态以备恢复，例如：

var element = document.getElementById('myElement');
var myAnimation = { 
  position: 0,        // 初始值 
  target: 100,        // 目标值 
  duration: 1000,     // 持续时间 
  easing: 'linear'    // 缓动方式 
};

// 缓存当前状态 
var startPosition = element.style.position;
var startLeft = element.style.left;
var startTop = element.style.top;
var startWidth = element.style.width;
var startHeight = element.style.height;

在上面的代码中，我们缓存了元素的position、left、top、width、height等状态。

4. 执行动画过程，不断更新当前状态

接下来，我们需要执行动画过程并不断更新当前状态，实现动画效果。这里，我们可以使用setInterval定时器和缓动函数实现：

var element = document.getElementById('myElement');
var myAnimation = { 
  position: 0,        // 初始值 
  target: 100,        // 目标值 
  duration: 1000,     // 持续时间 
  easing: 'linear'    // 缓动方式 
};

// 缓存当前状态 
var startPosition = element.style.position;
var startLeft = element.style.left;
var startTop = element.style.top;
var startWidth = element.style.width;
var startHeight = element.style.height;

// 记录动画开始时间 
var startTime = new Date().getTime();

// 定时器，每隔10毫秒执行一次 
var animationInterval = setInterval(function() {
  // 计算动画执行的时间 
  var time = new Date().getTime() - startTime;

  // 如果时间已经超过了动画的持续时间 
  if (time >= myAnimation.duration) {
    // 停止动画 
    clearInterval(animationInterval);
    // 恢复初始状态 
    element.style.position = startPosition;
    element.style.left = startLeft;
    element.style.top = startTop;
    element.style.width = startWidth;
    element.style.height = startHeight;
  } else {
    // 计算当前值 
    var position = myAnimation.easing(time, 0, myAnimation.target-myAnimation.position, myAnimation.duration);
    // 更新元素 
    element.style.position = startPosition;
    element.style.left = startLeft + position + 'px';
    element.style.top = startTop + position + 'px';
    element.style.width = startWidth + position + 'px';
    element.style.height = startHeight + position + 'px';
  }
}, 10);

在上面的代码中，我们使用setInterval定时器每隔10毫秒执行一次动画过程，并根据当前时间计算出position的值。根据计算出的position值，我们动态更新元素的状态，实现动画效果。

5. 到达目标值后停止动画

最后，在动画到达目标值之后，我们需要停止定时器并恢复元素的初始状态。

以上是JavaScript动画对象支持加速、减速、缓入、缓出的实现代码的完整攻略。接下来，我们来看两个示例说明。

示例一：缓动效果

// 缓入缓出效果 
function easeInOutQuad(t, b, c, d) {
  t /= d/2;
  if (t < 1) {
    return c/2*t*t + b;
  } else {
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
  }
}

var element = document.getElementById('myElement');
var myAnimation = { 
  position: 0,        // 初始值 
  target: 100,        // 目标值 
  duration: 1000,     // 持续时间 
  easing: easeInOutQuad // 缓动方式 
};

// 缓存当前状态 
var startPosition = element.style.position;
var startLeft = element.style.left;
var startTop = element.style.top;
var startWidth = element.style.width;
var startHeight = element.style.height;

// 记录动画开始时间 
var startTime = new Date().getTime();

// 定时器，每隔10毫秒执行一次 
var animationInterval = setInterval(function() {
  // 计算动画执行的时间 
  var time = new Date().getTime() - startTime;

  // 如果时间已经超过了动画的持续时间 
  if (time >= myAnimation.duration) {
    // 停止动画 
    clearInterval(animationInterval);
    // 恢复初始状态 
    element.style.position = startPosition;
    element.style.left = startLeft;
    element.style.top = startTop;
    element.style.width = startWidth;
    element.style.height = startHeight;
  } else {
    // 计算当前值 
    var position = myAnimation.easing(time, 0, myAnimation.target-myAnimation.position, myAnimation.duration);
    // 更新元素 
    element.style.position = startPosition;
    element.style.left = startLeft + position + 'px';
    element.style.top = startTop + position + 'px';
    element.style.width = startWidth + position + 'px';
    element.style.height = startHeight + position + 'px';
  }
}, 10);

在上面代码中，我们定义了一个缓动函数easeInOutQuad，将其作为动画的缓动方式，并使用该函数实现动态效果。

示例二：变速效果

// 变速效果 
function easeOutCubic(t, b, c, d) {
  t /= d;
  t--;
  return c*(t*t*t + 1) + b;
}

var element = document.getElementById('myElement');
var myAnimation = { 
  position: 0,        // 初始值 
  target: 100,        // 目标值 
  duration: 1000,     // 持续时间 
  easing: easeOutCubic // 缓动方式 
};

// 缓存当前状态 
var startPosition = element.style.position;
var startLeft = element.style.left;
var startTop = element.style.top;
var startWidth = element.style.width;
var startHeight = element.style.height;

// 记录动画开始时间 
var startTime = new Date().getTime();

// 定时器，每隔10毫秒执行一次 
var animationInterval = setInterval(function() {
  // 计算动画执行的时间 
  var time = new Date().getTime() - startTime;

  // 如果时间已经超过了动画的持续时间 
  if (time >= myAnimation.duration) {
    // 停止动画 
    clearInterval(animationInterval);
    // 恢复初始状态 
    element.style.position = startPosition;
    element.style.left = startLeft;
    element.style.top = startTop;
    element.style.width = startWidth;
    element.style.height = startHeight;
  } else {
    // 计算当前值 
    var position = myAnimation.easing(time, 0, myAnimation.target-myAnimation.position, myAnimation.duration);
    // 更新元素 
    element.style.position = startPosition;
    element.style.left = startLeft + position + 'px';
    element.style.top = startTop + position + 'px';
    element.style.width = startWidth + position + 'px';
    element.style.height = startHeight + position + 'px';
  }
}, 10);

在上面代码中，我们定义了一个变速动画效果函数easeOutCubic，将其作为动画的缓动方式，并使用该函数实现动态效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript动画对象支持加速、减速、缓入、缓出的实现代码 - Python技术站