07.02.06. Animated.sequence()

Animated.sequence(), bir dizi animasyonu sırayla başlatır. Başka bir deyişle, bir animasyon bitmeden diğeri başlamaz. Eğer çalışan animasyon durdurulursa, diğer animasyonlara geçilmez.

Bu bölümde 20×20’lik kırmızı bileşenlerden 500 tane üretip sırasıyla üretilmesini sağlayacağız. Kod:

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

const dizi = []
for (let i = 0; i < 500; i++) {
  dizi.push(i)
}

export default class App extends Component {
  constructor () {
    super()
    this.animasyonDegeri = []
    dizi.forEach((value) => {
      this.animasyonDegeri[value] = new Animated.Value(0)
    })
  }

  componentDidMount () {
    this.animate()
  }

  animate () {
    const animasyonlar = dizi.map((item) => {
      return Animated.timing(
        this.animasyonDegeri[item],
        {
          toValue: 1,
          duration: 50
        }
      )
    })
    Animated.sequence(animasyonlar).start()
  }

  render () {
    const animasyonlar = dizi.map((a, i) => {
      return <Animated.View key={i} 
      style={{opacity: this.animasyonDegeri[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
    })

    return (
      <View style={styles.container}>
        {animasyonlar}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap'
  }
})

import React, { Component } from 'react';

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

const dizi = []

for (let i = 0; i < 500; i++) {

dizi.push(i)

}

export default class App extends Component {

constructor () {

super()

this.animasyonDegeri = []

dizi.forEach((value) => {

this.animasyonDegeri[value] = new Animated.Value(0)

})

}

componentDidMount () {

this.animate()

}

animate () {

const animasyonlar = dizi.map((item) => {

return Animated.timing(

this.animasyonDegeri[item],

{

toValue: 1,

duration: 50

}

)

})

Animated.sequence(animasyonlar).start()

}

render () {

const animasyonlar = dizi.map((a, i) => {

return <Animated.View key={i}

style={{opacity: this.animasyonDegeri[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />

})

return (

{animasyonlar}

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'row',

flexWrap: 'wrap'

}

})

500’lük bir dizi oluşturup, bu dizinin 500 değeri için constructor bölümünde animasyon değeri üretildi. componentDidMount bağlantıdan sonra çalışır, ve animate fonksiyonunu tetikler. animate fonksiyonu içinde dizideki her eleman için aynı timing değerleri ayarlanır. Ardından bu değerler sequence bölümünde alınıp start ile işlem başlatılır. render bölümünde 500 tane Animated.View oluşturulup animasyon değerine bağlanır. Burada opacity üzerinden görünürlükleri değiştirilmiştir.