Animated.Decay() metodunun tipik kullanımı, belirli bir hızla hareket edebilen bir şeyi almak ve yavaşlama uygulamak içindir. Örneğin, bir nesneyi bir noktadan diğer noktaya taşırken kullanılabilir. Bu özellik sayesinde nesne daha iyi bir şekilde hareket ettirilir. Bu bölümde, PanResponder ile olayları (event) ve bu olaylarla sürekle ve bırak (drag and drop) olayını gerçekleştireceğiz.
Sürükleme bırak özelliği olan bir bileşen yapalım ve onu ekranda taşıyalı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 65 66 67 68 69 70 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Animated, PanResponder} from 'react-native'; export default class App extends Component { componentWillMount() { this.animatedValue = new Animated.ValueXY(); this._value = {x: 0, y: 0} this.animatedValue.addListener((value) => this._value = value); this.panResponder = PanResponder.create({ onStartShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onPanResponderGrant: (e, gestureState) => { this.animatedValue.setOffset({ x: this._value.x, y: this._value.y, }) this.animatedValue.setValue({ x: 0, y: 0}) }, onPanResponderMove: Animated.event([ null, { dx: this.animatedValue.x, dy: this.animatedValue.y} ]), onPanResponderRelease: (e, gestureState) => { this.animatedValue.flattenOffset(); Animated.decay(this.animatedValue, { deceleration: 0.997, velocity: { x: gestureState.vx, y: gestureState.vy } }).start(); }, }) } render() { const animatedStyle = { transform: this.animatedValue.getTranslateTransform() } return ( <View style={styles.container}> <Animated.View style={[styles.box, animatedStyle]} {...this.panResponder.panHandlers}> <Text style={styles.text}>Drag Me</Text> </Animated.View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, box: { width: 150, height: 150, backgroundColor: "#333", alignItems: "center", justifyContent: "center", }, text: { color: "#FFF", fontSize: 20, } }); |
Bileşen bağlandıktan sonra panResponder API’si metotları ayarlanır. Bu metotlar için tıklayın. onPanResponderRelease metodu bileşen bırakıldıktan sonra devreye girer. Animated.decay metodu bu noktada devreye girer.
Basit bir oyun örneği için tıklayın.