js自定义动画怎么写

在JavaScript中，自定义动画的实现可以通过多种方式，如使用setTimeout、setInterval、或requestAnimationFrame函数。其中，requestAnimationFrame 是创建高性能动画的首选方法，因为它能根据浏览器的刷新率自动调整动画的帧率，并且在页面不可见时暂停执行，节省资源。以下是如何使用requestAnimationFrame创建自定义动画的详细介绍。

一、使用requestAnimationFrame创建动画

1、基本概念

requestAnimationFrame 是一个高效的动画实现方法，它能确保动画按照最佳帧率运行，并且可以避免页面未激活时的资源浪费。与setTimeout或setInterval不同，requestAnimationFrame会在浏览器下次重绘之前执行回调函数，从而使动画更加流畅。

2、基本用法

function animate() {
  // 在这里更新动画状态
  // ...
  // 再次调用animate函数
  requestAnimationFrame(animate);
}
// 开始动画
requestAnimationFrame(animate);

在上述代码中，animate函数将在每次浏览器重绘时被调用，从而实现动画的更新。

3、示例：移动一个元素

const element = document.getElementById('animatedElement');
let start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
// 开始动画
requestAnimationFrame(step);

在这个示例中，元素将从左向右移动200像素，动画持续时间为2秒。

二、控制动画的暂停与继续

1、暂停动画

要暂停动画，可以通过取消requestAnimationFrame的回调函数实现。例如：

let requestId;
function animate() {
  // 更新动画状态
  // ...
  requestId = requestAnimationFrame(animate);
}
// 开始动画
requestId = requestAnimationFrame(animate);
// 暂停动画
cancelAnimationFrame(requestId);

2、继续动画

暂停后，您可以通过重新调用requestAnimationFrame来继续动画。

function resumeAnimation() {
  requestId = requestAnimationFrame(animate);
}
// 继续动画
resumeAnimation();

三、实现复杂动画效果

1、动画序列

有时，您可能需要依次执行多个动画。可以使用Promise或async/await来实现动画序列。

function animateElement(element, duration, distance) {
  return new Promise((resolve) => {
    let start = null;
    function step(timestamp) {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      element.style.transform = `translateX(${Math.min(progress / duration * distance, distance)}px)`;
      if (progress < duration) {
        requestAnimationFrame(step);
      } else {
        resolve();
      }
    }
    requestAnimationFrame(step);
  });
}
async function runAnimations() {
  const element = document.getElementById('animatedElement');
  await animateElement(element, 1000, 200);
  await animateElement(element, 1000, -200);
}
// 开始动画序列
runAnimations();

2、并行动画

为了实现多个元素的并行动画，可以在同一个requestAnimationFrame回调中更新多个元素的状态。

const elements = document.querySelectorAll('.animatedElement');
function animate() {
  elements.forEach((element, index) => {
    // 更新每个元素的动画状态
    // ...
  });
  requestAnimationFrame(animate);
}
// 开始动画
requestAnimationFrame(animate);

3、基于物理的动画

通过引入物理计算，例如速度、加速度等，可以使动画更加逼真。以下是一个简单的基于物理的弹跳动画示例：

const element = document.getElementById('animatedElement');
let position = 0;
let velocity = 0;
const gravity = 0.5;
const bounce = 0.7;
function step() {
  velocity += gravity;
  position += velocity;
  if (position > window.innerHeight - element.clientHeight) {
    position = window.innerHeight - element.clientHeight;
    velocity *= -bounce;
  }
  element.style.transform = `translateY(${position}px)`;
  requestAnimationFrame(step);
}
// 开始动画
requestAnimationFrame(step);

在这个示例中，元素将根据重力和反弹系数进行上下弹跳。

四、性能优化与注意事项

1、性能优化

requestAnimationFrame 已经非常高效，但在复杂动画中，仍有一些优化方法：

避免布局抖动：尽量减少对DOM的频繁操作，尤其是那些会引起重新布局的操作。
使用CSS硬件加速：通过使用CSS transform和opacity属性，可以利用GPU加速动画，提高性能。
合并动画帧：在同一个requestAnimationFrame回调中处理多个动画，以减少重绘次数。

2、注意事项

浏览器兼容性：虽然大多数现代浏览器都支持requestAnimationFrame，但在一些旧版浏览器中可能需要添加兼容性前缀或使用polyfill。
资源管理：确保在不需要动画时取消requestAnimationFrame，以避免不必要的资源消耗。

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

通过上述代码，您可以确保在旧版浏览器中也能正常使用requestAnimationFrame。

五、常见问题与解决方案

1、动画抖动

动画抖动通常是由于帧率不稳定或频繁的DOM操作引起的。通过使用transform属性和硬件加速，可以有效减少抖动。

2、动画不同步

多个动画之间可能会出现不同步的现象。可以通过在同一个requestAnimationFrame回调中处理所有动画，确保它们同步更新。

3、性能瓶颈

在复杂动画中，可能会遇到性能瓶颈。可以通过减少DOM操作、合并动画帧、使用硬件加速等方式进行优化。

六、项目管理与协作工具推荐

在开发和管理动画项目时，使用合适的项目管理与协作工具可以提高效率。以下是两个推荐的工具：

研发项目管理系统PingCode：专注于研发项目管理，提供了强大的任务跟踪和协作功能，适合开发团队使用。
通用项目协作软件Worktile：适用于各种类型的项目管理，提供了任务管理、时间跟踪和团队协作等功能，灵活易用。

通过使用这些工具，您可以更好地管理动画项目，确保团队协作顺畅，提高开发效率。

总结

requestAnimationFrame 是实现JavaScript自定义动画的最佳选择，它提供了高效、流畅的动画体验。通过掌握requestAnimationFrame的基本用法、控制动画的暂停与继续、实现复杂动画效果、性能优化与注意事项，您可以创建出丰富多彩的动画效果。在开发过程中，合理使用项目管理与协作工具，可以进一步提升开发效率和项目管理水平。