react-native - 反应原生圈拖动变换平移动画

Question

嗨，我怎样才能拖动图像弧（圆）线。我关注了一个他们使用 PanResponder 的主题，但只能自由拖动。我只是在拖动时接受图像跟随弧（圆）线，如下所示：

这是可以使拖动自由方向的代码。我知道我们可以计算 translateX: this.state.pan.x 和 translateY: this.state.pan.y 但不知道该怎么做：

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

export default class Viewport extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showDraggable: true,
      dropZoneValues: null,
      pan: new Animated.ValueXY(0)
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null, {
          dx: this.state.pan.x,
          dy: this.state.pan.y
        },

      ], {
        listener: (event, gestureState) => console.log(event.nativeEvent)
      }),
      onPanResponderRelease: (e, gesture) => {
        Animated.spring(this.state.pan, {
          toValue: {
            x: 0,
            y: 0
          }
        }).start();
      }
    });
  }

  getStyle() {
    return [
      styles.circle,
      {
        transform: [{
            translateX: this.state.pan.x
          },
          {
            translateY: this.state.pan.y
          }
        ]
      }
    ];
  }

  render() {
    return ( <
      View style = {
        styles.mainContainer
      } > {
        this.renderDraggable()
      } <
      /View>
    );
  }

  renderDraggable() {
    if (this.state.showDraggable) {
      return ( <
        View style = {
          styles.draggableContainer
        } >
        <
        Animated.View { ...this.panResponder.panHandlers
        }
        style = {
          this.getStyle()
        } >
        <
        /Animated.View> <
        /View>
      );
    }
  }
}

let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
    color: '#fff'
  },
  draggableContainer: {
    position: 'absolute',
    top: Window.height / 2 - CIRCLE_RADIUS,
    left: Window.width / 2 - CIRCLE_RADIUS
  },
  circle: {
    backgroundColor: '#1abc9c',
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS
  }
});

标签： react-nativetransformtranslate