如何用React为网页制作动画

像Flash一样制作动画，但方式很酷

在当今的标准下，网络应用不仅需要速度快，看起来很酷，而且还需要给人一种活着的感觉，而后者是相当难处理好的。随着CSS变得超级强大，新的想法和概念被引入，比如动画，如果做得好，可以为用户提供难忘的体验。

CSS中的动画是一种野兽，人们正在用它做一些惊人的事情，比如动画艺术，不相信吗？看看CSS忍者安妮（@anniebombanie_）制作的这只羊驼。

在CodePen上看到笔者这里（@livecodestream）。

也许你的网络应用不需要那么复杂的程度，但对CSS和动画有很好的理解，对于构建未来的网络体验至关重要。

在这篇文章中，我们将介绍一些顶级的React动画库，它将作为一系列文章的介绍，这些文章将专注于制作漂亮的网络产品。

了解动画

CSS中的动画是指在一段时期内属性的逐渐变化。

CSS已经内置了动画，但它允许你用关键帧做更多的事情。关键帧允许在过渡期间设置一些时间点，在这些时间点上，CSS属性被赋予不同的值--让你可以选择自定义元素如何随时间演变。

传统的CSS动画

动画的核心是CSS，所以建立动画的React应用程序的一种可能性不是通过使用JS框架，而是通过使用CSS，这并不奇怪。

就像我们之前解释的，我们可以使用关键帧来定义CSS动画。让我们看一个例子：

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

在这个例子中，我们通过将一个元素从给定的位置-200px平移，然后返回到原来的位置，来创造一个弹跳的效果。

百分比表示在动画的哪个时刻，数值将达到所需的值。你可能想知道为什么我们用百分比来定义这些，而不是用秒或其他时间单位。在这一点上，我们只是创建了一个动画，但它仍然需要被应用，当我们把动画应用到一个元素上时，我们才会提供它的持续时间，以及其他属性。这给了你更多的控制，因为你可以在不同的元素中以不同的持续时间重复使用动画；很酷，对吗？

说完了，让我们把这个动画应用到一个元素上。为了做到这一点，我们使用了一些CSS属性：

animation-name：它指的是我们的动画，必须与关键帧的名称相匹配。
animation-duration：定义动画持续的时间。
animation-delay：将动画的开始时间延迟到指定的时间。
animation-iteration-count：指定动画发生多少次。指定无限次永远不会结束动画。

你可以在w3schools中阅读更多关于这些属性和更多内容。CSS动画。

让我们看看如何将我们的例子应用于一个元素：

.ball {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #EB333D;
    animation-name: ball-bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}

很简单，对吗？让我们一起看看它的实际效果。

反应器弹簧

虽然使用CSS的动画很常见，但我们可以使用React Spring这样的库来创建复杂的动画。React Spring带有非常强大的过渡、弹簧、轨迹，并支持React Hooks和React JS类组件。

当使用JavaScript构建动画时，框架和库通常会将动画的控制流委托给JavaScript，同时使用CSS来进行转换。

这有很大的优势，因为动画可以是动态的，通过简单地改变代码或用JavaScript的全部力量来控制它，但它也有一些缺点，你可能会猜到。

React Spring是这种实现方式的一个完美例子，还有什么比用一个例子来解释它更好的方法呢：

const animation = useSpring({
    from: {transform: 'translateY(0px)' },
    to: async next => {
        while (true) {
            await next({transform: 'translateY(-200px)'});
            await next({transform: 'translateY(0px)'});
        }
    }
});

这个例子是我们用CSS和关键帧构建的同一个动画，但这次我们用React Spring和JavaScript来控制动画的流程。

我们先用初始状态的CSS提供一个from 属性，然后用我们的最终值提供一个to 属性。非常有趣的是，to 状态可以是一个函数，在这样一个函数里面，我们可以建立多个步骤，或者像我们这样有一个无尽的循环动画。

这种方法使我们可以用关键帧建立任何可能的动画，而且还可以利用JavaScript的力量来实现。

现在让我们看看我们的完整例子是什么样子的。

请在 CodePen上看笔（@livecodestream）。

要在你的项目中使用React Spring，只需运行

npm i react-spring

Framer Motion

Framer Motion的工作方式与React Spring非常相似，事实上，React Spring是基于Framer Motion的设计。但是，也有一些区别。Framer Motion更倾向于用一种声明式的方法来定义转换，一切都可以通过调整动画对象的属性来简单完成。

让我们看看我们的例子，现在使用惊人的库：

<motion.div transition={{
      y: {
          duration: 1,
          yoyo: Infinity,  
          ease: "easeIn",
      }
    }}
    animate={{ y: ["0px", "-200px"] }}>
    <div className="ball"></div>
</motion.div>

我们的动画对象需要两个属性，一个是定义属性变化的动画，另一个是定义这些属性如何变化的过渡对象。

这真的很简单，让我们看看我们的完整例子是什么样子的。

要在你的项目中使用Framer Motion，只需运行

npm i framer-motion

结论

网络曾经是如此的枯燥无味，但现在网络应用是一种享受，而动画在其中起到了至关重要的作用。如果做得好，它们可以增强用户体验，但是，不要滥用，太多的动画实际上会损害用户体验。

随着动画的重要性，React需要坚实的解决方案来保持网络应用的趋势，今天我们列出了一些方法，你可以通过动画组件来使你的应用程序脱颖而出。

我今天唯一的意图是介绍这个话题和一些方法，希望能点燃你的好奇心，让你了解更多的信息，并建立自己的动画。如果你建立了一些很酷的东西，请在twitter上告诉我@bajcmartinez，我很想看看你们都能建立什么了不起的东西。

谢谢你的阅读!

如何用React为网页制作动画（附代码示例）

如何用React为网页制作动画

了解动画

传统的CSS动画

反应器弹簧

Framer Motion

结论