【译】React Native 动画 API 入门实例
翻译自 React-native Animated API Basic Example 简介本文是探索 原理
动画效果:沿屏幕移动的方块我们将实现一个简单的动画效果:沿手机屏幕四个边,按照左上角 -> 左下角 -> 右下角 -> 右上角的顺序,移动一个正方形。示意图大概如下 < -- < | | V -- ^ 开始导入依赖import React,{ AppRegistry,Component,Dimensions,StyleSheet,View,Animated } from 'react-native'; const { width,height } = Dimensions.get('window'); const SQUARE_DIMENSIONS = 30; 样式const styles = StyleSheet.create({ container: { flex: 1 },square: { width: SQUARE_DIMENSIONS,height: SQUARE_DIMENSIONS,backgroundColor: 'blue' } }); 基本逻辑class AnimatedSquare extends Component { constructor(props) { super(props); this.state = { pan: new Animated.ValueXY() } } getStyle() { return [styles.square,{ transform: this.state.pan.getTranslateTransform() }]; } render() { return ( <View style={styles.container}> <Animated.View style={this.getStyle()} /> </View> ); } } 上面代码中有几个需要解释的地方。
最后我们使用 移动正方形一开始正方形是静止在左上角的,现在我们把它从左上角( const SPRING_CONFIG = {tension: 2,friction: 3}; //Soft spring //... componentDidMount() { Animated.spring(this.state.pan,{ ...SPRING_CONFIG,toValue: {x: 0,y: height - SQUARE_DIMENSIONS} // return to start }).start(); } 在组件装载后,我们通过 再动,又动,还动我们会建立一个顺序的动画序列,让动画一个接一个进行。当然除了 sequence(顺序),你还可以按 parallel(并行)组合动画效果,让动画同时进行。 componentDidMount() { Animated.sequence([ Animated.spring(this.state.pan,{ ...SPRING_CONFIG,y: height - SQUARE_DIMENSIONS} //animate to bottom left }),Animated.spring(this.state.pan,toValue: {x: width - SQUARE_DIMENSIONS,y: height - SQUARE_DIMENSIONS} // animated to bottom right }),y: 0} //animate to top right }),y: 0} // return to start }) ]).start(); } 如之前设想的一样,我们定义了4个弹性动画。注释解释了动画移动方向。 一直不停动Animated.sequence(animtionList: Arrary).start(cb: Function); 动画序列的 componentDidMount() { this.startAndRepeat(); } startAndRepeat() { this.triggerAnimation(this.startAndRepeat); } triggerAnimation(cb) { Animated.sequence([ Animated.spring(this.state.pan,{ ...SPRING_CONFIG,y: height - SQUARE_DIMENSIONS} //animate to bottom left }),y: height - SQUARE_DIMENSIONS} // animated to bottom right }),y: 0} //animate to top right }),y: 0} // return to start }) ]).start(cb); } 我们把动画逻辑提取为一个方法,在完成回调函数中触发它。 全部代码import React,height } = Dimensions.get('window'); const SQUARE_DIMENSIONS = 30; const SPRING_CONFIG = {tension: 2,friction: 3}; class AnimatedSquare extends Component { constructor(props) { super(props); this.state = { pan: new Animated.ValueXY() } } componentDidMount() { this.startAndRepeat(); } startAndRepeat() { this.triggerAnimation(this.startAndRepeat); } triggerAnimation(cb) { Animated.sequence([ Animated.spring(this.state.pan,{ ...SPRING_CONFIG,y: height - SQUARE_DIMENSIONS} //animate to bottom left }),y: height - SQUARE_DIMENSIONS} // animated to bottom right }),y: 0} //animate to top right }),y: 0} // return to start }) ]).start(cb); } getStyle() { return [styles.square,{ transform: this.state.pan.getTranslateTransform() }]; } render() { return ( <View style={styles.container}> <Animated.View style={this.getStyle()} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 },backgroundColor: 'blue' } }); AppRegistry.registerComponent('AnimatedSquare',() => AnimatedSquare); 其它一些范例react-native-animated-demo-tinder 相关资源Cheng Lou – The State of Animation in React at react-europe 2015 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |