1. 程式人生 > >RN Animated實現一個小手loop動畫,可用於引導點選

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

效果如下:沒錯!就是這種進進出出的感覺~哈哈

 

附上小手的素材:是白的,白的。。。你看不見~

小手