前端框架

09 10月

推荐 3 个 React 动画库

2020-10-09 前端框架

推荐 3 个 React 动画库

为静态网站添加一些动画效果是一项改善用户体验的有效方式，创建视觉上漂亮的内容时，或者当想要突出一个元素从一种状态到另一种状态的过渡时，以此给用户带来视觉上的震撼，给用户留下印象。当然，并非动画越多越好，要恰到好处。

本文推荐 3 个 React 动画库，它们易于使用，并且只需增加运动量和视觉效果，就可以让事情变得有趣而不会过度使用。

React Transition Group

React Transition Group 库是一个简单和强大的实用动画库。

这个库实现效果非常简单：它唯一做的就是跟踪组件的 enter 和 exit 状态。如何处理这些信息以及决定如何制作动画，取决于开发者和及其 CSS 技能。作为一个前端开发工程师应该对行业内常见的动画效果的实现原理有一定的了解，甚至可以自己实现。实用第三方库是为了提高效率，而非取代其技能。

npm install react-transition-group --save

看看下面的示例代码：

import Header from "./header";
import Footer from "./footer";
import { useState } from "react";
import { Transition } from "react-transition-group";

const duration = 300;

const defaultStyle = {
    transition: `opacity ${duration}ms ease-in-out`,
    opacity: 0,
};

const transitionStyles = {
    entering: { opacity: 1 },
    entered: { opacity: 1 },
    exiting: { opacity: 0 },
    exited: { opacity: 0 },
};

export default function Layout({ children, title }) {
    const [inProp, setInProp] = useState(false);
    const delay = () => {
        setTimeout(() => {
            !inProp && setInProp(!inProp);
        }, 500);
    };
    delay();
    return (
        <>
            <Header title={title} />
            <main>
                <Transition in={inProp} timeout={500}>
                    {(state) => (
                        <div
                            style={{
                                ...defaultStyle,
                                ...transitionStyles[state],
                            }}
                        >
                            {children}
                        </div>
                    )}
                </Transition>
            </main>
            <Footer />
        </>
    );
}

具体可以查阅代码仓库：https://github.com/QuintionTang/react-blog/tree/animated

这个库的主要优势是入门非常简单。然而，这也是主要的缺点，因为它在很大程度上依赖于对 CSS 过渡的了解。

React Reveal

React-Reveal 与前面的例子完全相反。它没有提供基本的构建块来完成想要的所有自定义动画，而是带有一组预定义动画效果供使用。

npm install react-reveal --save

看看下面的示例代码：

import Header from "./header";
import Footer from "./footer";
import { useState } from "react";
import Fade from "react-reveal/Fade";

export default function Layout({ children, title }) {
    let [show, setShow] = useState(false);

    const delay = () => {
        setTimeout(() => {
            !show && setShow(!show);
        }, 500);
    };
    delay();
    return (
        <>
            <Header title={title} />
            <main>
                <Fade top when={show}>
                    {children}
                </Fade>
            </main>
            <Footer />
        </>
    );
}

具体可以查阅代码仓库：https://github.com/QuintionTang/react-blog/tree/animated-reveal

如果希望为应用程序添加一些微妙的效果，而不必担心 CSS、过渡和除了要导入的组件之外的任何其他事情，这绝对是一个更好的选择。

React Spring

最后，如果对于对视觉要求更高，那么可以选择 React Spring。与前两个专注于 CSS 过渡相比， React Spring 允许添加 spring-physics-based 的动画。

换句话说，使用CSS过渡，可以设置一个初始的视觉状态，以及一个最终的视觉状态，并告诉它在给定的时间内在它们之间进行过渡，但使用基于 React Spring的物理，可以创建视觉上吸引人的动画，看起来和行为“更自然”。就好像实际上是在使用弹簧来移动或拉动元素一样。

npm install react-spring --save

看看下面的示例代码：

import Header from "./header";
import Footer from "./footer";
import { useState } from "react";
import { useSpring, config, animated } from "react-spring";

export default function Layout({ children, title }) {
    const [show, setShow] = useState(true);
    const properties = {
        to: { opacity: 1 },
        from: { opacity: 0 },
        reset: true,
        delay: 200,
        config: config.molasses,
    };

    const toggleText = () => {
        setShow(!show);
        api.start({
            ...properties,
            to: { opacity: show ? 1 : 0 },
            from: { opacity: show ? 0 : 1 },
        });
    };
    const [props, api] = useSpring(() => properties);

    const delay = () => {
        setTimeout(() => {
            !show && toggleText();
        }, 500);
    };
    delay();

    return (
        <>
            <Header title={title} />
            <main>
                <animated.div style={props}>{children}</animated.div>
            </main>
            <Footer />
        </>
    );
}

具体可以查阅代码仓库：https://github.com/QuintionTang/react-blog/tree/animated-spring

reactreact-transition-groupreact-revealreact-spring