react native 手机app之动画制作

alltolove

1. import React, { Component } from 'react';
   
2. import {
   
3.   AppRegistry,
   
4.   View,
   
5.   Text,
   
6.   TouchableHighlight,
   
7.   StyleSheet,
   
8.   Button,
   
9.   Animated
   
10. } from 'react-native';
    
11. 
    
12. export default class myreact extends Component {
    
13.   constructor(props) {
    
14.     super(props);
    
15.     this.state = {
    
16.       action:0,
    
17.       a:new Animated.Value(0)
    
18.       }
    
19.    
    
20.     };
    
21.   render() {   
    
22.     return (
    
23.       <View style={styles.container}>
    
24.       <Button
    
25.       onPress={()=>{
    
26.         this.setState({action:this.state.a})
    
27.         Animated.timing(
    
28.           this.state.a,
    
29.          
    
30.           {toValue: 360,
    
31.           duration: 5000}
    
32.          
    
33.     ).start()
    
34.       }
    
35.       }
    
36.       style={styles.btn}
    
37.       title="moving right"
    
38.       color="#841584"
    
39.       />
    
40.       <Animated.Text  
    
41.         style={{fontSize: 25,marginTop: 100,
    
42.         transform:[{
    
43.         translateX:this.state.action
    
44.         },{translateY:this.state.action}]}}>
    
45.         我走了88...
    
46.       </Animated.Text>
    
47.       
    
48.       </View>
    
49.     );
    
50.   }
    
51. }
    
52. const styles=StyleSheet.create({
    
53.   container:{
    
54.     flex:1,
    
55.     flexWrap: 'wrap',
    
56.     backgroundColor: '#f0f0f0',
    
57.     alignItems: 'center',
    
58.     marginTop: 50
    
59.   },
    
60.   btn:{
    
61.     backgroundColor: 'gray',width: 150,height: 90,
    
62.     justifyContent: 'center',
    
63.     alignItems: 'center'
    
64.   },
    
65. })
    
66. AppRegistry.registerComponent('myreact', () => myreact);
    

复制代码

再向大家介绍一个Button组件，这是RN官方为我们做好的一个按钮组件，非常漂亮。RN动画有点像我以前讲的Qt动画制作，非常简单效率，它的原理是用js代码实现的网页动画。做一下广告http://bbs.fishc.com/forum.php?m ... d=570&fromop=my这是我的Qt动画制作的淘专辑。主要动画代码在第25行onPress事件里，先把action状态设置成a这个变量的值，a变量会随着时间自增，5秒钟从0加到360，原理就是这么简单。还有文字动画必须使用Animated.Text标签才行，标签采用css3的样式，translateX 和 translateY分别是向右移动和向下移动，如果反方向就设置成负数，这回上下左右移动就都会了吧？看效果图：