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

组合动画

自定义动画

差值估值