RN Animated實現一個小手loop動畫,可用於引導點選
阿新 • • 發佈:2018-12-25
直接上程式碼:
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> ); } }
效果如下:沒錯!就是這種進進出出的感覺~哈哈
附上小手的素材:是白的,白的。。。你看不見~