07.02.01. Animated.timing()

Aynı anda bir dizi animasyonun tümünü başlatır.

İlk örnekte bu metodu kullanmıştık. Bu metodu daha açacak olursak:

Animated.timing(
  birDeger,
  {
    toValue: gidecegiDeger,
    duration: sure,
    easing: easingFunction,
    delay: gecikme
  }
)

Animated.timing(

birDeger,

{

toValue: gidecegiDeger,

duration: sure,

easing: easingFunction,

delay: gecikme

}

)

Animated.timing iki parametresi vardır. Birinci parametre değişecek değişkeni belirtirken ikinci parametre 4 alt parametreden oluşur. Bu 4 parametre (toValue (ulaşacağı değer), duration (süre), easing (yumuşatma türü) ve delay (geçikme süresi)) bu değerin ayarlanmasında kullanılır. Ekrandaki bir resmi döndürme işlemi yapan bir örnek yapalım. Easing hakkında bir sonraki bölümde bir örnek yapacağız.

import React, { Component } from 'react';
import { Animated, StyleSheet, Text, View, Image, Easing} from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.donusDegeri = new Animated.Value(0);
    }

    componentDidMount() {
        this.dondur();
    }

    dondur() {
        this.donusDegeri.setValue(0)
        Animated.timing(
            this.donusDegeri,
            {
                toValue: 1,
                duration: 4000,
                easing: Easing.linear
            }
        ).start(() => this.dondur())
    }

    render() {
        const don = this.donusDegeri.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        });

        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Animated.Image
            style = {{ width: 140, height: 140, 
                        transform: [{
                        rotate: don
                    }] } }
            source={require('./img/reactjs.png')}
            />
            </View>    
        );
    }
}

import React, { Component } from 'react';

import { Animated, StyleSheet, Text, View, Image, Easing} from 'react-native';

export default class App extends Component {

constructor(props) {

super(props);

this.donusDegeri = new Animated.Value(0);

}

componentDidMount() {

this.dondur();

}

dondur() {

this.donusDegeri.setValue(0)

Animated.timing(

this.donusDegeri,

{

toValue: 1,

duration: 4000,

easing: Easing.linear

}

).start(() => this.dondur())

}

render() {

const don = this.donusDegeri.interpolate({

inputRange: [0, 1],

outputRange: ['0deg', '360deg']

});

return (

<Animated.Image

style = {{ width: 140, height: 140,

transform: [{

rotate: don

}] } }

source={require('./img/reactjs.png')}

</View>

);

}

donusDegeri değişkenine yeni bir Animated.Value tanımlıyoruz ve başlangıç için 0 (sıfır) atıyoruz. componentDidMount olduğunda dondur fonksiyonunu başlatıyoruz. Bu fonksiyon:

donusDegeri değişkenini kullanarak render metoduna verileri taşır.
Animated.timing metodunu çağırır. start methodunu çağırdık ve içinde bir callback fonksiyon tanımladık. Bu metodun parametreleri ayarlandıktan sonra start metodunu çağrılır. Olayın tekrarlaması için bir callback fonksiyonu da ekledik.

render bölümündeki this.donusDegeri.interpolate fonksiyonu ile const don değerine 0deg ile 360deg arasında bir geçiş attık. interpolate() methodu inputRange’e girilen değerleri outputRange’e uygun olarak değiştirir ve değerleri oluşturur. Başka bir deyişle 0-1 (veya 0-100 değiştirilebilir) arasındaki değerler interpolate sayesinde 0deg ile 360deg arasına çevrilir. Aynı işlemleri renkler içinde uygulanabilir. Son olarak, Animated.Image bileşeninin style içindeki transform özelliği rotate: don ile dinamik olarak timing üzerinden ayarlanır.