Interpolate Metodu-React Native Hooks ile Animasyon-6

INTERPOLATE : React Native de en çok kullanılan metodlardan biridir.Animasyonlardaki değişiklikleri geçişli bir şekilde yapmamıza yarar.

Örnek : Sarıdan kırmızıya geçiş işlemi.

const AnimasyonDeneme = () => {
    const animation = new Animated.Value(0);
    const animation2 = new Animated.Value(0);
    const startAnimation = () => {
        Animated.timing(animation2, {
            duration: 300,
            toValue: 1
        }).start();
        Animated.timing(animation, {
            toValue: 120,
            duration: 500,
        }).start();
    };
    const interpolate = animation2.interpolate({
        inputRange: [0, 1],
        outputRange: ['yellow', 'red']
    })
    const animatedStyle = {
        right: animation,
        left: animation,
        bottom: animation,
        backgroundColor: interpolate
    };
    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>
    )
};

Döndürmeli işlemlerde INTERPOLATE kullanımı:

Ö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 animation3 = new Animated.Value(0);
    const animation2 = new Animated.Value(0);
    const startAnimation = () => {
        Animated.timing(animation2, {
            duration: 300,
            toValue: 1
        }).start();
        Animated.timing(animation, {
            toValue: 120,
            duration: 500,
        }).start();
        //döndürme işlemi
        Animated.timing(animation3, {
            toValue: 360,
            duration: 500,
        }).start();
    };
    //döndürme
    const dondurInterpolate = animation3.interpolate({
        inputRange: [0, 360],
        outputRange: ['0deg','360deg' ]
    });
    const interpolate = animation2.interpolate({
        inputRange: [0, 1],
        outputRange: ['yellow', 'red']
    });
    const textInterpolate=animation2.interpolate({
        inputRange:[0,1],
        outputRange: ['black', 'white']
        }
    )
    const animatedStyle = {
        right: animation,
        left: animation,
        bottom: animation,
        backgroundColor: interpolate,
        //döndürme
        transform:[{
            rotate : dondurInterpolate }]
    };
    const textAnimatedStyle={
        color:textInterpolate,
    }
    return (
        <View style={styles.container}>
            <TouchableWithoutFeedback
                onPress={() => startAnimation()}>
                <Animated.View
                    style={[styles.myBox, animatedStyle]}>
                    <Animated.Text style={textAnimatedStyle}>Mâlâyaniyle iştigal, maksadı geri bırakır!</Animated.Text>
                </Animated.View>
            </TouchableWithoutFeedback>
        </View>
    )
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    myBox: {
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        bottom: 0,
        right: 0,
        left: 0,
    }
});
export default AnimasyonDeneme;