我想制作一个动画,其中图像应该同时缩放并移动到中心。但是,最终的位置是不正确的。如果我没有规模,翻译工作完美。我想使图像居中,所以 (screenW / 2 - IMAGE_RADIUS * SCALE) 应该是正确的。
(1) 之前:https ://ibb.co/efjAW8 ,(2):之后:https ://ibb.co/bUL64T
代码:
pressedImage = () => {
const deltaX = (screenW / 2 - IMAGE_RADIUS * SCALE) - origX;
const deltaY = (screenH / 2 - IMAGE_RADIUS * SCALE - 30) - origY;
Animated.parallel([
Animated.timing(this.state.scaleAnimatedValue, {
toValue: SCALE,
easing: Easing.ease,
duration: 1000,
}),
Animated.timing(this.state.animTransX,{
toValue: deltaX,
easing: Easing.ease,
duration: 1000,
}),
Animated.timing(this.state.animTransY,{
toValue: deltaY,
easing: Easing.ease,
duration: 1000,
}),
]).start();
}
render() {
...
<ImageView style={
{
transform: [
{
translateX: this.state.animTransX,
},
{
translateY: this.state.animTransY,
},
{
scale: this.state.scaleAnimatedValue,
},
],
}} source={{ uri: gist.author.avatarUrl }} />
}
我怎样才能做到这一点?我尝试过矩阵转换和 setNativeProps 但失败了。这应该是一件很简单的事情...