如何在React Native中实现刮刮卡动画？

import React, { Component } from 'react';
import { View, Image, StyleSheet, PanResponder, Animated } from 'react-native';

class ScratchCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pan: new Animated.ValueXY(),
      opacity: new Animated.Value(1),
    };
  }

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        { dx: this.state.pan.x, dy: this.state.pan.y },
      ]),
      onPanResponderRelease: (e, gesture) => {
        if (gesture.moveX > 100 && gesture.moveY > 200) {
          Animated.timing(this.state.opacity, {
            toValue: 0,
            duration: 300,
          }).start();
        }
      },
    });
  }

  render() {
    const { pan, opacity } = this.state;
    return (
      <View style={styles.container}>
        <Image source={require('./card.png')} style={styles.image} />
        <Animated.View
          style={[styles.overlay, { opacity: opacity }]}
          {...this._panResponder.panHandlers}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'gray',
  },
});

export default ScratchCard;