技术实战之视野修炼第72期 | 22 种方式花式展现弹🏀动画

2023-11-04 15:03:18

篮球动画的无限可能：22 种实现方式

想要为您的项目增添趣味性和交互性？篮球动画是您的不二选择，无论是体育应用还是游戏，都能完美契合。本文将为您揭秘实现篮球动画的 22 种方法，让您的创作迸发出无限可能。

1. CSS 动画：简单便捷

CSS 动画是初学者迈入篮球动画世界的理想选择。只需借助 CSS 的 @keyframes 规则，即可为您的篮球元素赋予栩栩如生的动作。比如，以下代码会让篮球上下弹跳：

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.basketball {
  animation: bounce 1s infinite alternate;
}

2. JavaScript 动画：灵活性十足

JavaScript 动画提供更强大的灵活性，让您轻松控制篮球在屏幕上的移动。以下代码示例会让篮球在屏幕上自由穿梭：

var basketball = document.querySelector('.basketball');

function moveBasketball() {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;

  basketball.style.left = x + 'px';
  basketball.style.top = y + 'px';
}

setInterval(moveBasketball, 100);

3. Canvas 动画：绘制自由

Canvas 动画让您尽情发挥想象力，在画布上挥洒创意。以下代码示例会让篮球在画布上弹跳：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var x = 100;
var y = 100;
var dx = 5;
var dy = 5;

function drawBasketball() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = '#ff0000';
  ctx.fill();

  x += dx;
  y += dy;

  if (x < 0 || x > canvas.width) {
    dx = -dx;
  }
  if (y < 0 || y > canvas.height) {
    dy = -dy;
  }
}

setInterval(drawBasketball, 10);

4. SVG 动画：简洁高效

SVG 动画以其简洁高效著称，以下代码示例会让篮球在 SVG 画布上弹跳：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="10" fill="#ff0000" />
  <animate attributeName="cy" values="100;200;100" dur="1s" repeatCount="indefinite" />
</svg>

5. WebGL 动画：极致逼真

WebGL 动画在追求逼真的道路上更进一步，以下代码示例会让篮球在 WebGL 画布上弹跳：

var canvas = document.querySelector('canvas');
var gl = canvas.getContext('webgl');

var vertexShader = `
  attribute vec3 position;

  void main() {
    gl_Position = vec4(position, 1.0);
  }
`;

var fragmentShader = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  -1.0, 1.0, 0.0,
  1.0, 1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

var positionLocation = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

var time = 0.0;

function render() {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  time += 0.01;

  var y = Math.sin(time) * 0.5 + 0.5;

  gl.uniform1f(timeLocation, time);

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  requestAnimationFrame(render);
}

requestAnimationFrame(render);