ReactNative——动画学习

支持的动画组件

单个动画

旋转
缩放
平移
透明度

import React, { Component } from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      fadeAnimation: new Animated.Value(0), //设置初始值
    };
  }

  onButtonPress() {
    this.state.fadeAnimation.setValue(0);
    Animated.timing(
      this.state.fadeAnimation,             //初始值
      {
        toValue: 1,                         //结束值
        duration: 2000,                     //时间
      },
    ).start();                              //开始
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          style={{
            width: 200,
            height: 200,
            opacity: this.state.fadeAnimation,
          }}
          source={{ uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png' }}
        >
        </Animated.Image>
        <TouchableOpacity
          onPress={() => this.onButtonPress()}
          style={styles.button}>
          <Text>开始动画</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

组合动画

自定义动画

差值估值