over 3 years ago

範例如下

import React, { Component } from 'react';
import { Motion, spring} from 'react-motion';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      action : true
    };
    this._onAction = this._onAction.bind(this);
    this.handleRest = this.handleRest.bind(this);

  }
  // 執行動畫
  _onAction(e) {
    this.setState({action: !this.state.action});
  }
  // 動畫結束後執行
  handleRest() {
      console.log("here");
  }
  render() {
    // 設定預設 Style
    let defaultStyle = {width: 0, height: 0};
    if (this.state.action) {
      defaultStyle.width = 100;
      defaultStyle.height = 200;
    }
    // 設定動畫的 style 使用 spring 函數來控制樣式的數字變化
    let actionStyle = {width: spring(defaultStyle.width, {stiffness: 267, damping: 13}), height: spring(defaultStyle.height, {stiffness: 267, damping: 13})};
    return (
      <div>
        <input type="button" value="Action" onClick={this._onAction} />
        <Motion ref="motion" onRest={this.handleRest} defaultStyle={defaultStyle} style={actionStyle}>
          {interpolatingStyle => <div  style={{width: interpolatingStyle.width, height : interpolatingStyle.height, background:'black'}} />}
        </Motion>
      </div>
    );
  }
}

export default App;

defaultStyle 可預設初始 style (可不設定, 此範例可直接拿掉執行)
style 配置所要執行的動畫屬性 (必須設定)
兩種 style 的樣式必須為數字型態

spring函數 是用來控制樣式屬性數字的變化
可搭配 stiffnessdamping 來控制數字的增減速度, 來達成搖晃的效果
呼叫方式

// 使用預設的 {stiffness: 170, damping: 26} 
spring(10) 
// 自行指定 stiffness 及 damping 參數
spring(100, {stiffness: 267, damping: 13})
// 使用 presets 來簡化配置 stiffness 及 damping
import { Motion, spring, presets} from 'react-motion';
spring(10, presets.wobbly)

對於 stiffnessdamping 的搖晃程度可參考官方提供的模擬環境
http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/
presets 的配置值可參考
https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/presets.js

interpolatingStyle 會依 style 執行的 spring 來動態呈現樣式屬性的數字變化

//直接配置
{interpolatingStyle => <div  style={interpolatingStyle} />}
//呈現格式
<div style="width: 100px; height: 200px;"></div>

//呼叫屬性配置
{interpolatingStyle => <div  style={{width: interpolatingStyle.width, height : interpolatingStyle.height, background:'black'}} />}
//呈現格式
<div style="width: 100px; height: 200px; background: black;"></div>

還有 StaggeredMotion 及 TransitionMotion 供使用
可參考官方文件
https://github.com/chenglou/react-motion

← 使用 PubSubJS 來聯繫 Component 之間的資料 React 使用 create-react-app 配置 mobx todo MVVM 範例 →
 
comments powered by Disqus