动画PanResponder创建与功能组件跳转动画，即使实现.setoffset()

Question

我看过一些关于这个话题的问题，但是没有一个有一个确切的答案。

我基本上重写了一个动画组件，它被写成一个基于类的组件变成功能组件。问题是，在我的功能组件中，每次动画完成并再次触摸视图时，动画都会跳跃。解决这个问题的方法是将动画视图的x和y值的偏移量设置为它自己的当前x和y值。我正试图在功能组件中实现相同的逻辑但由于某些原因，它的工作方式与基于类的组件不同。我做错了什么吗?这是两个组件并排在一起。同样，基于类的组件工作得很完美，但基于功能的组件在动画启动后每次触摸屏幕时都会跳转。

基于类的组件

import React, { Component } from "react";
import {
StyleSheet,
View,
Animated,
PanResponder,
} from "react-native";
export default class animations extends Component {
state = {
animation: new Animated.ValueXY(0),
};
componentWillMount() {
this._x = 0;
this._y = 0;
this.state.animation.addListener(value => {
this._x = value.x;
this._y = value.y;
});
this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
this.state.animation.setOffset({ x: this._x, y: this._y });
this.state.animation.setValue({ x: 0, y: 0 });
},
onPanResponderMove: Animated.event([
null,
{ dx: this.state.animation.x, dy: this.state.animation.y },
]),
onPanResponderRelease: (e, { vx, vy }) => {
Animated.decay(this.state.animation, {
velocity: { x: vx, y: vy },
deceleration: 0.997,
}).start();
},
});
}
render() {
const animatedStyle = {
transform: this.state.animation.getTranslateTransform(),
};
return (
<View style={styles.container}>
<Animated.View
style={[styles.box, animatedStyle]}
{...this._panResponder.panHandlers}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
box: {
width: 50,
height: 50,
backgroundColor: "tomato",
},
});

<<p>功能组件/strong>

import React, { useState, useEffect, useRef } from 'react'
import { View, Text, StyleSheet, Animated, PanResponder } from 'react-native'

const Decays = (props) => {
const AnimatedValue = useRef(new Animated.ValueXY(0)).current
let _x = useRef(0).current
let _y = useRef(0).current
useEffect(() => {
AnimatedValue.addListener((value) => {
_x = value.x
_y = value.y
})
})
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true, 
onMoveShouldSetPanResponder: () => true, 
onPanResponderGrant: () => {
AnimatedValue.setOffset({
x: _x,
y: _y,
})
AnimatedValue.setValue({ x: 0, y: 0 })
},
onPanResponderMove: Animated.event(
[
null, 
{
dx: AnimatedValue.x, 
dy: AnimatedValue.y,
},
],
{ useNativeDriver: false }
),
onPanResponderRelease: (e, { vx, vy }) => {
Animated.decay(AnimatedValue, {
velocity: { x: vx, y: vy },
deceleration: 0.996,
useNativeDriver: true,
}).start()
},
})
const animatedStyle = {
transform: AnimatedValue.getTranslateTransform(),
}
return (
<View style={styles.screen}>
<Animated.View
style={[styles.box, animatedStyle]}
{...panResponder.panHandlers}
></Animated.View>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
backgroundColor: 'tomato',
width: 200,
height: 200,
alignItems: 'center',
justifyContent: 'center',
},
})
export default Decays

Answer 1

我终于想通了。

原来我的逻辑不是问题。我已经成功地将组件从基于类转换为基于函数。跳跃问题是由衰减动画上的useNativeDriver: true设置引起的。当它被设置为false时，它不会跳转。