react native 触摸的响应方法以及过程（二）

最新推荐文章于 2022-06-15 14:12:47 发布

微枫1993

最新推荐文章于 2022-06-15 14:12:47 发布

阅读量693

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react native

本文链接：https://blog.youkuaiyun.com/xiongqiangwin1314/article/details/53469207

react native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在React Native中实现动画效果，包括定义动画响应组件、设置动画响应函数及触发方式。通过触摸遥控器按键触发动画，实现透明度变化等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画的响应方法及过程

1、首先导入Animated

import {
Animated
} from 'react-native';

2、定义动画响应组件

render: function () {
    let keyBoardImg = this.keyBoardImg();
    return (
        <View style={styles.wrap}>
            <View style={[styles.touchContainer, {backgroundColor: '#e2eaea'}]}
                {...this._panResponder.panHandlers}>
                <Animated.Image
                    style={[styles.middleContainer_BG, {opacity: this.bounceValue}]}
                    source={{uri: keyBoardImg}}/>
            </View>
        </View>
    );
}

3、定义动画响应函数

actAnimationStart: function () {
    this.console("actAnimationStart");
    // 可选的基本动画类型: spring, decay, timing
    this.bounceValue.setValue(0);
    Animated.timing(
        /**
         * 将`bounceValue`值动画化的意思是，在以Animated为前缀名的组件中，比如此例中的Animated.Image，
         * 将`bounceValue`值所赋予的样式就是会跟随`bounceValue`值的变化而改变样式的，
         * `bounceValue`值的改变在Animated.timing()函数中改变，此例中`bounceValue`值将从0变化至1，变化的时间为200ms
         * 也就是说，以Animated为前缀名的组件Image(Animated.Image)，将在200ms的时间内，透明度从0变化至1
         * */
        this.bounceValue,// 将`bounceValue`值动画化
        {
            toValue: 1,// 将其值以动画的形式改到一个较小值
            duration: 180,
            easing: Easing.ease
        }
    ).start(() => {
            this.actAnimationEnd()
        });
},
actAnimationEnd: function () {
    this.console("actAnimationEnd");
    // 可选的基本动画类型: spring, decay, timing
    this.bounceValue.setValue(1);
    Animated.timing(
        this.bounceValue,// 将`bounceValue`值动画化
        {
            toValue: 0,// 将其值以动画的形式改到一个较小值
            duration: 300,
            easing: Easing.ease
        }
    ).start();
}

4、在合适的地方触发动画响应函数

keyPressIn: function (keyCode) {
    let _keyString = '';
    switch (keyCode) {
        case 2://UP
            this.setState({keyBoard: 'up'});
            this.actAnimationStart();
            _keyString = 'UP';
            break;
        case 3://DOWN
            this.setState({keyBoard: 'down'});
            this.actAnimationStart();
            _keyString = 'DOWN';
            break;
        case 4://LEFT
            this.setState({keyBoard: 'left'});
            this.actAnimationStart();
            _keyString = 'LEFT';
            break;
        case 5://RIGHT
            this.setState({keyBoard: 'right'});
            this.actAnimationStart();
            _keyString = 'RIGHT';
            break;
        case 6://CENTER
            this.setState({keyBoard: 'center'});
            this.actAnimationStart();
            _keyString = 'CENTER';
            break;
        default:
            break;
    }
}