有没有办法让动画计时功能应用于整个动画而不是每个关键帧？

Question

我对动画有点陌生，所以如果我在这里错过了一个很大的概念，请原谅我。我需要为一个指向曲线上的点的箭头设置动画，为了这篇文章的目的，我们假设它是一条三次曲线。箭头沿着曲线移动，始终指向其下方的几个像素。

所以我所做的就是使用 CSS3 沿曲线设置关键帧：

 @-webkit-keyframes ftch {
     0% {
         opacity: 0;
         left: -10px;
         bottom: 12px;
     }
     
    25% {
        opacity: 0.25;
        left: 56.5px;
        bottom: -7px;
     }
     
     50% {
        opacity: 0.5;         
        left: 143px;
        bottom: -20px;
     }
     
     75% {
        opacity: 0.75;
        left: 209.5px;
        bottom: -24.5px;
     }
     
     100% {
         opacity: 1;
         left: 266px;
         bottom: -26px;
     }
}

但是，当我使用 -webkit-animation-timing-function: escape-in​​ 运行此动画时，它会将缓动应用于每个单独的关键帧，这绝对不是我想要什么。我希望将缓动应用于整个动画。

我应该采取不同的方式吗？是否有一些属性可以将缓动应用于整个序列而不是每个关键帧？

Answer 1

您无法对一系列关键帧应用缓动函数，因为您专门告诉对象在特定时间处于特定点。例如，如果您在一系列关键帧上应用缓入，那么在 25% 时，对象将落后于其所需的“检查点”，最终加速直至赶上 100%。

如果你的点或多或少是等距的，你可以应用：

.animatedobject {
  -webkit-animation-timing-function: linear;
}

并且你的动画看起来会更差，甚至有点机械化。

更自然的方法是加速、保持速度，然后“制动”：

 @-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

如果 webkit 支持沿着路径的动画，则不需要这些关键帧，并且将缓动仅应用于两个关键帧不会有任何问题。

Answer 2

当您希望将不同的缓动函数应用于动画的不同方面时，您应该通过将内容嵌套在两个 div 中来分离动画。

在这种情况下，您应该创建一个父 div 来应用移动动画，并创建一个子 div 来应用不透明度动画。不透明度动画应具有缓动曲线：线性，并且运动动画应具有最适合您的缓动函数。不过，我想重复 Duopixel 关于混合缓动曲线和固定检查点的说法 - 在这种情况下，您实际上不需要动画，只需两个 0%:100% 动画 - 一个用于父级，一个用于子级 div。

完成了大量 CSS3 动画之后，我为我们的 Sencha Animator 产品编写了本指南 - 它有一些关于如何使用 CSS3 获得复杂动画的有用的一般信息 - 即使您不想使用该工具。

Answer 3

您无法使用 CSS 动画 来做到这一点，但是如果您不介意将其转换为 JavaScript，那么您可以使用 < a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API" rel="nofollow noreferrer">Web 动画 API 代替。

这种CSS动画的等价物：

.css-animation-ease {
  animation-name: move-animation;
  animation-duration: 3s;
}

@keyframes move-animation {
  25% {
    transform: translate(100px, 0);
  }
  50% {
    transform: translate(100px, 100px);
    background-color: green;
  }
  75% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, 200px);
    background-color: blue;
  }
}

将是这个JS代码：

box.animate(
  [
    { easing: "ease" },
    { transform: "translate(100px, 0)", offset: 0.25, easing: "ease" },
    { transform: "translate(100px, 100px)", backgroundColor: "green", 
      offset: 0.5, easing: "ease" },
    { transform: "translate(0, 100px)", offset: 0.75, easing: "ease" },
    { transform: "translate(0, 200px)", backgroundColor: "blue", easing: "ease" },
  ],
  { duration: 3000 }
);

但是，您不需要传递 offset 和 easing 参数。如果省略它们，则关键帧将均匀分布，并且您可以使用 easing 选项定义计时函数，该选项将应用于整个动画。

    box.animate(
        [
            {},
            { transform: "translate(100px, 0)" },
            { transform: "translate(100px, 100px)", backgroundColor: "green" },
            { transform: "translate(0, 100px)" },
            { transform: "translate(0, 200px)", backgroundColor: "blue" },
        ],
        { duration: 3000, easing: "ease" }
    );

---

下面是比较这两种方法的示例（CSS 动画与 Web 动画 API）

document.getElementById("animateAll").addEventListener("click", () => {
  for (const btn of document.querySelectorAll(".examples button")) {
    btn.click();
  }
});

document
  .getElementById("cssAnimationLinearBtn")
  .addEventListener("click", () => {
    const box = document.getElementById("cssAnimationLinear");
    box.classList.add("css-animation-linear");
    box.addEventListener("animationend", () => {
      box.classList.remove("css-animation-linear");
    });
  });

document.getElementById("cssAnimationEaseBtn").addEventListener("click", () => {
  const box = document.getElementById("cssAnimationEase");
  box.classList.add("css-animation-ease");
  box.addEventListener("animationend", () => {
    box.classList.remove("css-animation-ease");
  });
});

document
  .getElementById("webAnimationLinearBtn")
  .addEventListener("click", () => {
    const box = document.getElementById("webAnimationLinear");
    box.animate(
      [
        {},
        { transform: "translate(100px, 0)" },
        { transform: "translate(100px, 100px)", backgroundColor: "green" },
        { transform: "translate(0, 100px)" },
        { transform: "translate(0, 200px)", backgroundColor: "blue" },
      ],
      { duration: 3000 }
    );
  });

document
  .getElementById("webAnimationEaseOffsetBtn")
  .addEventListener("click", () => {
    const box = document.getElementById("webAnimationEaseOffset");
    box.animate(
      [
        { easing: "ease" },
        { transform: "translate(100px, 0)", offset: 0.25, easing: "ease" },
        {
          transform: "translate(100px, 100px)",
          backgroundColor: "green",
          offset: 0.5,
          easing: "ease",
        },
        { transform: "translate(0, 100px)", offset: 0.75, easing: "ease" },
        {
          transform: "translate(0, 200px)",
          backgroundColor: "blue",
          easing: "ease",
        },
      ],
      { duration: 3000 }
    );
  });

document.getElementById("webAnimationEaseBtn").addEventListener("click", () => {
  const box = document.getElementById("webAnimationEase");
  box.animate(
    [
      {},
      { transform: "translate(100px, 0)" },
      { transform: "translate(100px, 100px)", backgroundColor: "green" },
      { transform: "translate(0, 100px)" },
      { transform: "translate(0, 200px)", backgroundColor: "blue" },
    ],
    { duration: 3000, easing: "ease" }
  );
});

.examples {
  display: grid;
  grid-template-columns: repeat(5, 130px);
}

.box {
  width: 30px;
  height: 30px;
  background-color: red;
}

.box.css-animation-linear {
  animation: move-animation 3s linear 1;
}

.box.css-animation-ease {
  animation-name: move-animation;
  animation-duration: 3s;
}

@keyframes move-animation {
  25% {
    transform: translate(100px, 0);
  }
  50% {
    transform: translate(100px, 100px);
    background-color: green;
  }
  75% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, 200px);
    background-color: blue;
  }
}

<button id="animateAll">Animate all</button>
<div class="examples">
    <div>
        <span style="color:brown">CSS Animation API (linear)</span>
        <button id="cssAnimationLinearBtn">Animate</button>
        <div id="cssAnimationLinear" class="box"></div>
    </div>
    <div>
        <span style="color:green">CSS Animation API (ease)</span>
        
        <button id="cssAnimationEaseBtn">Animate</button>
        <div id="cssAnimationEase" class="box"></div>
    </div>
    <div>
        <span style="color:brown">Web Animation API (linear)</span>
        <button id="webAnimationLinearBtn">Animate</button>
        <div id="webAnimationLinear" class="box"></div>
    </div>
    <div>
        <span style="color:green">Web Animation API (ease, offset)</span>
        <button id="webAnimationEaseOffsetBtn">Animate</button>
        <div id="webAnimationEaseOffset" class="box"></div>
    </div>
    <div>
        <strong>Web Animation API (ease)</strong>
        <button id="webAnimationEaseBtn">Animate</button>
        <div id="webAnimationEase" class="box"></div>
    </div>
</div>

Answer 4

给你一些参考：http://www.w3.org/TR/css3-animations/

更具体地说：http://www. w3.org/TR/css3-animations/#timing-functions-for-keyframes-

您可能想要进行动画堆叠，例如在多个关键帧动画中移动到一个位置，然后移动到另一个位置，然后移动到另一个位置，而不仅仅是一。