React實現動畫效果

class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render(): ReactElement {
    return (
      <Animated.Image                         // 可選的基本元件型別: Image, Text, View
        source={{uri: `http://i.imgur.com/XMKOH81.jpg`}}
        style={{
          flex: 1,
          transform: [                        // `transform`是一個有序陣列（動畫按順序執行）
            {scale: this.state.bounceValue},  // 將`bounceValue`賦值給 `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 設定一個較大的初始值
    Animated.spring(                          // 可選的基本動畫型別: spring, decay, timing
      this.state.bounceValue,                 // 將`bounceValue`值動畫化
      {
        toValue: 0.8,                         // 將其值以動畫的形式改到一個較小值
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // 開始執行動畫
  }
}

Animated.sequence([            // 首先執行decay動畫，結束後同時執行spring和twirl動畫
  Animated.decay(position, {   // 滑行一段距離後停止
    velocity: {x: gestureState.vx, y: gestureState.vy}, // 根據使用者的手勢設定速度
    deceleration: 0.997,
  }),
  Animated.parallel([          // 在decay之後並行執行：
    Animated.spring(position, {
      toValue: {x: 0, y: 0}    // 返回到起始點開始
    }),
    Animated.timing(twirl, {   // 同時開始旋轉
      toValue: 360,
    }),
  ]),
]).start();                    // 執行這一整套動畫序列

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100],
});

value.interpolate({
  inputRange: [-300, -100, 0, 100, 101],
  outputRange: [300,    0, 1,   0,   0],
});

Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
  toValue: pan.x.interpolate({
    inputRange: [0, 300],
    outputRange: [1, 0],
  }),
}).start();

onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {x: scrollX}}}]   // scrollX = e.nativeEvent.contentOffset.x
)}
onPanResponderMove={Animated.event([
  null,                                          // 忽略原生事件
  {dx: pan.x, dy: pan.y}                         // 從gestureState中解析出dx和dy的值
]);

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

var App = React.createClass({
  componentWillMount() {
    // 建立動畫
    LayoutAnimation.spring();
  },

  getInitialState() {
    return { w: 100, h: 100 }
  },

  _onPress() {
    // 讓檢視的尺寸變化以動畫形式展現
    LayoutAnimation.spring();
    this.setState({w: this.state.w + 15, h: this.state.h + 15})
  },

  render: function() {
    return (
      <View style={styles.container}>
        <View style={[styles.box, {width: this.state.w, height: this.state.h}]} />
        <TouchableOpacity onPress={this._onPress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>Press me!</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
});

import tweenState from `react-tween-state`;
import reactMixin from `react-mixin`; // https://github.com/brigand/react-mixin

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { opacity: 1 };
    this._animateOpacity = this._animateOpacity.bind(this);
  }

  _animateOpacity() {
    this.tweenState(`opacity`, {
      easing: tweenState.easingTypes.easeOutQuint,
      duration: 1000,
      endValue: this.state.opacity === 0.2 ? 1 : 0.2,
    });
  }

  render() {
    return (
      <View style={{flex: 1, justifyContent: `center`, alignItems: `center`}}>
        <TouchableWithoutFeedback onPress={this._animateOpacity}>
          <View ref={component => this._box = component}
                style={{width: 200, height: 200, backgroundColor: `red`,
                        opacity: this.getTweeningValue(`opacity`)}} />
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

reactMixin.onClass(App, tweenState.Mixin);

var rebound = require(`rebound`);

var App = React.createClass({
  // 首先我們初始化一個spring動畫，並新增監聽函式，
  // 這個函式會在spring更新時呼叫setState
  componentWillMount() {
    // 初始化spring
    this.springSystem = new rebound.SpringSystem();
    this._scrollSpring = this.springSystem.createSpring();
    var springConfig = this._scrollSpring.getSpringConfig();
    springConfig.tension = 230;
    springConfig.friction = 10;

    this._scrollSpring.addListener({
      onSpringUpdate: () => {
        this.setState({scale: this._scrollSpring.getCurrentValue()});
      },
    });

    // 將spring的初始值設為1
    this._scrollSpring.setCurrentValue(1);
  },

  _onPressIn() {
    this._scrollSpring.setEndValue(0.5);
  },

  _onPressOut() {
    this._scrollSpring.setEndValue(1);
  },

  render: function() {
    var imageStyle = {
      width: 250,
      height: 200,
      transform: [{scaleX: this.state.scale}, {scaleY: this.state.scale}],
    };

    var imageUri = "https://facebook.github.io/react-native/img/ReboundExample.png";

    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPressIn={this._onPressIn}
                                  onPressOut={this._onPressOut}>
          <Image source={{uri: imageUri}} style={imageStyle} />
        </TouchableWithoutFeedback>
      </View>
    );
  }
});

// 回到上面示例的那個元件中，找到componentWillMount方法，
// 然後將scrollSpring的監聽函式替換為如下程式碼:
this._scrollSpring.addListener({
  onSpringUpdate: () => {
    if (!this._photo) { return }
    var v = this._scrollSpring.getCurrentValue();
    var newProps = {style: {transform: [{scaleX: v}, {scaleY: v}]}};
    this._photo.setNativeProps(newProps);
  },
});

// 最後，我們修改render方法，不再通過style來傳入transform（避免
// 重新渲染時產生衝突）；然後給圖片加上ref引用。 
render: function() {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback onPressIn={this._onPressIn} onPressOut={this._onPressOut}>
        <Image ref={component => this._photo = component}
               source={{uri: "https://facebook.github.io/react-native/img/ReboundExample.png"}}
               style={{width: 250, height: 200}} />
      </TouchableWithoutFeedback>
    </View>
  );
}

import { Dimensions } from `react-native`;
var SCREEN_WIDTH = Dimensions.get(`window`).width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
  // 使用者中斷返回手勢時，迅速彈回  
  snapVelocity: 8,

  // 如下設定可以使我們在螢幕的任何地方拖動它
  edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  // 如下設定使過場動畫看起來很快
  springTension: 100,
  springFriction: 1,

  // 使用上面我們自定義的手勢
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});