React Web 动画的 5 种创建方式，每一种都不简单
你是我的
7年前
<p>以前一直投入在 React Native 中，写动画的时候不是用 CSS 中的 transitions / animations ，就是依赖像 GreenSock 这样的库，最近转向 Web ，在 Tweet 得到很多大佬关于 React Web 动画 的回应，于是决定分享给大家。</p> <p>以下便是本文要分享的创建 React 动画 的几种方式</p> <ul> <li>CSS animation</li> <li>JS Style</li> <li><a href="/misc/goto?guid=4959751352269886581" rel="nofollow,noindex">React Motion</a></li> <li><a href="/misc/goto?guid=4959751352350151623" rel="nofollow,noindex">Animated</a></li> <li><a href="/misc/goto?guid=4959751352445590921" rel="nofollow,noindex">Velocity React</a></li> </ul> <p>下面，勒次个特斯大特一特</p> <h2>CSS animation</h2> <p>给元素添加 class 是最简单，最常见的书写方式。如果你的 app 正在使用 CSS ，那么这将是你最愉快的选择</p> <p>赞同者 ： 我们只需修改 opacity 和 transform 这样的属性，就可构建基本的动画，而且，在组件中，我们可以非常容易地通过 state 去更新这些值</p> <p>反对者 ：这种方式并 不跨平台 ，在 React Native 中就不适用，而且，对于较复杂的动画，这种方式 难以控制</p> <p>接下来，我们通过一个实例来体验一下这种创建方式： 当 input focus 的时候，我们增加它的宽度</p> <p>首先，我们要创建两个 input 要用到的 class</p> <pre> <code class="language-java">.input { width: 150px; padding: 10px; font-size: 20px; border: none; border-radius: 4px; background-color: #dddddd; transition: width .35s linear; outline: none; } .input-focused { width: 240px; }</code></pre> <p>一个是它 原始 的样式，一个是它 focus 后的样式</p> <p>下面，我们就开始书写我们的 React 组件</p> <p>在此，推荐一个 <a href="/misc/goto?guid=4959751352529703867" rel="nofollow,noindex">在线的 React VS Code IDE</a> ，真的很强大，读者不想构建自己的 React app ，可以在其中检验以下代码的正确性</p> <p><img src="https://simg.open-open.com/show/34e12b363e28584285837b5b9fbaca03.gif"></p> <pre> <code class="language-java">class App extends Component { state = { focused: false, } componentDidMount() { this._input.addEventListener('focus', this.focus); this._input.addEventListener('blur', this.focus); } focus = () => { this.setState(prevState => ({ focused: !prevState.focused, })); } render() { return ( <div className="App"> <div className="container"> <input ref={input => this._input = input} className={['input', this.state.focused && 'input-focused'].join(' ')} /> </div> </div> ); } }</code></pre> <ul> <li>我们有一个 focused 的 state ，初始值为 false ，我们通过 更新该值 来创建我们的动画</li> <li>在 componentDidMount 中，我们添加两个 监听器 ，一个 focus ，一个 blur ，指定的 回调函数都 是 focus</li> <li>focus 方法会获取之前 focused 的值，并负责 切换 该值</li> <li>在 render 中，我们通过 state 来改变 input 的 classNames ，从而实现我们的动画</li> </ul> <h2>JS Style</h2> <p>JavaScipt styles 跟 CSS 中的 classes 类似，在 JS 文件中，我们就可以拥有所有逻辑</p> <p>赞同者 ：跟 CSS 动画 一样，且它的表现更加清晰。它也不失为一个好方法，可以不必依赖任何 CSS</p> <p>反对者 ：跟 CSS 动画 一样，也是 不跨平台 的，且动画一旦复杂，也 难以控制</p> <p>在下面的实例中，我们将创建一个 input ，当用户输入时，我们将一个 button 从 disable 转变为 enable</p> <p><img src="https://simg.open-open.com/show/204b6a2d062a79cb40464757c4080aec.gif"></p> <pre> <code class="language-java">class App extends Component { state = { disabled: true, } onChange = (e) => { const length = e.target.value.length; if (length > 0) { this.setState({ disabled: false }); } else { this.setState({ disabled: true }); } } render() { const { disabled } = this.state; const label = disabled ? 'Disabled' : 'Submit'; return ( <div style={styles.App}> <input style={styles.input} onChange={this.onChange} /> <button style={Object.assign({}, styles.button, !this.state.disabled && styles.buttonEnabled )} disabled={disabled} > {label} </button> </div> ); } } const styles = { App: { display: 'flex', justifyContent: 'left', }, input: { marginRight: 10, padding: 10, width: 190, fontSize: 20, border: 'none', backgroundColor: '#ddd', outline: 'none', }, button: { width: 90, height: 43, fontSize: 17, border: 'none', borderRadius: 4, transition: '.25s all', cursor: 'pointer', }, buttonEnabled: { width: 120, backgroundColor: '#ffc107', } }</code></pre> <ul> <li>我们有一个 disabled 的 state ，初始值为 true</li> <li>onChange 方法会获取用户的输入，当输入非空时，就切换 disabled 的值</li> <li>根据 disabled 的值，确定是否将 buttonEnabled 添加到 button 中</li> </ul> <h2>React Motion</h2> <p>React Motion 是 <a href="/misc/goto?guid=4959751352608868134" rel="nofollow,noindex">Cheng Lou</a> 书写的一个非常不错的开源项目。它的思想是你可以对 Motion 组件 进行简单的 样式设置 ，然后你就可以在 回调函数 中通过这些值，享受动画带来的乐趣</p> <p>对于绝大多数的动画组件，我们往往不希望对 动画属性 （宽高、颜色等）的变化时间做 硬编码 处理， react-motion 提供的 spring 函数就是用来解决这一需求的，它可以逼真地模仿真实的物理效果，也就是我们常见的各类 缓动效果</p> <p>下面是一个 森破 的示例</p> <pre> <code class="language-java"><Motion style={{ x: spring(this.state.x) }}> { ({ x }) => <div style={{ transform: `translateX(${x}px)` }} /> } </Motion></code></pre> <p>这是官方提供的几个 demo ，真的可以是 不看不知道，一看吓一跳</p> <ul> <li><a href="/misc/goto?guid=4959751352685758187" rel="nofollow,noindex">Chat Heads</a></li> <li><a href="/misc/goto?guid=4959751352771233584" rel="nofollow,noindex">Draggable Balls</a></li> <li><a href="/misc/goto?guid=4959751352856930270" rel="nofollow,noindex">TodoMVC List Transition</a></li> <li><a href="/misc/goto?guid=4959751352941354056" rel="nofollow,noindex">Water Ripples</a></li> <li><a href="/misc/goto?guid=4959751353024178366" rel="nofollow,noindex">Draggable List</a></li> </ul> <p>赞同者 ： React Motion 可以在 React Web 中使用，也可以在 React Native 中使用，因为它是跨平台的。其中的 spring 概念最开始对我来说感觉挺陌生，然而上手之后，发现它真的很 神奇 ，并且，它有很详细的 API</p> <p>反对者 ：在某些情况下，他不如 纯 CSS / JS 动画 ，虽然它有不错的 API ，容易上手，但也需要学习成本</p> <p>为了使用它，首先我们要用 yarn 或 npm 安装它</p> <pre> <code class="language-java">yarn add react-motion</code></pre> <p>在下面的实例中，我们将创建一个 dropdown 菜单 ，当点击按钮时，下拉菜单友好展开</p> <p><img src="https://simg.open-open.com/show/e49f3a4bf698d2c8ad341252be5fd4d6.gif"></p> <pre> <code class="language-java">class App extends Component { state = { height: 38, } animate = () => { this.setState((state) => ({ height: state.height === 233 ? 38 : 233 })); } render() { return ( <div className="App"> <div style={styles.button} onClick={this.animate}>Animate</div> <Motion style={{ height: spring(this.state.height) }} > { ({ height }) => <div style={Object.assign({}, styles.menu, { height } )}> <p style={styles.selection}>Selection 1</p> <p style={styles.selection}>Selection 2</p> <p style={styles.selection}>Selection 3</p> <p style={styles.selection}>Selection 4</p> <p style={styles.selection}>Selection 5</p> <p style={styles.selection}>Selection 6</p> </div> } </Motion> </div> ); } } const styles = { menu: { marginTop: 20, width: 300, border: '2px solid #ddd', overflow: 'hidden', }, button: { display: 'flex', width: 200, height: 45, justifyContent: 'center', alignItems: 'center', border: 'none', borderRadius: 4, backgroundColor: '#ffc107', cursor: 'pointer', }, selection: { margin: 0, padding: 10, borderBottom: '1px solid #ededed', }, }</code></pre> <p>``</p> <ul> <li>我们从 react-motion 中 import Motion 和 spring</li> <li>我们有一个 height 的 state ，初始值为 38 ，代表 menu 的高度</li> <li>animate 方法设置 menu 的 height ，如果 原 height 为 38 ，则设置 新 height 为 233 ，如果 原 height 为 233 ，则设置 新 height 为 38</li> <li>在 render 中，我们使用 Motion 组件 包装整个 p 标签 列表，将 this.state.height 的当前值设为组件的 height ，然后在组件的 回调函数 中使用该值作为整个下拉的高度</li> <li>当按钮被点击时，我们通过 this.animate 切换下拉的高度</li> </ul> <h2>Animated</h2> <p>Animated 是基于 React Native 使用的同一个动画库建立起来的</p> <p>它背后的思想是创建 声明式动画 ，通过 传递配置对象来控制动画</p> <p>赞同者 ： 跨平台 ，它在 React Native 中已经非常稳定，如果你在 React Native 中使用过，那么你将不用再重复学习。其中的 interpolate 是一个神奇的插值函数，我们将在下面看到</p> <p>反对者 ：基于 推ter 的交流，它目前貌似不是 100% 的稳定，在老的浏览器中的，存在 前缀 和 性能 的问题，而且，它也有学习成本</p> <p>为了使用 Animated ，我们首先还是要用 yarn 或 npm 安装它</p> <pre> <code class="language-java">yarn add animated</code></pre> <p>在下面的实例中，我们将模拟在提交表单成功后显示的动画 message</p> <p><img src="https://simg.open-open.com/show/bfcec915be7c2143a50deaeaa3edd1f0.gif"></p> <pre> <code class="language-java">import Animated from 'animated/lib/targets/react-dom'; import Easing from 'animated/lib/Easing'; class AnimatedApp extends Component { animatedValue = new Animated.Value(0); animate = () => { this.animatedValue.setValue(0); Animated.timing( this.animatedValue, { toValue: 1, duration: 1000, easing: Easing.elastic(1), } ).start(); } render() { const marginLeft = this.animatedValue.interpolate({ inputRange: [0, 1], outputRange: [-120, 0], }); return ( <div className="App"> <div style={styles.button} onClick={this.animate}>Animate</div> <Animated.div style={ Object.assign( {}, styles.box, { opacity: this.animatedValue, marginLeft })} > <p>Thanks for your submission!</p> </Animated.div> </div>- 我们将 `animatedValue` 和 `marginLeft` 作为 `Animated.div ` 的 `style` 属性， ); } } const styles = { button: { display: 'flex', width: 125, height: 50, justifyContent: 'center', alignItems: 'center', border: 'none', borderRadius: 4, backgroundColor: '#ffc107', cursor: 'pointer', }, box: { display: 'inline-block', marginTop: 10, padding: '0.6rem 2rem', fontSize:'0.8rem', border: '1px #eee solid', borderRadius: 4, boxShadow: '0 2px 8px rgba(0,0,0,.2)', }, }</code></pre> <ul> <li>从 animated 中 import Animated 和 Easing</li> <li>用 new Animated.Value(0) 创建一个值为 0 的类属性 - animatedValue</li> <li>创建 animate 方法，处理所有的动画，首先通过 this.animatedValue.setValue(0) 初始化动画值，实现的效果就是每次 重新执行 该动画，然后调用 Animated.timing ， animatedValue 作为第一个参数传递， 配置对象 作为第二个参数，一个设置 最终动画值 ，一个设置 持续时间 ，一个设置 缓动效果</li> <li>在 render 中，我们用 interpolate 方法创建 marginLeft 对象，包含 inputRange 和 outputRange 数组，我们使用此对象作为 UI 中 message 的 style 属性</li> <li>我们使用 Animated.div 替代默认的 div</li> <li>我们将 animatedValue 和 marginLeft 作为 Animated.div 的 style 属性</li> </ul> <h2>Velocity React</h2> <p>Velocity React 是基于已经存在的 Velocity 建立起来的</p> <p>赞同者 ：上手容易， API 简单明了，相对其他库更易于掌握</p> <p>反对者 ：有些不得不克服的问题，比如 componentDidMount 后动画并没有真正地起作用等，而且，它 不跨平台</p> <p>下面是一个 森破 的示例</p> <pre> <code class="language-java"><VelocityComponent animation={{ opacity: this.state.showSubComponent ? 1 : 0 }} duration={500} > <MySubComponent/> </VelocityComponent></code></pre> <p>首先还是要用 yarn 或 npm 安装它</p> <pre> <code class="language-java">yarn add velocity-react</code></pre> <p>在下面的实例中，我们将创建一个很酷的 动画输入</p> <p><img src="https://simg.open-open.com/show/15dcf4b0275a48bd9eb19f73a58132a8.gif"></p> <pre> <code class="language-java">import { VelocityComponent } from 'velocity-react'; const VelocityLetter = ({ letter }) => ( <VelocityComponent runOnMount animation={{ opacity: 1, marginTop: 0 }} duration={500} > <p style={styles.letter}>{letter}</p> </VelocityComponent> ) class VelocityApp extends Component { state = { letters: [], } onChange = (e) => { const letters = e.target.value.split(''); const arr = []; letters.forEach((l, i) => { arr.push(<VelocityLetter letter={l} />) }); this.setState({ letters: arr }); } render() { return ( <div className="App"> <div className="container"> <input onChange={this.onChange} style={styles.input} /> <div style={styles.letters}> { this.state.letters } </div> </div> </div> ); } } const styles = { input: { marginBottom: 20, padding: 8, width: 200, height: 40, fontSize: 22, backgroundColor: '#ddd', border: 'none', outline: 'none', }, letters: { display: 'flex', height: 140, }, letter: { marginTop: 100, fontSize: 22, whiteSpace: 'pre', opacity: 0, } }</code></pre> <ul> <li>从 velocity-react 中 import VelocityComponent</li> <li>我们要创建一个 可重复 使用的组件来满足每个 letter 的动画</li> <li>在这个组件中，我们将 animation 的 opacity 设为 1 ， marginTop 设为 0 ，这些值代表着传入子组件的 重写值 ，即当组件被创建时，组件的 opacity 会由初始的 0 变为 1 ， marginTop 会由初始的 100 变为 0 ，我们还设置了 500 ms 的持续时间，最后值得一提的是 runOnMount 属性，它的意思是在组件 挂载 或 创建 完后执行该动画</li> <li>其中的 onChange 方法会获取用户的每次输入，并创建一个由 VelocityLetter 组成的新数组</li> <li>在 render 中，我们就使用该数组在 UI 中渲染 letters</li> </ul> <h2>总结</h2> <p>总的来说，基本的动画，我会选择 JS style ，复杂的动画，我更偏向 React Motion 。而对于 React Native ，我还是坚持使用 Animated ，一旦 Animated 成熟，在 Web 中可能也会投入使用，目前，我真的很享受 React Motion</p> <p>原文链接 : <a href="/misc/goto?guid=4959751353107191965" rel="nofollow,noindex">React Animations in Depth</a></p> <p> </p> <p>来自：https://segmentfault.com/a/1190000010645631</p> <p> </p>