RN animated缩放动画

Posted 2021-01-30 hualuoshuijia

效果图：

代码：

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‘,

    },

});