react-native-动画

来源：互联网发布：ubuntu切换到windows 编辑：程序博客网时间：2024/06/05 07:46
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  CameraRoll,  Animated,  Easing} from 'react-native';export default class D20170502 extends Component {  constructor(props){    super(props);    this.state = {      opacity:new Animated.Value(0),      rotation:new Animated.Value(0),      fontSize:new Animated.Value(0)    }  }  componentDidMount() {      var timing = Animated.timing;      var _this = this;      //同步执行    //   Animated.parallel(['opacity','rotation','fontSize'].map(data => {      //    //       return timing(_this.state[data],{    //           toValue:1,    //           duration:2000,    //           edsing:Easing.linear    //       });    //   })).start();      //并列执行      Animated.sequence(['opacity','rotation','fontSize'].map(data => {          return timing(_this.state[data],{              toValue:1,              duration:2000,              edsing:Easing.linear          });      })).start();  }  // componentDidMount(){  //   Animated.timing(this.state.opacity,  //   {  //     toValue:1,  //     duration:5000,  //     easing:Easing.linear  //   }  //   ).start();  // }  render() {    return (        <Animated.View          style={[styles.container,{            opacity:this.state.opacity,            transform:[                {                    rotateZ:this.state.rotation.interpolate({                        inputRange:[0,1],                        outputRange:['0deg','360deg']                    })                }            ]          }]}          >          <Animated.Text              style={{                  fontSize:this.state.fontSize.interpolate({                      inputRange:[0,1],                      outputRange:[12,30]                  })              }}              >              {'这是内容'}          </Animated.Text>          </Animated.View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('D20170502', () => D20170502);
阅读全文
0 0