Absolute Position-React Native Hooks ile Animasyon-5

Absolute Position kullanarak animasyon yapma: Bir nesneyi aynı oranda küçültme ya da büyültme işlemini gerçekleştirir.

Örnek:

import React, {useEffect, useState} from 'react';
import {View, TouchableWithoutFeedback, Animated, Text, StyleSheet} from "react-native";
//alttan, sağ ve soldan  30 px lik bir küçültme yapma animasyonu
const AnimasyonDeneme = () => {
    const animation = new Animated.Value(0);
    const startAnimation = () => {
        Animated.timing(animation, {
            toValue: 30,
            duration: 500,
        }).start();
    };
    const animatedStyle = {
        right: animation,
        left: animation,
        bottom: 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: {
        height: 200,
        backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute', // Burada absolute değerini verdik.
        bottom: 0,
        right: 0,
        left: 0,
    }
});
export default AnimasyonDeneme;