React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 动画是提高用户体验不可缺少的一个元素。恰如其分的动画可以让用户更明确的感知当前的操作是什么。 无疑在使用React Native开发应用的时候也需要动画。这就需要知道RN都给我们提供了那些动画,和每个动画可以处理的功能有哪些。 填坑材料Animated动画API提供了一些现成的组件: 一个绕着屏幕转的动画绕着屏幕转的动画: <--< | | V--^ 基本代码export default class AnimatedSquare extends React.Component { constructor(props) { super(props); // 1 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> ); } } 解释一下:
依赖和样式依赖项: import React from 'react'; import { Dimensions,StyleSheet,View,Animated } from 'react-native'; let { 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' } }); 动起来我们准备让这个目标物体,一个方框,从左上角: const SPRING_CONFIG = {tension: 2,friction: 3}; componentDidMount() { Animated.spring(this.state.pan,{ ...SPRING_CONFIG,toValue: {x: 0,y: height - SQUARE_DIMENSIONS} // return to start }).start(); }
我们指定了 依次的动动动。。。我们可以让几个动画按照顺序依次执行。这些动画会一个挨一个的执行。 componentDidMount() { Animated.sequence([ Animated.spring(this.state.pan,{ ...SPRING_CONFIG,y: height - SQUARE_DIMENSIONS} //animate to bottom left }),Animated.spring(this.state.pan,{ ...SPRING_CONFIG,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(cb); } 我们定义了四个弹簧动画。这个四个一组的动画执行的顺序就是前文指定的顺序。 重复动画调用动画的 componentDidMount() { this.startAndRepeat(); } startAndRepeat() { this.triggerAnimation(this.startAndRepeat); } triggerAnimation(cb) { Animated.sequence([ Animated.spring(this.state.pan,y: 0} // return to start }) ]).start(cb); } 调用 完整代码import React from 'react'; import { Dimensions,height } = Dimensions.get('window'); const SQUARE_DIMENSIONS = 30; const SPRING_CONFIG = {tension: 2,friction: 3}; export default class AnimatedSquare extends React.Component { constructor(props) { super(props); this.state = { pan: new Animated.ValueXY } // bind this.startAndRepeat = this.startAndRepeat.bind(this); this.getStyle = this.getStyle.bind(this); this.startAndRepeat = this.startAndRepeat.bind(this); this.triggerAnimation = this.triggerAnimation.bind(this); } componentDidMount() { this.startAndRepeat(); } startAndRepeat() { this.triggerAnimation(this.startAndRepeat); } getStyle() { return [ styles.square,{ transform: this.state.pan.getTranslateTransform() } ]; } triggerAnimation(cb) { Animated.sequence([ Animated.spring(this.state.pan,y: 0} // return to start }) ]).start(cb); } render() { return ( <View style={styles.container}> <Animated.View style={this.getStyle()} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1 },backgroundColor: 'blue' } }); 更多相关代码请移步:https://github.com/future-cha... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |