揭开前端动画之谜：canvas 与 css3D 的魅力探索

2023-09-29 02:06:40

前端动画的画布与门户：canvas和css3D

前端技术日新月异，canvas 和css3D 作为两大巨头，在动画领域展露锋芒，让网页不再枯燥乏味，迸发出勃勃生机。让我们一起探秘这两位重量级选手，揭开前端动画背后的奥秘。

canvas：数字时代的绘画大师

canvas ，一块以像素为单位的矩形区域，却能成为创意迸发的画布。在JavaScript API的妙手下，线条起舞，形状变幻，甚至物理效应也能跃然纸上。canvas的动画本质上就是不断更新像素颜色或元素位置，在视觉上呈现运动效果。通过requestAnimationFrame()方法，以固定时间间隔重绘canvas，就能实现流畅的动画效果。

代码示例：绘制摆锤

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 300;
const ctx = canvas.getContext('2d');
let x = 100, y = 100;
let vx = 5, vy = 0;
const g = 9.8;
const l = 100;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  x += vx;
  y += vy;
  vy += g * Math.sin(Math.atan2(y - 100, x - 100)) / 30;
  if (x < 0 || x > canvas.width) vx = -vx;
  if (y < 0 || y > canvas.height) vy = -vy;
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(x, y);
  ctx.stroke();
  requestAnimationFrame(animate);
}
animate();

css3D：开启三维世界的大门

css3D ，引领我们步入三维空间的强大工具。它将元素放置在三维空间，通过变换属性旋转、缩放、平移元素，营造真实的3D效果。css3D动画遵循canvas的原理，不过，需要用CSS控制三维元素的位置和属性，再用JavaScript控制其运动。

代码示例：旋转地球

#earth {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url('earth.jpg');
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}