Make image smaller, than bigger, than back to normal animation in React Native

Question

I need to make an animation, which will make image smaller, then will make image a little bit bigger and then back to normal, this animation should repeat every time, when user is pressing on the button.

Here is what I already have, currently it makes image just smaller. How to make it bigger after that and then to normal size again?

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>
}

)} 
}

Here how it should look like:

Medet Tleukabiluly · Answer 1 · 2019-09-05T12:06:56.160

0

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)
}

call callback function inside start, then reverse the transform

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

edited Sep 05 '19 at 12:06

answered Sep 05 '19 at 11:14

Medet Tleukabiluly

11,662
3
34
69

1

I'm not exactly got it, expand and shrink are the same functions? and they both call expand function callback? – Lucky_girl Sep 05 '19 at 11:26
Mistype, read again, basically they call each other, to simulate infinite loop – Medet Tleukabiluly Sep 05 '19 at 12:07

Make image smaller, than bigger, than back to normal animation in React Native

1 Answers1