Translate Position-React Native Hooks ile Animasyon -2

Translate Position: Bir elemanı bir yerden başka bir yere götürmek için, yani pozisyonunu değiştirmek için kullanılır .

Örnek:

import React, {useEffect, useState} from 'react';
import {View, TouchableWithoutFeedback, Animated, Text, StyleSheet} from "react-native";
const AnimasyonDeneme = () => {
    const animation = new Animated.Value(0);
    const startAnimation = () => {
        Animated.timing(animation,
            {
                toValue: -300,
                duration: 300
            }).start();
    };
    const animatedStyle={
        transform:[{
            translateY:animation,
        }]
    };
    return (
        <View style={styles.container}>
            <TouchableWithoutFeedback
                onPress={() => startAnimation()}>
                <Animated.View
                    style={[styles.myBox, animatedStyle]}>
                    <Text>Mâlâyaniyle iştigal, maksadı geri bırakır!</Text>
                </Animated.View>
            </TouchableWithoutFeedback>
        </View>
    )
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    myBox: {
        width: 200,
        height: 200,
        backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center'
    }
})
export default AnimasyonDeneme;