android - React-Native 为什么动画不是线性的并且来自发布的地方？

Question

我正在尝试在将作品释放到其原始方 block 时构建带有动画的简单拖放

目标很简单，就是拖动硬币，放开硬币后，它们会回到自己的单元格中。但是棋子返回的动画有点奇怪。例如，如果将红色硬币拖到右下角的单元格中，则动画从左下角的单元格开始，不会进入直线!

这是页面的代码，可以直接集成到你的RN应用中，如果你有和下面一样的package.json:

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

class Square {
    constructor(value, origin, cellsSize) {
        this.value = value;
        this.pan = new Animated.ValueXY();
        this.cellsSize = cellsSize;
        this.boardSize = 3 * this.cellsSize;
        this.minXY = this.cellsSize * (0.5);
        this.maxXY = this.cellsSize * (1.5);
        this.midXY = this.cellsSize;
        this.origin = origin;
        this.constrainedX = this.pan.x.interpolate({
            inputRange: [this.minXY, this.midXY, this.maxXY],
            outputRange: [this.minXY, this.midXY, this.maxXY],
            extrapolate: 'clamp',
        });
        this.constrainedY = this.pan.y.interpolate({
            inputRange: [this.minXY, this.midXY, this.maxXY],
            outputRange: [this.minXY, this.midXY, this.maxXY],
            extrapolate: 'clamp',
        });

        const x = parseInt(this.cellsSize * (0.5 + this.origin.file));
        const y = parseInt(this.cellsSize * (0.5 + this.origin.rank));

        this.pan.setValue({ x, y });
        this.panResponder = this._buildPanResponder();
    }

    get valueString() {
        return this.value;
    }

    get panRef() {
        return this.pan;
    }

    get panResponderRef() {
        return this.panResponder;
    }

    _buildPanResponder() {
        return PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderGrant: (event, gestureState) => {
                this.pan.setOffset({ x: this.pan.x._value, y: this.pan.y._value });
            },
            onPanResponderMove: (event, gestureState) => {
                this.pan.setValue({ x: gestureState.dx, y: gestureState.dy });
            },
            onPanResponderRelease: (event, gesture) => {
                const nativeEvent = event.nativeEvent;

                const origX = parseInt(this.cellsSize * (this.origin.file + 0.5));
                const origY = parseInt(this.cellsSize * (this.origin.rank + 0.5));

                Animated.timing(
                    this.pan,
                    {
                        toValue: { x: origX, y: origY },
                        duration: 400,
                        delay: 0,
                        easing: Easing.linear
                    }
                ).start();

                this.pan.flattenOffset()
            }
        });
    }
}

export default class TestComponent extends Component {

    constructor(props) {
        super(props);

        this.cellsSize = 100;

        this.squares = [
            new Square('red', { file: 1, rank: 0 }, this.cellsSize),
            new Square('green', { file: 0, rank: 1 }, this.cellsSize),
            new Square('blue', { file: 1, rank: 1 }, this.cellsSize),
        ];
    }

    renderACoin(value, file, rank) {
        if (value) {
            let style;
            switch (value.valueString) {
                case 'red': style = styles.redCoin; break;
                case 'green': style = styles.greenCoin; break;
                case 'blue': style = styles.blueCoin; break;
            }

            const randomKey = parseInt(Math.random() * 1000000).toString()

            return (
                <Animated.View key={randomKey} style={StyleSheet.flatten([style,
                    {
                        left: value.constrainedX,
                        top: value.constrainedY,
                    }])}
                    {...value.panResponderRef.panHandlers }
                />
            );
        }
    }

    renderAllCoins() {
        return _.map(this.squares, (currSquare) => {
            return this.renderACoin(currSquare, currSquare.origin.file, currSquare.origin.rank);
        });
    }

    render() {

        return (
            <View style={styles.topLevel}>
                <View style={StyleSheet.flatten([styles.board])}
                    ref="boardRoot"
                >
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 50,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 150,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 50,
                        top: 150,
                    }])} />
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 150,
                        top: 150,
                    }])} />

                    {this.renderAllCoins()}

                </View>
            </View>
         );
    }
}

const styles = StyleSheet.create({
    topLevel: {
        backgroundColor: "#CCFFCC",
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    board: {
        width: 300,
        height: 300,
        backgroundColor: "#FFCCFF",
    },
    whiteCell: {
        width: 100,
        height: 100,
        backgroundColor: '#FFAA22',
        position: 'absolute',
    },
    blackCell: {
        width: 100,
        height: 100,
        backgroundColor: '#221122',
        position: 'absolute',
    },
    greenCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#23CC12',
        borderRadius: 50,
    },
    redCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#FF0000',
        borderRadius: 50,
    },
    blueCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#0000FF',
        borderRadius: 50,
    },
});

这是我正在使用的 package.json

{
    "name": "test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-beta.5",
        "react-native": "0.49.3",
        "underscore": "^1.8.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-devtools-core": "^2.5.2",
        "react-test-renderer": "16.0.0-beta.5"
    },
    "jest": {
        "preset": "react-native"
    }
}

每个 Square 的实现都归功于 Square 类，它包含原始方 block 、拖放平移响应器和平移动画值。由于两个 x/y 插值器，拖放动画被限制在单元格内。

这是 Expo Snack application .

我的猜测是奇怪的动画行为是由插值器引起的，或者是我忘记设置为平移动画 XY 值的某个值，但我不能确定。

Answer 1

不是发布地

这是因为您的偏移量的解析方式。您的 toValue 坐标在未应用任何偏移时是正确的，因此您应该在 偏移被展平后开始动画。否则，您将开始(在调用 flattenOffset 之前)从释放点到错误的终点，并且当偏移被展平时“更正”了终点坐标，但起点现在是错误的。如果您放慢动画速度并将 flattenOffset 调用放在 setTimeout 中，以便它在动画中间发生，您可以更清楚地看到这一点。

要修复，只需将 flattenOffset() 调用移到 start() 之前。

  onPanResponderRelease: (event, gestureState) => {
    const nativeEvent = event.nativeEvent;

    const origX = parseInt(this.cellsSize * (this.origin.file + 0.5));
    const origY = parseInt(this.cellsSize * (this.origin.rank + 0.5));

    // Our animated path should be calculated without an offset, as our
    // origX and origY are both un-offset, so flattenOffset() before start()
    this.pan.flattenOffset();

    Animated.timing(
      this.pan,
      {
        toValue: { x: origX, y: origY },
        duration: 400,
        delay: 0,
        easing: Easing.linear
      }
    ).start();
  }

非线性

一旦上述问题得到解决，这一点就会变得更加明显，您可以看到发生了什么。这只是因为您的 pan 正在从 释放点 动画回到圆的原点，但圆本身受到约束。因此，如果您的释放点在受限区域之外，您会看到圆圈沿着受限区域的边缘水平或垂直移动，尽可能靠近 pan，直到 pan 值在框内移动，圆圈可以跟随它移动。

如何处理取决于您想要的行为。假设您不关心平移在受限区域外多远被释放，而您只希望圆圈从它出现的位置线性动画回到它的原点，那么最简单的事情就是设置您的 pan 在开始动画之前将值赋给自身的受限版本:

  onPanResponderRelease: (event, gestureState) => {
    const nativeEvent = event.nativeEvent;

    const origX = parseInt(this.cellsSize * (this.origin.file + 0.5));
    const origY = parseInt(this.cellsSize * (this.origin.rank + 0.5));

    // Our animated path should be calculated without an offset, as our
    // origX and origY are both un-offset, so flattenOffset() before start()
    this.pan.flattenOffset();

    // Act as if we have released from the centre of where the circle appears
    // on screen, rather than potentially outside the constrained area
    this.pan.setValue({ x: this.constrainedX.__getValue(), y: this.constrainedY.__getValue() });

    Animated.timing(
      this.pan,
      {
        toValue: { x: origX, y: origY },
        duration: 400,
        delay: 0,
        easing: Easing.linear
      }
    ).start();
  }

如您所见，这使用“私有(private)”__getValue() 方法作为使用已约束值的便捷方式。如果你想避免这种情况，你必须在 gestureState 中使用坐标并应用你自己的约束逻辑——不幸的是，RN 没有公开一种在非动画值上使用其插值逻辑的方法。