宽松的动画-css教程-PHP中文网

首页

web前端

css教程

宽松的动画

尊渡假赌尊渡假赌尊渡假赌

Apr 05, 2025 am 10:17 AM

Easing Animations in Canvas

HTML5 <canvas></canvas> 元素结合 JavaScript 的 Canvas API，构成了网页上主要的栅格图形和动画功能之一。Canvas 的一个常见用例是为网站（特别是游戏）以编程方式生成图像。我构建的一个纸牌接龙游戏网站正是这样做的，其中所有纸牌及其移动都使用 canvas 完成。

本文将重点关注 canvas 中的动画以及使动画看起来更流畅的技术。我们将特别关注缓动过渡（例如“ease-in”和“ease-out”），这些过渡在 canvas 中不像 CSS 中那样是免费提供的。

让我们从一个静态 canvas 开始。我已经在 canvas 上绘制了一张从 DOM 中获取的扑克牌：

让我们从一个基本的动画开始：在 canvas 上移动那张扑克牌。即使是很基本的事情，在 canvas 中也需要从头开始工作，因此我们必须开始构建我们可以使用的函数。

首先，我们将创建一些函数来帮助计算 X 和 Y 坐标：

function getX(params) {
  let distance = params.xTo - params.xFrom;
  let steps = params.frames;
  let progress = params.frame;
  return distance / steps * progress;
}

function getY(params) {
  let distance = params.yTo - params.yFrom;
  let steps = params.frames;
  let progress = params.frame;
  return distance / steps * progress;
}

这将帮助我们在图像动画时更新位置值。然后，我们将不断重新渲染 canvas，直到动画完成。我们通过将以下代码添加到我们的 addImage() 方法来实现这一点。

// ... (省略部分代码) ...
if (params.frame 
<p>现在我们有了动画！我们每次都在稳定地递增 1 个单位，我们称之为<em>线性</em>动画。</p>
<p>您可以看到形状如何以线性方式从 A 点移动到 B 点，在两点之间保持相同的恒定速度。它功能齐全，但缺乏真实感。开始和停止很突兀。</p>
<p>我们想要的是物体加速（ease-in）和减速（ease-out），这样它就能模拟现实世界中物体在摩擦力和重力作用下的运动。</p>
<p></p><h2 id="JavaScript-缓动函数">JavaScript 缓动函数</h2>
<p>我们将使用“三次”ease-in 和 ease-out 过渡来实现这一点。我们修改了 Robert Penner 的 Flash 缓动函数中找到的方程式之一，使其适合我们在这里想要做的事情。</p>
<pre class="brush:php;toolbar:false">function getEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress 
<p>将其插入到我们的代码中（这是一个<strong>三次缓动</strong>），我们将得到一个更平滑的结果。请注意，卡片如何加速朝向空间的中心，然后在到达终点时减速。</p>
<p></p><h2 id="使用-JavaScript-进行高级缓动">使用 JavaScript 进行高级缓动</h2>
<p>我们可以使用二次或正弦缓动来获得更慢的加速度。</p>
<pre class="brush:php;toolbar:false">function getQuadraticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress 
<p>为了获得更快的加速度，可以使用五次或指数缓动：</p>
<pre class="brush:php;toolbar:false">function getQuinticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress 
<p></p><h3 id="使用-GSAP-实现更复杂的动画">使用 GSAP 实现更复杂的动画</h3>
<p>自己编写缓动函数很有趣，但是如果您想要更强大的功能和灵活性呢？您可以继续编写自定义代码，也可以考虑使用更强大的库。让我们为此转向 GreenSock 动画平台 (GSAP)。</p>
<p>使用 GSAP，动画的实现变得容易得多。以这个例子为例，卡片在结束时会反弹。请注意，GSAP 库包含在演示中。</p>
<p>关键函数是 <code>moveCard</code>：</p>
<pre class="brush:php;toolbar:false">function moveCard() {
  gsap.to(position, {
    duration: 2,
    ease: "bounce.out",
    x: position.xMax,
    y: position.yMax,
    onUpdate: function() {
      draw();
    },
    onComplete: function() {
      position.x = position.origX;
      position.y = position.origY;
    }
  });
}

gsap.to 方法是所有魔法发生的地方。在两秒的持续时间内，位置对象被更新，并且每次更新时都会调用 onUpdate，从而触发 canvas 的重绘。

而且我们不仅仅是在谈论反弹。有大量的不同缓动选项可供选择。