07.02.07. Animated.stagger()

Animated.stagger(), animasyon dizisi paralel çalışırken ardışık gecikmeler (delay) sırasıyla başlatılır.

Bir önceki örnekte sadece Animated.sequence bölümünü değiştirip işleme başlıyoruz.

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

const dizi = []
for (var 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: 4000
        }
      )
    })
    Animated.stagger(10, 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 (var 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: 4000

}

)

})

Animated.stagger(10, 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'

}

})

stagger içindeki 10 değeri kaç değerin aynı anda başlatılacağını belirler. Bir anlamda hem paralellik hem de gecikme (delay) söz konusudur.