07.02.04. Animated.spring()

Animated.spring(), Animated.timing()’te olduğu gibi belirli bir süre tanımlamak zorunda kalmadan baştan sona animasyon sağlayacak değerleri tanımlamamıza olanak sağlar.

Bu işlemi çok farklı ayar değerleri üzerinden yapar. Bu değerler hakkında bilgi almak için tıklayın.

Basit bir button oluşturup bu button ile spring işlemini tetikleyelim.

import React, { Component } from 'react';
import { Animated, Easing, View, Button} from 'react-native';

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

  springOynat () {
    this.springDegeri.setValue(0.3)
    Animated.spring(
      this.springDegeri,
      {
        toValue: 1,
        friction: 1
      }
    ).start()
  }

  render() {
    return (
      <View style={{flex: 1, marginTop: 100, justifyContent: 'center', alignItems: 'center'}}>
      <Button
        onPress={this.springOynat.bind(this)}
        title="Spring Test"
        color="#841584"
      />
        <Animated.Image
          style={{ width: 227, height: 200, transform: [{scale: this.springDegeri}] }}
          source={require('./img/reactjs.png')}/>
      </View>
    )
  }
}

import React, { Component } from 'react';

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

export default class App extends Component {

constructor(props) {

super(props);

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

}

springOynat () {

this.springDegeri.setValue(0.3)

Animated.spring(

this.springDegeri,

{

toValue: 1,

friction: 1

}

).start()

}

render() {

return (

<Button

onPress={this.springOynat.bind(this)}

title="Spring Test"

color="#841584"

<Animated.Image

style={{ width: 227, height: 200, transform: [{scale: this.springDegeri}] }}

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

</View>

)

}

spring işlemi springOynat fonksiyonu içinde bulunmaktadır. Button bu fonksiyonu tetikler. Animated.spring() bir value (animasyon için -springDegeri ) ve de config nesnesi (Spring içindeki parametreler) olmak üzere iki ana argümandan oluşur. Config nesnesi, toValue (number), overshootClamping (boolean), restDisplacementThreshold (number), restSpeedThreshold (number), velocity (number), bounciness (number), speed (number), tension (number), and friction (number) özelliklerini içerir. Burada gerekli tek değer toValue argümanıdır. Ancak, friction ve tension’da animasyonu daha iyi kontrol ermek için çok sık kullanılan argümanlardır. start, Animated.spring işlemini başlatır. Burada, scale parametresine spring değerini bağladık, bu sayede scale özelliğinde belirtilen süre içinde bir scale animasyonu elde edilecektir.