Easing Metodu-React Native Hooks ile Animasyon-7

Easing Metodu:Animasyonlardaki hareketililiği ayarlar.4 işlevi vardır. Bunlar:

-back: nesnenin ileri gitmeden önce biraz geriye gittiği temel bir animasyon sağlar.

-bounce: zıplayan bir animasyon sağlar.

-ease: temel ataletsel animasyon sağlar.

-elastic: temel yay etkileşimi sağlar.

import React, {useEffect, useState} from 'react';
import {View, TouchableWithoutFeedback,Dimensions, Animated, Text, StyleSheet,Easing} from "react-native";
const AnimasyonDeneme = () => {
    const animation=new Animated.Value(0);
    const startAnimation = () => {
        Animated.timing(animation,
                {
                    toValue: Dimensions.get('window').width-200,
                    duration: 1000,
                    //easing:Easing.bounce,  //gidip çarpar
                   // easing:Easing.back(5),  //gri gelip gider çarpar
                   easing:Easing.elastic(5),  //elastik gibi gitgel yapar çarptıgı yerde(5 kere gitgeldemiş olduk.)
                }).start();
    };
    const animatedStyle={
        transform:[
            {
                translateX:animation
            }
        ]
    }
    return (
        <View style={styles.container}>
            <TouchableWithoutFeedback
                onPress={() => startAnimation()}>
                <Animated.View
                    style={[styles.myBox, animatedStyle]}>
                    <Text>Acz, fakr, şefkat, tefekkü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;