Реагировать на родную ссылку / отменить анимированные значения - PullRequest
Новая
       21

Реагировать на родную ссылку / отменить анимированные значения

0 голосов
/ 28 июня 2019

Я пытаюсь связать / отменить связь одного лидера анимированного значения с одним или несколькими подписчиками анимированных значений.

Я понимаю, что это работает, но мне интересно, есть ли лучший способ добиться этого.

Вот текущая реализация: 

import React, { FC, useState, useRef } from 'react'
import { RectButton } from 'react-native-gesture-handler'
import { View, Animated, StyleSheet, Text } from 'react-native'
import {  PanGestureHandlerGestureEvent as Event } from 'react-native-gesture-handler'
import { Draggable } from 'app/components'

const SharedAnimations: FC = function(){

    const [linked, setLinked] = useState(true)

    const translateY = useRef(new Animated.Value(0))
    const offsetY = useRef(0)

    const translate2Y = useRef(new Animated.Value(0))
    const offset2Y = useRef(0)


    function onDoneMoving({ nativeEvent }: Event){

        offsetY.current += nativeEvent.translationY
        updateTranslate(translateY.current, offsetY.current)
        if(linked){
            offset2Y.current += nativeEvent.translationY
        }
    }

    function onMoving({ nativeEvent}: Event){
        if(linked){
            translate2Y.current.setOffset(offset2Y.current)
            translate2Y.current.setValue(nativeEvent.translationY)
        }
    }

    return (
        <View style={{flex: 1}}>

            <Draggable 
                translateY={translateY.current}
                onDoneMoving={onDoneMoving}
                onMoving={onMoving}
            >
                <View style={[styles.box, { left: 80, top: 20 }]} />
            </Draggable>

            <Animated.View style={[{ transform: [ { translateY: translate2Y.current }]}]}>
                <View style={[styles.box, { left: 200 }]} />
            </Animated.View>

            <View style={styles.btnContainer}>
                <RectButton onPress={() => setLinked(!linked)} style={styles.btn}>
                    <Text style={styles.btnText}> { linked ? 'Unlink' : 'Link'}</Text>
                </RectButton>
            </View>
        </View>
    )
}

Так это выглядит так:

Animation

...