React Native 动画之 Animated.spring

Animated提供了三种动画类型。每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：

• Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。
• Animated.spring()提供了一个简单的弹簧物理模型.
• Animated.timing()使用easing 函数让数值随时间动起来。

动画还可以使用组合函数以复杂的方式进行组合：

• Animated.delay()在给定延迟后开始动画。
• Animated.parallel()同时启动多个动画。
• Animated.sequence()按顺序启动动画，等待每一个动画完成后再开始下一个动画。
• Animated.stagger()按照给定的延时间隔，顺序并行的启动动画。

Animated.spring()

效果图

animated03.jpg

实例代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Animated,
  Text
} from 'react-native';
export default class App extends Component {
  constructor(props) {  //构造函数
    super(props);
    this.springValue = new Animated.Value(0.3);
  }

  spring() {
    this.springValue.setValue(0);
    Animated.spring( 
      this.springValue,
      {
        toValue: 1,
        friction: 1
      }
    ).start(); 
  }
  render() {
    return (
      <View style={styles.container}>
        <Text
          style={styles.text}
          onPress = {this.spring.bind(this)}
        >
          Spring
        </Text>
        <Animated.Image
          style={{
            width: 227,
            height: 200,
            transform: [{ scale: this.springValue }]
          }}
          source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png' }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },

  text: {
    marginBottom: 100
  }

});