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

直接上代码：

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>
            
        );
    }
}

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

 

附上小手的素材：是白的，白的。。。你看不见～