码迷,mamicode.com
首页 > 其他好文 > 详细

RN animated缩放动画

时间:2018-12-27 11:21:55      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:tor   res   margin   tar   order   图片   into   info   bubuko   

效果图:

技术分享图片

代码:

import React, {Component} from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    Animated,
    TouchableOpacity,
    View
} from ‘react-native‘;


export default class AnimationSpringScene extends Component {

    constructor(props) {
        super(props);
        this.springValue = new Animated.Value(0.3)
    }

    componentDidMount() {
        this.spring()
    }


    spring() {
        this.springValue.setValue(0.3)
        Animated.spring(
            this.springValue,
            {
                toValue: 1,
                friction: 1
            }
        ).start()
    }


    render() {

        return (
            <View style={styles.container}>

                <Animated.Image
                    style={{width: 227, height: 200, transform: [{scale: this.springValue}]}}
                    source={{uri: ‘https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png‘}}/>

                <TouchableOpacity onPress={() => this.spring()} style={styles.button}>
                    <Text>启动动画</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
    },
    button: {
        marginTop: 20,
        backgroundColor: ‘#808080‘,
        height: 35,
        width: 140,
        borderRadius: 5,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,

    },

});

 

RN animated缩放动画

标签:tor   res   margin   tar   order   图片   into   info   bubuko   

原文地址:https://www.cnblogs.com/hualuoshuijia/p/10183581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!