Выполните анимацию на двух разных видах анимации вместе

Question

У меня есть два разных изображения или анимированные изображения, которые анимированы к центру экрана, как показано на рисунке. Однако теперь я хочу, чтобы оба изображения вместе переместились на левый конец устройства (обычная анимация слайдов влево). Я застрял здесь. Я пытаюсь внести изменения в onTestAnimation, но это не похоже на работу. Ниже мое приложение. js файл.

import React, { Component } from 'react'
import { Animated, View, TouchableOpacity, Easing, Text } from 'react-native'

const backgroundImage = require('./assets/small_to_big.png');
const backgroundImage2 = require('./assets/small_to_medium.png');

class App extends Component {
    constructor(props) {
        super(props)
        this.animatedValue = new Animated.Value(0)
        this.animatedValue2 = new Animated.Value(0)
        this.testValue = new Animated.Value(0)
    }

    onTestAnimation = () => {
        Animated.timing(this.animatedValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.ease,
        transform: [
          {
              translateX: this.animatedValue.interpolate({
                  inputRange: [0, 100],
                  outputRange: [130, 10]
              })
          }
         // I want to know how to achieve this
        ]
    }).start();  
    }

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

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

    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity onPress={this.handleAnimation}>
                    <Text style={{fontSize : 40, marginLeft : 100, marginTop : 100}}>Transform</Text>
                </TouchableOpacity>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 60,
                        top: 400,
                        height: 10,
                        width: 10,
                        alignItems : 'center',
                        justifyContent : 'center',
                        transform: [
                            {
                                translateX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 120],
                                })
                            },
                            {
                                translateY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 25],
                                })
                            },
                            {
                                scaleX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 15]
                                })
                            },
                            {
                                scaleY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 12.5]
                                })
                            },
                        ]
                    }}
                />

                <Animated.Image
                    source={backgroundImage2}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 12,
                        top: 400,
                        height: 7,
                        width: 7,
                        alignItems : 'center',
                        justifyContent : 'center',
                        transform: [
                            {
                                translateX: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 120]
                                })
                            },
                            {
                                translateY: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 25]
                                })
                            },
                            {
                                scaleX: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 15]
                                })
                            },
                            {
                                scaleY: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 12.5]
                                })
                            },
                        ]
                    }}
                />
            </View>
        )
    }

> **Blockquote**

}

export default App

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

Вы можете использовать left и интерполировать на новую позицию

import React, { Component } from 'react'
import { Animated, View, TouchableOpacity, Easing, Text } from 'react-native'

const backgroundImage = require('./assets/icon.png');
const backgroundImage2 = require('./assets/icon.png');

class App extends Component {
    constructor(props) {
        super(props)
        this.animatedValue = new Animated.Value(0)
        this.animatedValue2 = new Animated.Value(0)
        this.testValue = new Animated.Value(0)
    }

    onTestAnimation = () => {
        Animated.timing(this.testValue, {
        toValue: 1,
        duration: 1000,
        easing: Easing.ease,
        // transform: [
        //   {
        //       translateX: this.testValue.interpolate({
        //           inputRange: [0, 100],
        //           outputRange: [-130, -10]
        //       })
        //   }
        //  // I want to know how to achieve this
        // ]
    }).start();  
    }

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

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


    render() {
        return (
            <View style={{ flex: 1 }}>
                <TouchableOpacity onPress={this.handleAnimation}>
                    <Text style={{fontSize : 40, marginLeft : 100, marginTop : 100}}>Transform</Text>
                </TouchableOpacity>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: this.testValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [60, -30],
                        }),
                        top: 400,
                        height: 10,
                        width: 10,
                        alignItems : 'center',
                        justifyContent : 'center',
                        transform: [
                            {
                                translateX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 120],
                                })
                            },
                            {
                                translateY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 25],
                                })
                            },
                            {
                                scaleX: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 15]
                                })
                            },
                            {
                                scaleY: this.animatedValue.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 12.5]
                                })
                            },
                        ]
                    }}
                />

                <Animated.Image
                    source={backgroundImage2}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: this.testValue.interpolate({
                            inputRange: [0, 1],
                            outputRange: [12, -70],
                        }),
                        top: 400,
                        height: 7,
                        width: 7,
                        alignItems : 'center',
                        justifyContent : 'center',
                        transform: [
                            {
                                translateX: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 120]
                                })
                            },
                            {
                                translateY: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 25]
                                })
                            },
                            {
                                scaleX: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 15]
                                })
                            },
                            {
                                scaleY: this.animatedValue2.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0, 12.5]
                                })
                            },
                        ]
                    }}
                />
            </View>
        )
    }


}

export default App