一图胜千言：微信下拉刷新动效效果实现全解析！

Android

2023-12-03 12:13:31

揭秘微信下拉刷新动效：Canvas 与 requestAnimationFrame 的魅力

简介

微信的下拉刷新动效以其流畅性和实用性而闻名。实现这一动效需要运用 Canvas 和 requestAnimationFrame，本文将深入探究其背后的原理，帮助你轻松掌握这一技巧。

实现原理

1. Canvas：绘制画布

Canvas 是一个网页上绘制图形的画布。我们需要创建一个 Canvas 元素并获取其画布上下文对象，用于在画布上进行绘图。

2. requestAnimationFrame：创建动画循环

requestAnimationFrame 是一个动画 API，用于在浏览器中执行动画。我们需要创建一个动画循环，不断调用一个绘图函数，以更新画布上的图形。

3. 绘制动效

在绘图函数中，我们使用 Canvas API 绘制大球和小球。大球负责下坠，小球负责弹跳，共同营造出下拉刷新的效果。

4. 滚动检测

在 window 对象的 scroll 事件中，我们使用 getBoundingClientRect() 方法获取画布的滚动位置。根据滚动位置，更新画布上的图形，显示或隐藏下拉刷新界面。

完整代码示例

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let requestId = null;

function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制大球
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff0000';
  ctx.fill();

  // 绘制小球
  for (let i = 0; i < 3; i++) {
    ctx.beginPath();
    ctx.arc(
      canvas.width / 2 + 100 * Math.cos(2 * Math.PI * i / 3),
      canvas.height / 2 + 100 * Math.sin(2 * Math.PI * i / 3),
      20,
      0,
      2 * Math.PI
    );
    ctx.fillStyle = '#ff0000';
    ctx.fill();
  }

  // 绘制小程序界面
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, canvas.height - 100, canvas.width, 100);

  // 递归调用动画循环
  requestId = requestAnimationFrame(animate);
}

window.addEventListener('scroll', function() {
  const rect = canvas.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollBottom = scrollTop + window.innerHeight;

  if (rect.top < scrollBottom && rect.bottom > scrollTop) {
    // 画布在可视区域内
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
  } else {
    // 画布不在可视区域内
    ctx.clearRect(0, canvas.height - 100, canvas.width, 100);
  }
});

requestId = requestAnimationFrame(animate);