3

我想制作一个动画,其中图像应该同时缩放并移动到中心。但是,最终的位置是不正确的。如果我没有规模,翻译工作完美。我想使图像居中,所以 (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 但失败了。这应该是一件很简单的事情...

4

0 回答 0