专栏名称: 前端外刊评论
最新、最前沿的前端资讯，最有深入、最干前端相关的技术译文。
目录
相关文章推荐
商务河北  ·  经开区“美•强•优”三重奏 ·  16 小时前  
云南省人民政府  ·  在线访谈丨我省如何构建国土空间新格局？省自然 ... ·  昨天  
云南省人民政府  ·  在线访谈丨我省如何构建国土空间新格局？省自然 ... ·  昨天  
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势 ·  昨天  
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势 ·  昨天  
前端早读课  ·  【第3452期】React 开发中使用开闭原则 ·  2 天前  
前端早读课  ·  【第3451期】前端 TypeError ... ·  3 天前  
51好读  ›  专栏  ›  前端外刊评论

React Web 动画的 5 种创建方式，每一种都不简单

前端外刊评论  · 公众号  · 前端  · 2017-08-16 21:59

正文

感谢 @枫上雾棋 的投稿，本文翻译自 React Animations in Depth。

以前一直投入在 React Native 中，写动画的时候不是用 CSS 中的 transitions / animations，就是依赖像 GreenSock 这样的库，最近转向 Web，在 Tweet 得到很多大佬关于React Web 动画 的回应，于是决定分享给大家，如有其他见解，非常欢迎在下面评论中交流

以下便是本文要分享的创建 React 动画 的几种方式

  • CSS animation

  • JS Style

  • React Motion

  • Animated

  • Velocity React

下面，勒次个特斯大特一特

CSS animation

给元素添加 class 是最简单，最常见的书写方式。如果你的 app 正在使用 CSS，那么这将是你最愉快的选择

赞同者： 我们只需修改 opacity 和 transform 这样的属性，就可构建基本的动画，而且，在组件中，我们可以非常容易地通过 state 去更新这些值

反对者：这种方式并不跨平台，在 React Native 中就不适用，而且，对于较复杂的动画，这种方式难以控制

接下来，我们通过一个实例来体验一下这种创建方式：当 input focus 的时候，我们增加它的宽度

首先，我们要创建两个 input 要用到的 class 

  1. .input {
  2.   width: 150px;
  3.   padding: 10px;
  4.   font-size: 20px;
  5.   border: none;
  6.   border-radius: 4px;
  7.   background-color: #dddddd;
  8.   transition: width .35s linear;
  9.   outline: none;
  10. }




    

  12. .input-focused {
  13.   width: 240px;
  14. }

一个是它原始的样式，一个是它 focus 后的样式

下面，我们就开始书写我们的 React 组件

在此，推荐一个 在线的 React VS Code IDE，真的很强大，读者不想构建自己的 React app，可以在其中检验以下代码的正确性 

  1. class App extends Component {
  2.   state = {
  3.     focused: false,
  4.   }
  6.   componentDidMount() {
  7.     this




    
._input.addEventListener('focus', this.focus);
  8.     this._input.addEventListener('blur', this.focus);
  9.   }
  11.   focus = () => {
  12.     this.setState(prevState => ({
  13.       focused: !prevState.focused,
  14.     }));
  15.   




    
}
  17.   render() {
  18.     return (
  19.       <div className="App">
  20.         <div className="container">
  21.           <input
  22.             ref={input => this




    
._input = input}
  23.             className={['input', this.state.focused && 'input-focused'].join(' ')}
  24.           />
  25.         div>
  26.       div>
  27.     );
  28.   }
  29. }

  • 我们有一个 focused 的 state，初始值为 false，我们通过更新该值来创建我们的动画

  • 在 componentDidMount 中，我们添加两个监听器，一个 focus，一个 blur，指定的回调函数都是 focus

  • focus 方法会获取之前 focused 的值，并负责切换该值

  • 在 render 中，我们通过 state 来改变 input 的 classNames，从而实现我们的动画

JS Style

JavaScipt styles 跟 CSS 中的 classes 类似，在 JS 文件中，我们就可以拥有所有逻辑

赞同者：跟 CSS动画 一样，且它的表现更加清晰。它也不失为一个好方法，可以不必依赖任何 CSS

反对者：跟 CSS动画 一样，也是不跨平台的，且动画一旦复杂，也难以控制

在下面的实例中，我们将创建一个 input，当用户输入时，我们将一个 button 从 disable 转变为 enable 

  1. class App




    
 extends Component {
  2.   state = {
  3.     disabled: true,
  4.   }
  6.   onChange = (e) => {
  7.     const length = e.target.value.length;
  8. 




    

  9.     if (length > 0) {
  10.       this.setState({ disabled: false });
  11.     } else {
  12.       this.setState({ disabled: true });
  13.     




    
}
  14.   }
  15.   render() {
  16.     const { disabled } = this.state;
  17.     const label = disabled ? 'Disabled' : 'Submit';
  19.     




    
return (
  20.       <div style={styles.App}>
  21.         <input
  22.           style={styles.input}
  23.           onChange={this.onChange}
  24.         




    
/>
  25.         <button
  26.           style={Object.assign({},
  27.             styles.button,
  28.             !this.state.disabled && styles.buttonEnabled
  29.           




    
)}
  30.           disabled={disabled}
  31.         >
  32.           {label}
  33.         button>
  34.       div>
  35.     




    
);
  36.   }
  37. }
  40. const styles = {
  41.   




    
App: {
  42.     display: 'flex',
  43.     justifyContent: 'left',
  44.   },
  45.   input: {
  46.     marginRight




    
: 10,
  47.     padding: 10,
  48.     width: 190,
  49.     fontSize: 20,
  50.     border




    
: 'none',
  51.     backgroundColor: '#ddd',
  52.     outline: 'none',
  53.   },
  54.   button: {
  55.     width




    
: 90,
  56.     height: 43,
  57.     fontSize: 17,
  58.     border: 'none',
  59.     borderRadius:




    
 4,
  60.     transition: '.25s all',
  61.     cursor: 'pointer',
  62.   },
  63.   buttonEnabled: {
  64.     width




    
: 120,
  65.     backgroundColor: '#ffc107',
  66.   }
  67. }

  • 我们有一个 disabled 的 state，初始值为 true

  • onChange 方法会获取用户的输入，当输入非空时，就切换 disabled 的值

  • 根据 disabled 的值，确定是否将 buttonEnabled 添加到 button 中

React Motion

React Motion 是 Cheng Lou 书写的一个非常不错的开源项目。它的思想是你可以对Motion 组件 进行简单的样式设置，然后你就可以在回调函数中通过这些值，享受动画带来的乐趣

对于绝大多数的动画组件，我们往往不希望对动画属性（宽高、颜色等）的变化时间做硬编码处理，react-motion 提供的 spring 函数就是用来解决这一需求的，它可以逼真地模仿真实的物理效果，也就是我们常见的各类缓动效果

下面是一个森破的示例 

  1. <




    
Motion style={{ x: spring(this.state.x) }}>
  2.   {
  3.     ({ x }) =>
  4.       <div style={{ transform: `translateX(${x}px)` }} />




    

  5.   }
  6. Motion>

这是官方提供的几个 demo，真的可以是不看不知道，一看吓一跳

  • Chat Heads

  • Draggable Balls

  • TodoMVC List Transition

  • Water Ripples

  • Draggable List

赞同者：React Motion 可以在 React Web 中使用，也可以在 React Native 中使用，因为它是跨平台的。其中的 spring 概念最开始对我来说感觉挺陌生，然而上手之后，发现它真的很神奇，并且，它有很详细的 API

反对者：在某些情况下，他不如纯 CSS / JS 动画，虽然它有不错的 API，容易上手，但也需要学习成本

为了使用它，首先我们要用 yarn 或 npm 安装它 

  1. yarn add react




    
-motion

在下面的实例中，我们将创建一个 dropdown 菜单，当点击按钮时，下拉菜单友好展开 

  1. class App extends Component {
  2.   state = {
  3.     height




    
: 38,
  4.   }
  6.   animate = () => {
  7.     




    
this.setState((state) => ({ height: state.height === 233 ? 38 : 233 }));
  8.   }
  10.   render() {
  11.     




    
return (
  12.       <div className="App">
  13.         <div style={styles.button} onClick={this.animate}>Animatediv>
  14.         




    
<Motion
  15.           style={{ height: spring(this.state.height) }}
  16.         >
  17.           {
  18.             




    
({ height }) =>
  19.             <div style={Object.assign({}, styles.menu, { height } )}>
  20.               <p style={styles.selection}>Selection 1p>
  21.               <




    
p style={styles.selection}>Selection 2p>
  22.               <p style={styles.selection}>Selection 3p>
  23.               <p style={styles.selection}>Selection 4p>
  24.               <




    
p style={styles.selection}>Selection 5p>
  25.               <p style={styles.selection}>Selection 6p>
  26.             div>
  27.           }
  28.         




    
Motion>
  29.       div>
  30.     );
  31.   }
  32. }




    

  34. const styles = {
  35.   menu: {
  36.     marginTop




    
: 20,
  37.     width: 300,
  38.     border: '2px solid #ddd',
  39.     overflow: 'hidden',
  40.   




    
},
  41.   button: {
  42.     display: 'flex',
  43.     width: 200,
  44.     height




    
: 45,
  45.     justifyContent: 'center',
  46.     alignItems: 'center',
  47.     border: 'none',
  48.     borderRadius




    
: 4,
  49.     backgroundColor: '#ffc107',
  50.     cursor: 'pointer',
  51.   




    
},
  52.   selection: {
  53.     margin: 0,
  54.     padding: 10,
  55.     borderBottom




    
: '1px solid #ededed',
  56.   },
  57. }

  • 我们从 react-motion 中 import Motion 和 spring

  • 我们有一个 height 的 state，初始值为 38，代表 menu 的高度

  • animate 方法设置 menu 的 height，如果 原 height 为 38，则设置新 height 为 233，如果 原 height 为 233，则设置 新 height 为 38

  • 在 render 中，我们使用 Motion 组件 包装整个 p 标签 列表，将 this.state.height 的当前值设为组件的 height，然后在组件的回调函数中使用该值作为整个下拉的高度

  • 当按钮被点击时，我们通过 this.animate 切换下拉的高度

Animated

Animated 是基于 React Native 使用的同一个动画库建立起来的

它背后的思想是创建声明式动画，通过传递配置对象来控制动画

赞同者：跨平台，它在 React Native 中已经非常稳定，如果你在 React Native 中使用过，那么你将不用再重复学习。其中的 interpolate 是一个神奇的插值函数，我们将在下面看到

反对者：基于 Twitter 的交流，它目前貌似不是 100% 的稳定，在老的浏览器中的，存在前缀和性能的问题，而且，它也有学习成本

为了使用 Animated，我们首先还是要用 yarn 或 npm 安装它 

  1. yarn add animated

在下面的实例中，我们将模拟在提交表单成功后显示的动画 message 

  1. import




    
 Animated from 'animated/lib/targets/react-dom';
  2. import Easing from 'animated/lib/Easing';
  4. class AnimatedApp extends Component {
  5.   animatedValue 




    
= new Animated.Value(0);
  7.   animate = () => {
  8.     




    
this.animatedValue.setValue(0);
  10.     Animated.timing(
  11.       this.animatedValue,




    

  12.       {
  13.         toValue: 1,
  14.         duration: 1000,
  15.         easing




    
: Easing.elastic(1),
  16.       }
  17.     ).start();
  18.   




    
}
  20.   render() {
  21.     




    
const marginLeft = this.animatedValue.interpolate({
  22.       inputRange: [0, 1],
  23.       outputRange: [-120, 0],
  24.     




    
});
  26.     return (
  27.       




    
<div className="App">
  28.           <div style={styles.button} onClick={this.animate}>Animatediv>
  29.           <Animated.div




    

  30.             style={
  31.               Object.assign(
  32.                 {},
  33.                 styles




    
.box,
  34.                 { opacity: this.animatedValue, marginLeft })}
  35.           




    
>
  36.             <p>Thanks for your submission!p>
  37.           Animated.div>
  38.       




    
div>- 我们将 `animatedValue`
  39.  和 `marginLeft`  作为 `Animated.div ` 的 `style` 属性，  );
  40.   




    
}
  41. }
  43. const styles 




    
= {
  44.   button: {
  45.     display: 'flex',
  46.     width




    
: 125,
  47.     height: 50,
  48.     justifyContent: 'center',
  49.     alignItems




    
: 'center',
  50.     border: 'none',
  51.     borderRadius: 4,
  52.     backgroundColor




    
: '#ffc107',
  53.     cursor: 'pointer',
  54.   },
  55.   box:






请到「今天看啥」查看全文


推荐文章
商务河北  ·  经开区“美•强•优”三重奏
16 小时前
云南省人民政府  ·  在线访谈丨我省如何构建国土空间新格局？省自然资源厅为您解读
昨天
云南省人民政府  ·  在线访谈丨我省如何构建国土空间新格局？省自然资源厅为您解读
昨天
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势
昨天
奇舞精选  ·  从 DeepSeek 看25年前端的一个小趋势
昨天
前端早读课  ·  【第3452期】React 开发中使用开闭原则
2 天前
前端早读课  ·  【第3451期】前端 TypeError 错误永久消失术
3 天前
下厨房  ·  线下 | 青岛菜市场大冒险
8 年前
i黑马  ·  《我是创始人》冠军孙涛勇：谋定而后动
8 年前
千人智库  ·  远离学术界——一个美国大学教授的辞职吐槽
7 年前
科学解码  ·  人类正ing经历生物大灭绝！速度远超预期！
7 年前
天津北方演艺集团  ·  全国巡演已开始，看专家评议天津京剧院《康熙大帝》（附天津京剧院近期剧目信息）
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!