react-native - 在 React Native 中使图像变小，大于变大，恢复到正常动画

Question

我需要制作一个动画，这会使图像变小，然后将图像变大一点然后恢复正常，当用户按下按钮时，这个动画应该每次重复。

这是我已经拥有的，目前它使图像更小。之后如何使它变大然后再恢复到正常大小？

class ReflectionScreen extends React.Component {

    constructor(props) {
        super(props)
        this.animatedValue = new Animated.Value(0)
    }

  handleAnimation = () => {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.ease
        }).start()
    }

render() {
  <TouchableOpacity style={styles.handContainer} onPress={this.goIncrement}>
                        <Animated.Image
                            source={require('../images/tapHand.png')}
                            style={
                                [styles.imageHand, 
                                    {transform: [
                                    {
                                        translateX: this.animatedValue.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 0.7]
                                        })
                                    },
                                    {
                                        translateY: this.animatedValue.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 0.7]
                                        })
                                    },
                                    {
                                        scaleX: this.animatedValue.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [1, 0.7]
                                        })
                                    },
                                    {
                                        scaleY: this.animatedValue.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [1, 0.7]
                                        })
                                    },
                                    {perspective: 1000}
                            ]
                            } 
                         ]}
                        />
</TouchableOpacity>
}

)} 
}

这里应该是这样的：

标签： react-nativeanimationreact-native-androidreact-native-ios

Answer 1

expand = () => {
    Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.ease
    }).start(this.shrink)
}
shrink = () => {
    Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.ease
    }).start(this.expand)
}

在里面调用回调函数start，然后反转变换

this.animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0.7, 1.3]
})
...