RN Animated实现一个小手loop动画，可用于引导点击

最新推荐文章于 2023-11-17 13:55:04 发布

原创最新推荐文章于 2023-11-17 13:55:04 发布 · 8.1k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

reactnative

7 篇文章

订阅专栏

移动端

7 篇文章

订阅专栏

本文介绍了一个使用React Native创建的手图标动画案例。通过Animated API实现图标上下浮动的效果，并附带了完整的代码示例。

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

直接上代码：

class HandIcon extends Component {

    constructor(props) {
        super(props);
        this.state = {
            offset: new Animated.Value(0),
        }
    }

    componentDidMount() {
        this.startAnimated();
    }

    startAnimated = () => {
        const animationSlider =  Animated.sequence([
            Animated.timing(this.state.offset, {
                toValue: 30,
                duration: 300,
                delay: 0,
                easing: Easing.bezier(.79,.01,.33,1.01),
            }),
            Animated.timing(this.state.offset, {
                toValue: 0,
                duration: 300,
                delay: 0,
                easing: Easing.bezier(.79,.01,.33,1.01),
            }),
        ]);
        Animated.loop(animationSlider).start();
    }

    render() {
        return (
            <View pointerEvents={'none'} style={{
                alignItems: 'center',
                justifyContent: 'space-between',
                ...this.props.style
            }}>
                <Animated.Image 
                    source={require('./source/images/hand-icon.png')} 
                    style={{
                        width: 120,
                        height: 168,
                        transform: [
                            {
                                translateY: this.state.offset
                            }    
                        ],
                    }}>
                </Animated.Image>
                <Text style={{
                    fontSize: 30,
                    fontWeight: "900",
                    color: "#FFFFFF",
                }}> 点击有惊喜～</Text>
            </View>
            
        );
    }
}

效果如下：没错！就是这种进进出出的感觉～哈哈