RN动画制作之放大效果

alltolove

1. import React, { Component } from 'react';
   
2. import {
   
3.   AppRegistry,
   
4.   View,
   
5.   Text,
   
6.   TouchableHighlight,
   
7.   Button,
   
8.   Animated,
   
9.   ImageBackground
   
10. } from 'react-native';
    
11. 
    
12. export default class myreact extends Component {
    
13.   constructor(props) {
    
14.     super(props);
    
15.     this.state = {
    
16.       action:1,
    
17.       a:new Animated.Value(1)
    
18.       }
    
19.    
    
20.     };
    
21.   render() {   
    
22.     return (
    
23.       <ImageBackground source={require('./img/0.jpg')}
    
24.         style={{justifyContent: 'center',alignItems: 'center' }}
    
25.       >
    
26.       <Button
    
27.       onPress={()=>{
    
28.         this.setState({action:this.state.a})
    
29.         Animated.timing(
    
30.           this.state.a,
    
31.          
    
32.           {
    
33.             toValue: 10,
    
34.           duration: 5000,
    
35. 
    
36.           }
    
37.          
    
38.     ).start()
    
39.       }
    
40.       }
    
41.       title="放大"
    
42.       color="#841584"
    
43.       />
    
44.       <Animated.View  
    
45.         style={{marginTop: 100,height: 20,width: 20,
    
46.         backgroundColor: 'red',
    
47.         transform:[{scale:this.state.action}]}}        
    
48.       >
    
49.       </Animated.View>
    
50.       
    
51.       </ImageBackground>
    
52.     );
    
53.   }
    
54. }
    
55. AppRegistry.registerComponent('myreact', () => myreact);
    

复制代码

今天再学个新标签ImageBackground，可以放背景图。还是跟上次代码差不多就是改变transform里的scale属性，这次把初始状态设定为1，点击按钮后让他放大10倍，接下来效果图：