反应本地链接/取消链接动画值

Question

我正在尝试将一个 leader 动画值与一个或多个 followers 动画值链接/取消链接。

我可以使用它，但是我想知道是否有更好的方法可以真正实现这一目标。

这是当前的实现：

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

它看起来像：