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

Question

我正在尝试使用react-native-animatable库运行一些简单的动画。(但我认为这个问题应该对任何react动画都是通用的，所以也要添加其他标签。)

问题是，在第一次，图像的动画效果与预期的一样。但是，当目标是使用手势开始第二个动画时，图像平移将从其原始坐标开始。

一个搜索结果，在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 me )

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

  _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
    })
  }

和render方法

  <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库的，但是这个概念应该适用于其他解决方案。不知道这种方式是否可取，尽管它是有效的。

希望这能有所帮助！