RN动画制作之系列动画

alltolove

1. import React, { Component } from 'react';
   
2. import {
   
3.   AppRegistry,
   
4.   Button,
   
5.   View,
   
6.   Animated,
   
7.   StyleSheet
   
8. } from 'react-native';
   
9. 
   
10. export default class myreact extends Component {
    
11.   constructor(props) {
    
12.     super(props);
    
13.     this.state = {
    
14.       a:new Animated.Value(0),
    
15.       b:new Animated.Value(0),
    
16.       c:new Animated.Value(0),
    
17.       d:new Animated.Value(0),
    
18.       e:new Animated.Value(0)
    
19.       }
    
20.    
    
21.     };
    
22.   render() {   
    
23.     return (
    
24.       <View style={{flex:1}}>
    
25.       <Animated.View style={styles.contianer}>
    
26.         <Animated.Text style={[styles.text,{opacity: this.state.a}]}>鱼</Animated.Text>
    
27.         <Animated.Text style={[styles.text,{opacity: this.state.b}]}>C</Animated.Text>
    
28.         <Animated.Text style={[styles.text,{opacity: this.state.c}]}>工</Animated.Text>
    
29.         <Animated.Text style={[styles.text,{opacity: this.state.d}]}>作</Animated.Text>
    
30.         <Animated.Text style={[styles.text,{opacity: this.state.e}]}>室</Animated.Text>
    
31.       </Animated.View>
    
32.       <Button onPress={()=>{
    
33.           this.setState({
    
34.             a:this.state.a,b:this.state.b,
    
35.             c:this.state.c,d:this.state.d,
    
36.             e:this.state.e
    
37.           })
    
38. 
    
39.           Animated.sequence([            
    
40.           Animated.timing(this.state.a, {   
    
41.             toValue:1,
    
42.             duration:1000
    
43.           }),                  
    
44.           Animated.timing(this.state.b, {   
    
45.             toValue:1,
    
46.             duration:1000
    
47.           }),
    
48.           Animated.timing(this.state.c, {   
    
49.             toValue:1,
    
50.             duration:1000
    
51.           }),
    
52.           Animated.timing(this.state.d, {   
    
53.             toValue:1,
    
54.             duration:1000
    
55.           }),
    
56.           Animated.timing(this.state.e, {   
    
57.             toValue:1,
    
58.             duration:1000
    
59.           })                        
    
60.           ]).start();
    
61.         }}
    
62.         title="press me"
    
63.         color="#841584"
    
64.       />
    
65.       </View>
    
66.     );
    
67.   }
    
68. }
    
69. var styles=StyleSheet.create({
    
70.   contianer:{
    
71.     flex:1,backgroundColor: 'lightblue',
    
72.         flexDirection: 'row',
    
73.         alignItems: 'center',
    
74.         justifyContent: 'center' ,
    
75.   },
    
76.   text:{
    
77.     fontSize: 50,
    
78.     color: 'green',
    
79.     fontFamily: '微软雅黑'
    
80.   }
    
81. })
    
82. 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的教程，话说还是纯原生的比较好