在react-native中翻译动画后设置视图的新坐标的正确方法是什么？

Question

我正在尝试使用react-native-animatable库运行一些简单的动画。 （但是我相信这个问题应该是任何反应动画都通用的，因此也要添加其他标签。）

问题是，图像第一次像预期的那样动画。 但是，当以手势开始第二动画时，图像转换将从其原始坐标开始。

搜索结果，在Android开发中（显然不是我的情况），似乎有一个方法setFillAfter在动画之后设置坐标。

我的问题是，如何将位置（例如，左/上值）设置为最终的翻译点，以便连续动画从上一次翻译的点开始。

以下代码块的博览会小吃在这里 。

import * as React from 'react';
import { Image, StyleSheet, ImageBackground } from 'react-native';

import * as Animatable from 'react-native-animatable';
import { PanGestureHandler, State } from 'react-native-gesture-handler';

import testImg from './test.png';
import backImg from './back.png';

export default class App extends React.Component {
    onTestMove(event) {
        this.testAnimRef.transitionTo({
            translateX: event.nativeEvent.translationX,
            translateY: event.nativeEvent.translationY,
        }, 0);

    }
    render() {
        return (
            <ImageBackground source={backImg} style={{ flex: 1 }} >
                <PanGestureHandler
                    key={`test`}
                    onGestureEvent={(e) => { this.onTestMove(e) }}
                    onHandlerStateChange={e => { }}
                >
                    <Animatable.View style={styles._animatable_view}
                        ref={((ref) => { this.testAnimRef = ref }).bind(this)}
                        useNativeDriver={true}
                    >
                        <Image source={testImg} style={styles._image} />
                    </Animatable.View>
                </PanGestureHandler>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    _image: {
        width: 50,
        height: 25,
        resizeMode: 'contain',
        backgroundColor: 'black',
        borderColor: 'gainsboro',
        borderWidth: 2,
    },
    _animatable_view: {
        position: "absolute",
        top: 200,
        left: 100,
    },
});

Answer 1

尝试在视图中移动某些卡片时，我遇到了同样的问题，并且在进一步拖动时，它们将重置为原点。

我的理论是/虽然翻译后的视图将转换其x / y坐标，但这不适用于该视图的父级，因此从该组件传递的动画事件最初将具有原始坐标（如果我这里错了）

因此，我的解决方案是保持初始偏移值处于状态，并在每次用户释放拖动动作时保持此初始值

  _onHandleGesture: any
  constructor(props: OwnProps) {
    super(props)
    this.state = {
      animationValue: new Animated.ValueXY({ x: 0, y: 0 }),
      initialOffset: { x: 0, y: 0 },
    }
    this._onHandleGesture = (e: PanGestureHandlerGestureEvent) => {
      this.state.animationValue.setValue({
        x: e.nativeEvent.translationX + this.state.initialOffset.x, <- add initial offset to coordinates passed
        y: e.nativeEvent.translationY + this.state.initialOffset.y,
      })
    }
  }

  _acceptCard = (cardValue: number) => {
    const { targetLocation, onAccept } = this.props

    const { x, y } = targetLocation

    onAccept(cardValue)

    Animated.spring(this.state.animationValue, {
  // Some animation here
    }).start(() => {
      this.setState({ initialOffset: targetLocation }) // <- callback to set state value for next animation start
    })
  }

和渲染方法

  <PanGestureHandler
        onHandlerStateChange={this.onPanHandlerStateChange}
        onGestureEvent={this._onHandleGesture}
        failOffsetX={[-xThreshold, xThreshold]}
      >
        <Animated.View
          style={{
            position: "absolute",
            left: 0,
            top: 0,
            transform: [{ translateX: this.state.animationValue.x }, { translateY: this.state.animationValue.y }],
          }}
        >
          <CardTile size={size} content={content} layout={layout} backgroundImage={backgroundImage} shadow={shadow} />
        </Animated.View>
      </PanGestureHandler>

此示例基于react-native-gesture-handler库，但是该概念应适用于其他解决方案。 尽管它可以起作用，但不知道这种方法是否明智。

希望这可以帮助！