javascript - 在 React native 应用程序的屏幕中的不同项目上应用不同的动画

Question

我尝试在屏幕中的 2 个项目上应用动画。有两个图像，我想同时在两个图像上应用动画但不同的动画。一个应该从左侧滑动，另一个从右侧滑动。

我搜索了不同的来源，但一无所获。有将多个动画一起应用的示例，但这些将应用于 <Animated.View> 中的所有项目。

export default class App extends React.Component {
    componentWillMount() {
        this.animatedMargin = new Animated.Value(0);

        // I want to fire both animations from here
        setTimeout(() => {
            // this._slideAnimation('left');
            // this._slideAnimation('right');
            // I actually want to know how to achieve this
        }, 100);
    }

    _slideAnimation(direction) {
        if (direction === 'left'){
            Animated.timing(this.animatedMargin, {
                toValue: width,
                duration: 1000
            }).start();
        } else {
            Animated.timing(this.animatedMargin, {
                toValue: 0,
                duration: 1000
            }).start();
        }
    }

    render() {
        return (
            <View style={{ styles.container }}>
                {/* I want to slide this from left to right */}
                <Animated.View style={[ styles.ainmated, { left: this.animatedMargin } ]}>
                    <Image source={ left_image } />
                </Animated.View>

                {/* and this one in reverse direction */}
                <Animated.View style={[ styles.ainmated, { right: this.animatedMargin } ]}>
                    <Image source={ right_image } />
                </Animated.View>
            </View>
        );
    }
}

但是这样的话，一次只能应用一个动画。我试过Animated.parallel这样可以并行应用多个动画，但两者<Animated.View>标签将使用相同的动画而不是单独的动画

那么，如何在 React native 中同时在一个屏幕上不同的对象/组件实现不同的动画？

Answer 1

你不需要两个动画来实现这一点。

这是一个完整的工作示例:

import * as React from 'react';
import { Text,Animated,View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';

const { width } = Dimensions.get('screen')

const ITEM_SIZE = 60

export default class App extends React.Component {
  componentWillMount() {
      this.animatedMargin = new Animated.Value(0);
      setTimeout(() => {
          this._slideAnimation();
      }, 1000);
    }

    _slideAnimation() {
      Animated.timing(this.animatedMargin, {
        toValue: (width / 2) - ITEM_SIZE,
        duration: 1000
      }).start()
    }

    render() {
        return (
            <View style={ styles.container }>
                <Animated.View style={[ styles.animated, { left: this.animatedMargin } ]}>
                    <View style={[styles.imagePlaceholder, { backgroundColor: '#0070ff'}]} />
                </Animated.View>

                <Animated.View style={[ styles.animated, { right: this.animatedMargin } ]}>
                   <View style={[ styles.imagePlaceholder, {backgroundColor: '#008080'} ]} />
                </Animated.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  animated: {
    position: 'absolute'
  },
  imagePlaceholder: {
    width: ITEM_SIZE,
    height: ITEM_SIZE
  }
});