react-native-动画

/**
 * 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);

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mytxooqq/article/details/72773116
文章标签: reactnative 东翌
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭