07.01. Animated API - Erdinç Uzun

Animated API, çok çeşitli animasyon ve etkileşim modellerini çok kolay bir şekilde ifade etmemizi sağlar. Animasyon, animasyonlar arası dönüşümlerin yapılması, animasyonun başlatılıp durdurulması gibi zamana dayalı işlemlerin yönetilmesine odaklanır.

Animasyon, View, Text, Image ve ScrollView üzerine uygulanabilir. Ayrıca, Animated.createAnimatedComponent() sayesinde kendi kişisel bileşeninizi oluşturabilirsiniz. Basit bir örnek ile başlayalım. (App.js)

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // opacity için giriş değeri: 0
  }

  componentDidMount() {
    Animated.timing(                  // Animate süresi
      this.state.fadeAnim,            // animate edilecek değişken
      {
        toValue: 1,                   // opacity son değer: 1 (opaque)
        duration: 10000,              // Süre ayarı
      }
    ).start();                        // Animasyon başlasın.
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // Özel Animasyon View
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // opacity değerini animated değerine bağla
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

// FadeInView bileşenini animasyon için kullanabilirsiniz. 
// FadeInView bileşeni içindeki çocuklar animasyona katılır.
export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView style={{width: 250, height: 55, backgroundColor: 'red'}}>
          <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
        </FadeInView>
      </View>
    )
  }
}

import React from 'react';

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

class FadeInView extends React.Component {

state = {

fadeAnim: new Animated.Value(0), // opacity için giriş değeri: 0

}

componentDidMount() {

Animated.timing( // Animate süresi

this.state.fadeAnim, // animate edilecek değişken

{

toValue: 1, // opacity son değer: 1 (opaque)

duration: 10000, // Süre ayarı

}

).start(); // Animasyon başlasın.

}

render() {

let { fadeAnim } = this.state;

return (

<Animated.View // Özel Animasyon View

style={{

...this.props.style,

opacity: fadeAnim, // opacity değerini animated değerine bağla

}}

{this.props.children}

</Animated.View>

);

}

// FadeInView bileşenini animasyon için kullanabilirsiniz.

// FadeInView bileşeni içindeki çocuklar animasyona katılır.

export default class App extends React.Component {

render() {

return (

<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>

</FadeInView>

</View>

)

}

FadeInView bileşeninde öncelikle state içinde fadeAnim adındaki değişkene yeni bir Animated.Value değeri atanır. Bu değer, View’deki opacity özelliğini kontrol etmek için sayısal bir değerdir (başlangıç değeri 0). Bileşen bağlandıktan sonra Animated.Timing içinde 10 saniyede opacity değeri 1’e ulaşıncaya kadar fadeAnim değeri güncellenmeye devam eder. Ayrıca, bu bağlama işleminde Animated.Timing start ile başlatılır. render aşamasında Animated.View bileşeninin opacity değeri ile fadeAnim değeri bağlanır. this.props.children sayesinde FadeInView içindeki alt bileşenler animasyona dahil edilmiş olur. İlk çalışacak olan App sınıfından FadeInView bileşeni yukarıdaki gibi kullanılabilir.