Как объединить несколько анимаций в реакцию на нативную (декларативную)?

Question

Как объединить несколько анимаций в реакцию на нативную (декларативную)?

1

Мой вопрос весьма специфичен:

Как связать две анимации, чтобы я мог перемещать элемент из X в Y, а затем из Y в Z?

Я понял, что хочу анимировать из позиции (x, y) в (x + a, y + b), а затем заставить ее "нависнуть". Я думал, что анимация продолжится с той точки, в которой она остановилась, но я оказался ошибочным... когда он выполняет цикл, он перезапускается от начального значения (0,0) вместо его последней позиции.

// this is in my index.js
class App extends Component {
  constructor(props) {
    super(props);
    this.translateValue = new Animated.ValueXY({x: 0, y: 0});
  }

  componentDidMount() {
    Animated.sequence([
      Animated.timing(this.translateValue,
        { toValue: { x: 30, y: 30 }, duration: 1000, easing: Easing.linear }),
      Animated.loop(
        Animated.sequence([
          Animated.timing(this.translateValue,
            { toValue: { x: 30, y: 20 }, duration: 1000, easing: Easing.linear }),
          Animated.timing(this.translateValue,
           { toValue: { x: 30, y: 30 }, duration: 1000, easing: Easing.linear })
        ]),
      { iterations: 1000 })
    ]).start();
  }

  render() {
    const translateTransform = this.translateValue.getTranslateTransform();
    return (
      <View style={{ flex: 1 }}>
        <Animated.View style={{
           height: 30,
           width: 30,
           backgroundColor: "blue",
           position: "absolute",
           transform: translateTransform }} />
      </View>
    );
  }
}

Нужно ли мне вызвать this.translateValue.setValue({x: 30, y: 30 }) только первая анимация последовательности закончилась? если да, то как?

Редактировать: Я искал декларативный механизм. К сожалению, я думаю, что нет никакого декларативного способа назвать setValue как часть композиции анимации.

rodrigoelp 07 янв. 2018, в 10:49

Источник

0

К сожалению, я только что получил значок с завитками, потому что никто не пытается дать ответ
rodrigoelp 23 янв. 2018, в 23:01

Теги:

javascript

react-native

animation

2 ответа

Ещё вопросы

К сожалению, я только что получил значок с завитками, потому что никто не пытается дать ответ

pie6k · Answer 1 · 2018-12-07T02-58-00.000Z

Я создал библиотеку для таких сценариев под названием AnimatedManager - https://github.com/pie6k/react-native-animated-manager

Это позволяет использовать анимации, например, обещания, например

class Foo extends Component {
  // ....
  private animated = {
    size: new AnimatedManager(20),
    rotation: new AnimatedManager(0),
    positionY: new AnimatedManager(20),
  }
  async animate() {
    const { animated } = this;
    await animated.size.spring({toValue: 50});
    await Promise.all([
      animated.rotation.timing({toValue: 50}),
      animated.size.spring({toValue: 15}),
    ]);
    await animated.positionY.spring({toValue: 100});
  }

}

Итак, короткое утверждение: «реакция» не позволяет вам setValue() разные анимации без необходимости вызова функции setValue() , верно?

amirhosein · Answer 2 · 2018-12-02T05-44-00.000Z

Animated имеет обратный вызов для завершения, и вы можете связать две анимации следующим образом:

 constructor() {
    this.state = {
        translation: 1,
    }

    this.fade = new Animated.Value(0)
}

fade_1(){
    this.fade.setValue(0)
    this.setState({translation: this.fade.interpolate({
        inputRange: [0, 1],
        outputRange: [ 1 , 0]
    })})
    Animated.timing(
        this.fade,
            {
                toValue: 1,
                duration: 3000,
                useNativeDriver: true
            }
    ).start(() => this.fade_2()) // we chain animation here
}

fade_2(){
    this.fade.setValue(0)
    this.setState({translation: this.fade.interpolate({
        inputRange: [0, 1],
        outputRange: [ 0 , 1]
    })})
    Animated.timing(
        this.fade,
            {
                toValue: 1,
                duration: 3000,
                useNativeDriver: true
            }
    ).start()

}

render() {

    return(
            <View style={{backgroundColor:'#fff' , flex:1 ,alignItems: 'center' , justifyContent: 'center' }}>


                    <Animated.View style={{width: 150 , height: 150 , alignItems: 'center', opacity: this.state.translation }}>   
                            <Image source={require('YOUR IMAGE URI')}  style={{width: 150 , height: 150}}/>
                    </Animated.View>


                    <TouchableOpacity style={{flex: 1 , alignItems: 'center', justifyContent: 'center'}}
                    onPress={()=> this.fade_1()}
                    >
                        <Text> START </Text>
                    </TouchableOpacity>

            </View>
    )

}

Привет, я искал декларативный механизм, а не императив, как вы его предоставили.