论坛 › Web开发 › RN动画制作之放大效果

alltolove 发表于 2017-8-10 08:37:03

RN动画制作之放大效果

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

export default class myreact extends Component {
constructor(props) {
    super(props);
    this.state = {
      action:1,
      a:new Animated.Value(1)
      }
   
    };
render() {   
    return (
      <ImageBackground source={require('./img/0.jpg')}
      style={{justifyContent: 'center',alignItems: 'center' }}
      >
      <Button
      onPress={()=>{
      this.setState({action:this.state.a})
      Animated.timing(
          this.state.a,
         
          {
            toValue: 10,
          duration: 5000,

          }
         
    ).start()
      }
      }
      title="放大"
      color="#841584"
      />
      <Animated.View
      style={{marginTop: 100,height: 20,width: 20,
      backgroundColor: 'red',
      transform:[{scale:this.state.action}]}}      
      >
      </Animated.View>
      
      </ImageBackground>
    );
}
}
AppRegistry.registerComponent('myreact', () => myreact);

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

查看完整版本: RN动画制作之放大效果