Применяйте различные анимации к различным элементам на экране собственного приложения React - PullRequest
Новая
       36

Применяйте различные анимации к различным элементам на экране собственного приложения React

1 голос
/ 14 июня 2019

Я пытался применить анимацию к 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?

1 Ответ

2 голосов
/ 14 июня 2019

Вам не нужны две анимации для достижения этой цели.

Вот полный рабочий пример: 

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