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

Question

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

问题是，第一次，图像的动画效果符合预期。但是当打算用手势开始第二个动画动画时，图像平移从它的原始坐标开始。

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

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

以下代码块的博览会小吃是here。

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 坐标，但这不适用于该视图的父级，因此从该组件传递的动画事件最初将具有原始坐标（nuke如果我在这里错了，我）

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

  _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 库，但该概念应适用于其他解决方案。 不知道这种方式是否可取，虽然它是功能性的。

希望这会有所帮助！