使用 CSS 实现正确的弹跳动画效果

什么是弹跳动画效果？

弹跳动画效果是模拟物体在弹力作用下运动的过程，通过动画的形式展现出来，一般用于网页中的图标或按钮点击后的反馈效果。这种效果可以增加网页的互动性和吸引力，提升用户体验。

如何实现弹跳动画效果？

1. CSS3的动画属性

CSS3中有一个animation属性，可以实现动画的效果。它有很多属性，如动画名称、持续时间、延迟、动画执行次数等。其中animation-timing-function属性可以实现弹跳动画效果。

/* 定义动画名称和持续时间*/
.animation {
  animation-name: bounce;
  animation-duration: 0.6s;
}
/* 定义动画执行的次数和方式 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

上述代码中，animation-name属性定义了动画的名称，bounce为自定义的名称。animation-duration属性定义了动画持续的时间，这里设为0.6秒。接下来，在@keyframes中定义了动画执行的过程。关键帧（即0%、20%等）表示动画执行到的点，其中transform属性用来改变元素的位置、大小和旋转等属性。在这里，使用translateY属性将元素沿Y轴方向移动。

弹跳动画效果使用ease-out或ease-in-out的动画执行方式。其中，ease-out的速度先快后慢，而ease-in-out的速度先慢后快，而中间时间段速度最慢，最大振幅在中间。

/* 定义动画执行方式 */
.animation {
  animation-name: bounce;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}
@keyframes bounce {
  /* … */
}

上述代码中，在.animation选择器下添加了animation-timing-function属性，值为ease-out。

2. JavaScript实现

除了使用CSS3的动画属性，还可以使用JavaScript实现弹跳动画效果。实现原理是使用window.requestAnimationFrame()方法在每个刷新周期中更新元素位置，从而形成动画效果。

function animate(element, startY, endY, duration, timingFunction) {
  var start = performance.now();
  requestAnimationFrame(function animate(time) {
    var timeFraction = (time - start) / duration;
    if (timeFraction > 1) {
      timeFraction = 1;
    }
    var progress = timingFunction(timeFraction);
    var position = startY + (endY - startY) * progress;
    element.style.transform = 'translateY(' + position + 'px)';
    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
  });
}
animate(document.querySelector('.box'), 0, -30, 600, easeOut);
function easeOut(timeFraction) {
  return 1 - Math.pow(1 - timeFraction, 4);
}

首先，定义animate函数，该函数接受5个参数：元素对象、起始位置、结束位置、持续时间和缓动函数。

在函数内部，首先使用performance.now()方法获取当前时间点作为起始时间，然后使用requestAnimationFrame方法在每个刷新周期中更新元素位置。时间分数通过计算实现，以确定更新的位置。注意，在更新过程中，也需要将缓动函数应用于时间分数。这里使用easeOut函数，该函数计算返回的分数在0到1之间，并根据时间分数的大小返回新的动画位置。最后，将新位置设置为元素的transform属性。在更新完所有帧后，再执行下一帧。

总结

在网页设计中，弹跳动画效果可以吸引用户的注意力，提高用户体验。通过CSS3的动画属性或JavaScript实现，可以实现各种弹跳动画效果。在CSS3中，animation-timing-function属性用来控制动画执行的方式，可以通过ease-out或ease-in-out实现弹跳动画效果。在JavaScript中，需要使用window.requestAnimationFrame方法在刷新周期中更新元素位置，需要自行定义缓动函数以确定动画的执行方式。