同时对两个不同的动画视图执行动画

Question

我有两个不同的图像或动画图像，它们动画显示在屏幕中央，如 gif 中所示。但是，现在我希望两个图像一起移动到设备的左端（左侧的普通幻灯片动画）。我被困在这里。我正在尝试对 onTestAnimation 进行更改，但这似乎不起作用。下面是我的 App.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

同时对两个不同的动画视图执行动画

Perform Animation on two different Animate Views together

reactjs

react-native

react-redux

react-native-android

react-native-ios