RN动画制作之系列动画

alltolove

import React, { Component } from 'react';
import {
  AppRegistry,
  Button,
  View,
  Animated,
  StyleSheet
} from 'react-native';

export default class myreact extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      a:new Animated.Value(0),
      b:new Animated.Value(0),
      c:new Animated.Value(0),
      d:new Animated.Value(0),
      e:new Animated.Value(0)
      }
    
    };
  render() {   
    return (
      <View style={{flex:1}}>
      <Animated.View style={styles.contianer}>
        <Animated.Text style={[styles.text,{opacity: this.state.a}]}>鱼</Animated.Text>
        <Animated.Text style={[styles.text,{opacity: this.state.b}]}>C</Animated.Text>
        <Animated.Text style={[styles.text,{opacity: this.state.c}]}>工</Animated.Text>
        <Animated.Text style={[styles.text,{opacity: this.state.d}]}>作</Animated.Text>
        <Animated.Text style={[styles.text,{opacity: this.state.e}]}>室</Animated.Text>
      </Animated.View>
      <Button onPress={()=>{
          this.setState({
            a:this.state.a,b:this.state.b,
            c:this.state.c,d:this.state.d,
            e:this.state.e
          })

          Animated.sequence([            
          Animated.timing(this.state.a, {   
            toValue:1,
            duration:1000
          }),                  
          Animated.timing(this.state.b, {   
            toValue:1,
            duration:1000
          }),
          Animated.timing(this.state.c, {   
            toValue:1,
            duration:1000
          }),
          Animated.timing(this.state.d, {   
            toValue:1,
            duration:1000
          }),
          Animated.timing(this.state.e, {   
            toValue:1,
            duration:1000
          })                        
          ]).start();
        }}
        title="press me"
        color="#841584"
      />
      </View>
    );
  } 
} 
var styles=StyleSheet.create({
  contianer:{
    flex:1,backgroundColor: 'lightblue',
        flexDirection: 'row',
        alignItems: 'center', 
        justifyContent: 'center' , 
  },
  text:{
    fontSize: 50,
    color: 'green',
    fontFamily: '微软雅黑'
  }
})
AppRegistry.registerComponent('myreact', () => myreact);

这就是系列动画，效果图为：

做手机app是非常麻烦的，因为只是个新手入门系列，这个系列教程就讲到这里，里面有好多错误希望大家指出。还有其他的一些控件，比如listview都是相当好用，还有跨域获取其他网站的数据fetch，手机数据库syncstorage等都是简单好用，各位都可以自己以后深入的研究，有想继续学的鱼油可以去https://reactnative.cn/docs/0.47/getting-started.html这个中文官方网站，这是我找到的最好的学react native的官网。因为这是去年脸谱网站才发明出来的新技术，有些技术还不是太成熟，难度方面我觉得也不次于用java做android，而且还必须要联网才行，对于中国大部分地区还没有上网条件来说还不会太普及这项技术，主流还是应该java。也许将来我会在java板块做个用java做android手机app的教程，话说还是纯原生的比较好