Easing, React Native ile gelen bir modüldür. Hazırda bulunan tanımlı linear, ease, quad, cubic, sin, elastic, bounce, back, bezier, in, out, inout ve diğer değerleri alabilir. Örneğin linear tutarlı doğrusal bir hareket oluşturmak için kullanılır. interpolate() metodu inputRange’teki değerleri outputRange’e uygun olarak değiştirir ve bir geçiş oluşturur.
Bu bölümde tüm özellikleri teker teker anlatma yerine bir örnek üzerinde tüm metotları kullanacağım. (Kullandığım örnek için tıkla.)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React, { Component } from 'react'; import { Animated, StyleSheet, Text, View, Image, Easing, TouchableHighlight, ScrollView} from 'react-native'; export default class App extends Component { constructor () { super() this.animatedValue = new Animated.Value(0) } animate (easing) { this.animatedValue.setValue(0) Animated.timing( this.animatedValue, { toValue: 1, duration: 1000, easing } ).start() } render () { const marginLeft = this.animatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, 260] }) return ( <View style={styles.container}> <Animated.View style={[styles.block, {marginLeft} ]} /> <ScrollView> <Text style={{textAlign: 'center'}}>Daha fazla animasyon için scroll yapabilirsiniz.</Text> <MyButton easing='Bounce' onPress={this.animate.bind(this, Easing.bounce)} /> <MyButton easing='Cubic' onPress={this.animate.bind(this, Easing.cubic)} /> <MyButton easing='Back' onPress={this.animate.bind(this, Easing.back(2))} /> <MyButton easing='Elastic' onPress={this.animate.bind(this, Easing.elastic(2))} /> <MyButton easing='Ease' onPress={this.animate.bind(this, Easing.ease)} /> <MyButton easing='InOut' onPress={this.animate.bind(this, Easing.inOut(Easing.quad))} /> <MyButton easing='In' onPress={this.animate.bind(this, Easing.in(Easing.quad))} /> <MyButton easing='Out' onPress={this.animate.bind(this, Easing.out(Easing.quad))} /> <MyButton easing='Sin' onPress={this.animate.bind(this, Easing.sin)} /> <MyButton easing='Linear' onPress={this.animate.bind(this, Easing.linear)} /> <MyButton easing='Quad' onPress={this.animate.bind(this, Easing.quad)} /> </ScrollView> </View> ); } } const MyButton = ({onPress, easing}) => ( <TouchableHighlight style={styles.MyButton} onPress={onPress}> <Text>{easing}</Text> </TouchableHighlight> ) const styles = StyleSheet.create({ container: { flex: 1, marginTop: 60 }, MyButton: { height: 60, marginLeft: 10, marginRight: 10, backgroundColor: '#ededed', justifyContent: 'center', alignItems: 'center', marginTop: 10 }, block: { width: 50, height: 50, backgroundColor: 'red' } }); |
Bu bölümde hazır Button bileşeni yerine TouchableHighlight kullanılıp kendi kişisel button’umuz oluşturulmuştur. İnternetteki örneklerde buna da rastlayabileceğiniz için bu Button’u kullanıyorum.
interpolate konusu daha iyi anlamak için farklı interpolate’ler tanımlayacağım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React, { Component } from 'react'; import { Animated, StyleSheet, Text, View, Easing} from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.animasyonDegeri = new Animated.Value(0); } componentDidMount() { this.oynat() } oynat() { this.animasyonDegeri.setValue(0) Animated.timing( this.animasyonDegeri, { toValue: 1, duration: 2000, easing: Easing.linear } ).start(() => this.oynat()) } render() { const marginLeft = this.animasyonDegeri.interpolate({ inputRange: [0, 1], outputRange: [0, 300] }) const opacity = this.animasyonDegeri.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] }) const movingMargin = this.animasyonDegeri.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 300, 0] }) const textSize = this.animasyonDegeri.interpolate({ inputRange: [0, 0.5, 1], outputRange: [18, 32, 18] }) const rotateX = this.animasyonDegeri.interpolate({ inputRange: [0, 0.5, 1], outputRange: ['0deg', '180deg', '0deg'] }) return ( <View style={{flex: 1, marginTop: 100}}> <Animated.View style={{ marginLeft, height: 30, width: 40, backgroundColor: 'red'}} /> <Animated.View style={{ opacity,marginTop: 10, height: 30, width: 40, backgroundColor: 'blue'}} /> <Animated.View style={{ marginLeft: movingMargin, marginTop: 10, height: 30, width: 40, backgroundColor: 'orange'}} /> <Animated.Text style={{ fontSize: textSize, marginTop: 10, color: 'green'}} > Animasyonlu yazı </Animated.Text> <Animated.View style={{ transform: [{rotateX}], marginTop: 50, height: 30, width: 40, backgroundColor: 'black'}}> <Text style={{color: 'white'}}>Bu TransformX kullanıyor</Text> </Animated.View> </View> ) } } |