react-reveal -- 一个很酷的React动画库

React-reveal是一个非常酷的动画库。I like it.

安装

npm i react-reveal --save
# 或
yarn add react-reveal

使用

import React, { Component } from 'react';
import logo from './logo.svg';
// 导入Zoom（放大缩小）动画类
import Zoom from 'react-reveal/Zoom'; // Importing Zoom effect
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Zoom>{/* 使用放大效果 */}
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
        </Zoom>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

看非常简单吧。只需要把需要产生动效的元素放在Zoom标签中间就完成动画设置了。

动画类型

React-reveal不仅支持常见的动画效果，还支持一些特殊的效果。
常见的动画效果：

• Fade(淡入淡出)
• Flip(翻转)
• Rotate(旋转)
• Zoom(放大缩小)
• Bounce(弹跳)
• Slide(滑动)
• Roll(滚动)
• LightSpeed(光速)

特殊效果：

• Jump(跳跃)
• Flash(闪烁 blink blink ~~~)
• HeadShake(摇头)
• Jello(果冻)
• Pulse(=。= 很缓和的放大缩小一下)
• RubberBand(橡皮筋)
• Shake(抖动)
• Spin(旋转，比Rotate转的久)
• Swing(摇摆)
• Tada(-.- 带扭曲的上下摇摆)
• Wobble(摆动效果，摇摆的厉害)

when条件动画

// 条件为false，不会动
<Zoom when={false}>
  <h1>You won't see me, but I will still take space on screen</h1>
</Zoom>

// 条件为true，动起来了
<Zoom when={true}>
  <h1>I will be seen</h1>
</Zoom>

withReveal将组件赋予动画效果

function OldComponent({ innerRef, className, style }) {
  return (<div ref={innerRef} className={className} style={style}>Some content</div>);
}

const NewComponent = withReveal(OldComponent, <Fade left refProp="innerRef" />)

动画链

react-reveal可以使用Stepper，将一系列动画片段连成一整段流畅的动画。

import Stepper from 'react-reveal/Stepper';

const step = new Stepper()
      .step('navbar', 500)
      .step('title', 500)
      .step('jumbotronText', 1000);


<Flip x tag="nav" step={this.step.is('navbar')} className="navbar navbar-expand-md navbar-dark bg-dark">
      {/** ... */}
    </Flip>  
    <Zoom duration={800} step={this.step.is('circle1')}>
      {/** ... */}
    </Zoom>          
    <Fade left duration={1200} tag="h2" step={this.step.is('sideItems')}>
      {/** ... */}
    </Fade> 
    <Rotate cascade bottom right duration={1200} step={this.step.is('sideItems')} tag="ul" className="list-group">
        {/** ... */}
    </Rotate> 

一同来使用它吧，更强大的效果等你来发现~~~