React Web 動畫的 5 種創建方式，每一種都不簡單

你是我的 7年前發布 | 25K 次閱讀 React ReactNative 移動開發

以前一直投入在 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

.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;
}

一個是它原始的樣式，一個是它 focus 后的樣式

下面，我們就開始書寫我們的 React 組件

在此，推薦一個在線的 React VS Code IDE ，真的很強大，讀者不想構建自己的 React app ，可以在其中檢驗以下代碼的正確性

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>
    );
  }
}

我們有一個 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

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',
  }
}

我們有一個 disabled 的 state ，初始值為 true
onChange 方法會獲取用戶的輸入，當輸入非空時，就切換 disabled 的值
根據 disabled 的值，確定是否將 buttonEnabled 添加到 button 中

React Motion

React Motion 是 Cheng Lou 書寫的一個非常不錯的開源項目。它的思想是你可以對 Motion 組件進行簡單的樣式設置，然后你就可以在回調函數中通過這些值，享受動畫帶來的樂趣

對于絕大多數的動畫組件，我們往往不希望對動畫屬性（寬高、顏色等）的變化時間做硬編碼處理， react-motion 提供的 spring 函數就是用來解決這一需求的，它可以逼真地模仿真實的物理效果，也就是我們常見的各類緩動效果

下面是一個森破的示例

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

這是官方提供的幾個 demo ，真的可以是不看不知道，一看嚇一跳

贊同者： React Motion 可以在 React Web 中使用，也可以在 React Native 中使用，因為它是跨平臺的。其中的 spring 概念最開始對我來說感覺挺陌生，然而上手之后，發現它真的很神奇，并且，它有很詳細的 API

反對者：在某些情況下，他不如純 CSS / JS 動畫，雖然它有不錯的 API ，容易上手，但也需要學習成本

為了使用它，首先我們要用 yarn 或 npm 安裝它

yarn add react-motion

在下面的實例中，我們將創建一個 dropdown 菜單，當點擊按鈕時，下拉菜單友好展開

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',
  },
}

我們從 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 是一個神奇的插值函數，我們將在下面看到

反對者：基于推ter 的交流，它目前貌似不是 100% 的穩定，在老的瀏覽器中的，存在前綴和性能的問題，而且，它也有學習成本

為了使用 Animated ，我們首先還是要用 yarn 或 npm 安裝它

yarn add animated

在下面的實例中，我們將模擬在提交表單成功后顯示的動畫 message

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)',
  },
}

從 animated 中 import Animated 和 Easing
用 new Animated.Value(0) 創建一個值為 0 的類屬性 - animatedValue
創建 animate 方法，處理所有的動畫，首先通過 this.animatedValue.setValue(0) 初始化動畫值，實現的效果就是每次重新執行該動畫，然后調用 Animated.timing ， animatedValue 作為第一個參數傳遞，配置對象作為第二個參數，一個設置最終動畫值，一個設置持續時間，一個設置緩動效果
在 render 中，我們用 interpolate 方法創建 marginLeft 對象，包含 inputRange 和 outputRange 數組，我們使用此對象作為 UI 中 message 的 style 屬性
我們使用 Animated.div 替代默認的 div
我們將 animatedValue 和 marginLeft 作為 Animated.div 的 style 屬性

Velocity React

Velocity React 是基于已經存在的 Velocity 建立起來的

贊同者：上手容易， API 簡單明了，相對其他庫更易于掌握

反對者：有些不得不克服的問題，比如 componentDidMount 后動畫并沒有真正地起作用等，而且，它不跨平臺

下面是一個森破的示例

<VelocityComponent
  animation={{ opacity: this.state.showSubComponent ? 1 : 0 }}      
  duration={500}
>
  <MySubComponent/>
</VelocityComponent>

首先還是要用 yarn 或 npm 安裝它

yarn add velocity-react

在下面的實例中，我們將創建一個很酷的動畫輸入

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,
  }
}

從 velocity-react 中 import VelocityComponent
我們要創建一個可重復使用的組件來滿足每個 letter 的動畫
在這個組件中，我們將 animation 的 opacity 設為 1 ， marginTop 設為 0 ，這些值代表著傳入子組件的重寫值，即當組件被創建時，組件的 opacity 會由初始的 0 變為 1 ， marginTop 會由初始的 100 變為 0 ，我們還設置了 500 ms 的持續時間，最后值得一提的是 runOnMount 屬性，它的意思是在組件掛載或創建完后執行該動畫
其中的 onChange 方法會獲取用戶的每次輸入，并創建一個由 VelocityLetter 組成的新數組
在 render 中，我們就使用該數組在 UI 中渲染 letters

總結

總的來說，基本的動畫，我會選擇 JS style ，復雜的動畫，我更偏向 React Motion 。而對于 React Native ，我還是堅持使用 Animated ，一旦 Animated 成熟，在 Web 中可能也會投入使用，目前，我真的很享受 React Motion

原文鏈接 : React Animations in Depth

來自：https://segmentfault.com/a/1190000010645631

本文由用戶你是我的自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1502713158794.html

React ReactNative 移動開發

React Web 動畫的 5 種創建方式，每一種都不簡單

CSS animation

JS Style

React Motion

Animated

Velocity React

總結

相關經驗

相關資訊

相關文檔

目錄