ReactNative——动画学习

Posted 2022-12-06 TaoLee-

支持的动画组件

单个动画

旋转
缩放
平移
透明度

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

组合动画

自定义动画

差值估值