React Native填坑之旅--LayoutAnimation篇
jkbu5077
8年前
<p>比较精细的动画可以用 Animated 来控制。但是，在一些简单的界面切换、更新的时候所做的动画里再去计算开始值、结束值和插值器如何运作绝对是浪费时间。</p> <p>RN正好给我们提供了 LayoutAnimation 来解决这个问题。按照官方的说法： LayoutAnimation 就是用于在下一个绘制或者布局周期（render/layout cycle)里处理界面中全部视图的动画的。</p> <p>下面看一个例子：</p> <pre> <code class="language-javascript">export default class DemoLayoutAnimation extends React.Component { constructor(props) { super(props); this.state = { width: 100, height: 100, }; this._onPress = this._onPress.bind(this); } componentWillMount() { LayoutAnimation.spring(); } _onPress() { LayoutAnimation.spring(); this.setState({width: this.state.width + 20, height: this.state.height + 20}); } render() { return ( <View style={styles.container}> <View style={[styles.box, {width: this.state.width, height: this.state.height}]} /> <TouchableOpacity onPress={this._onPress}> <View style={styles.button}> <Text style={styles.buttonText}>Press me!</Text> </View> </TouchableOpacity> </View> ); } };</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/28e67b1de3a8a579a44e351d9116932e.gif"></p> <p>效果就是这样的。</p> <p>使用的时候也非常简单，只需要在更新 State 之前调用一下 LayoutAnimation.sprint() 这么一行代码。</p> <p>LayoutAnimation 默认的提供了三种动画： linear , spring 和 easeInEaseOut 。 当然，RN也留出了自定义的接口。你可以按照自己需要的自定义动画效果。</p> <p>下面看看如何自定义：</p> <pre> <code class="language-javascript">import //...略... const customAnim = { customSpring: { duration: 400, create: { type: LayoutAnimation.Types.spring, property: LayoutAnimation.Properties.scaleXY, springDamping: 0.6 }, update: { type: LayoutAnimation.Types.spring, springDamping: 0.6 } }, customLinear: { duration: 200, create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity, }, update: { type: LayoutAnimation.Types.easeInEaseOut } } }; export default class DemoLayoutAnimation extends React.Component { componentWillUpdate() { LayoutAnimation.configureNext(customAnim.customLinear); } _onPress() { // LayoutAnimation.spring(); this.setState({ width: this.state.width + 20, height: this.state.height + 20 }); } //...略... };</code></pre> <p>为了直入主题，部分内容省略。后面有完整的代码。</p> <p>自定义非常简单，当然限制也不少。只需要指定动画的 duration 、 create 和 update 。</p> <p>另外一个本例与上例不同的地方在于LayoutAnimation可以只在 componentWillUpdate() 方法里指定，不需要在点击事件里指定。</p> <h2><strong>完整代码</strong></h2> <pre> <code class="language-javascript">//@flow import React from 'react'; import { View, Text, TouchableOpacity, LayoutAnimation, StyleSheet, } from 'react-native'; const customAnim = { customSpring: { duration: 400, create: { type: LayoutAnimation.Types.spring, property: LayoutAnimation.Properties.scaleXY, springDamping: 0.6 }, update: { type: LayoutAnimation.Types.spring, springDamping: 0.6 } }, customLinear: { duration: 200, create: { type: LayoutAnimation.Types.linear, property: LayoutAnimation.Properties.opacity, }, update: { type: LayoutAnimation.Types.easeInEaseOut } } }; export default class DemoLayoutAnimation extends React.Component { constructor(props) { super(props); this.state = { width: 100, height: 100, }; this._onPress = this._onPress.bind(this); this._createAnimation = this._createAnimation.bind(this); } // componentWillMount() { // LayoutAnimation.spring(); // } componentWillUpdate() { LayoutAnimation.configureNext(customAnim.customLinear); } _onPress() { // LayoutAnimation.spring(); this.setState({ width: this.state.width + 20, height: this.state.height + 20 }); } render() { return ( <View style={styles.container}> <View style={[styles.box, { width: this.state.width, height: this.state.height }]} /> <TouchableOpacity onPress={this._onPress}> <View style={styles.button}> <Text style={styles.buttonText}>Press me!</Text> </View> </TouchableOpacity> </View> ); } }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, box: { backgroundColor: 'red' }, button: { marginTop: 10, paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black' }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold' } });</code></pre> <p> </p> <p>来自：https://segmentfault.com/a/1190000007088741</p> <p> </p>