1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React, { Component } from 'react';
import {
  Animated,
} from 'react-native';

class  extends Component {
  _callBack() {
      console.log("call Back");
  }
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render() {
    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: 2,                          // 弹性系数（摩擦力），用于回弹，数值越大弹性越小
      }
    ).start(this._callBack);                  // 开始执行动画，并传入回调函数
  }
}
export default Simple;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Animated.sequence([            
  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();                    // 执行这一整套动画序列

1
2
3
4

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

1
2
3
4

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

1
2
3
4

value.interpolate({
  inputRange: [0, 360],
  outputRange: ['0deg', '360deg']
})

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7

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的值
]);

1
2
3
4
5
6
7
8
9

style={{
  opacity: this.state.fadeAnim, // Binds directly
  transform: [{
    translateY: this.state.fadeAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
    }),
  }],
}}>

1
2
3
4
5
6
7
8
9

onScroll={this.AnimatedEvent(
  [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
  {listener},          // 可选的异步监听函数
)
...
onPanResponderMove: this.AnimatedEvent([
  null,                // 忽略原始事件
  {dx: this._panX},    // 手势状态参数
]),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

class DraggableView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       pan: new Animated.ValueXY(), // inits to zero
     };
     this.state.panResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onPanResponderMove: Animated.event([null, {
         dx: this.state.pan.x, // x,y are Animated.Value
         dy: this.state.pan.y,
       }]),
       onPanResponderRelease: () => {
         Animated.spring(
           this.state.pan,         // Auto-multiplexed
           {toValue: {x: 0, y: 0}} // Back to zero
         ).start();
       },
     });
   }
   render() {
     return (
       <Animated.View
         {...this.state.panResponder.panHandlers}
         style={this.state.pan.getLayout()}>
         {this.props.children}
       </Animated.View>
     );
   }
 }

1

style={this.state.anim.getLayout()}

1
2
3

style={{
  transform: this.state.anim.getTranslateTransform()
}}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

import React, { Component } from 'react';
import {
  Animated,
  View,
  Text,
  Easing
} from 'react-native';
/**
 * 弹性动画 ,基础的单次弹跳物理模型
class Simple extends Component {
  _callBack() {
      console.log("call Back");
  }
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render() {
    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) 大专栏  React Native 学习笔记--进阶（二）--动画;     // 设置一个较大的初始值
    Animated.spring(                          // 可选的基本动画类型: spring, decay, timing
      this.state.bounceValue,                 // 将`bounceValue`值动画化
      {
        toValue: 0.8,                         // 将其值以动画的形式改到一个较小值
        friction: 2,                          // 弹性系数（摩擦力），用于回弹，数值越大弹性越小，默认7
        tension: 10                           // 张力，默认40。
      }
    ).start(this._callBack);                  // 开始执行动画，并传入回调函数
  }
}
*/
/**
 * 透明度位移动画,以一个初始速度开始并且逐渐减慢停止。

class Simple extends Component {
  constructor(props) {
    super(props);
    this.state = {
      anim: new Animated.Value(0.5),
    };
  }
  componentDidMount() {
    Animated.decay(
      this.state.anim,
      { 
        toValue: 2,
        velocity: 0.2, //起始速度，必填参数。
        deceleration: 0.99, //速度衰减比例，默认为0.997。
      },
    ).start();
  }
  render() {
    return (
      <Animated.Image
        source={require('../img/img.jpg')}
        style={{ //把值赋给透明度属性,Animated.Value从0变化到1时，把组件的位置从150px移动到0px，不透明度从0到1
          opacity: this.state.anim, // Binds directly
          transform: [
            {translateY: this.state.anim.interpolate({ //Y轴位移变化
              inputRange: [0, 20],
              outputRange: [0, 400]
            })}
          ],
        }}>
      </Animated.Image>
    );
  }
}
 */
class  extends Component {
  constructor(props) {
    super(props);
    this.state = {
      anim: new Animated.Value(0), //初始化，value=0
    }
  }

  componentDidMount() {
    Animated.sequence([      //顺序执行
      Animated.timing(      //从时间范围映射到渐变的值
        this.state.anim,
        {
          toValue: 1, //value要从0变为1
          easing: Easing.linear, //变化方式
          duration: 2500, //动画时间，默认500
          delay: 1000 //在一段时间之后开始动画（单位是毫秒），默认为0。
        }
      ),
      Animated.delay(2000), //延迟执行
    ]).start(this._callBack);
  }

  _callBack() {
    console.log("call Back");
  }

  render() {
    return(
      <Animated.Image
        source={require('../img/img.jpg')}
        style={{
          opacity: this.state.anim, //透明度变化
          transform: [
            {scale: this.state.anim.interpolate({ //缩放变化
              inputRange: [0, 1],
              outputRange: [1, 0.5],
            })},
            {translateX: this.state.anim.interpolate({ //X轴位移变化
              inputRange: [0, 1],
              outputRange: [0, 150]
            })},
            {translateY: this.state.anim.interpolate({ //Y轴位移变化
              inputRange: [0, 1],
              outputRange: [0, 150]
            })},
            {translateY: this.state.anim.interpolate({ //Y轴位移变化
              inputRange: [0, 1],
              outputRange: [0, 150]
            })},
            {rotateZ: this.state.anim.interpolate({ //Z轴旋转变化
              inputRange: [0, 1],
              outputRange: ['0deg', '360deg']
            })},
            {rotateX: this.state.anim.interpolate({ //X轴旋转变化
              inputRange: [0, 1],
              outputRange: ['0deg', '360deg']
            })},
            {rotateY: this.state.anim.interpolate({ //Y轴旋转变化
              inputRange: [0, 1],
              outputRange: ['0deg', '360deg']
            })},
          ]
        }}
      />
    );
  }
}
export default Simple;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

import React, { Component } from 'react';
import {
  View,
  LayoutAnimation,
  StyleSheet,
  TouchableOpacity,
  Text
 } from 'react-native'

class Sample extends Component {
  constructor(props) {
    super(props);
    this.state = { w: 100, h: 100 };
    this._onPress = this._onPress.bind(this);
  }

  componentWillMount() {
    // 创建动画
    LayoutAnimation.spring();
  }

  _onPress() {
    // 动画更新，让视图的尺寸变化以动画形式展现
    LayoutAnimation.spring();
    this.setState({w: this.state.w + 15, h: this.state.h + 15})
  }

  render() {
    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}>点击！</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: 'red',
  },
  button: {
    marginTop: 10,
    paddingVertical: 10,
    paddingHorizontal: 20,
    backgroundColor: 'black',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default Sample;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

import rebound from 'rebound';

class App extends React.Component {
  constructor(props) {
    super(props);
    this._onPressIn = this._onPressIn.bind(this);
    this._onPressOut = this._onPressOut.bind(this);
  }
  // 首先我们初始化一个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() {
    var imageStyle = {
      width: 250,
      height: 200,
      transform: [{scaleX: this.state.scale}, {scaleY: this.state.scale}],
    };

    var imageUri = "img/ReboundExample.png";

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 回到上面示例的那个组件中，找到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>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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