【译】React Native 动画 API 入门实例

时间 2019-11-06

标签 react native 动画 api 入门实例栏目 React 繁體版

原文原文链接

翻译自 React-native Animated API Basic Example
翻译过程当中有删改javascript

简介

本文是探索 react-native 中实现的的 Animated API，Web 版本上的 React 没有该 API，不过可使用在 react-europe 大会上发布的 react-motion。
本文中将会完成一个动画例子，效果以下图
html

原理

Animated API的原理并不是经过 setState 方法使 react 重渲染，而是使用 setNativeProps 方法更新 native 视图。
Animated API 导出了几个特殊的 components：Animated.View, Animated.Text, 和 Animated.Image。Animated API 直接在 Objective-C 的 native 环境中调整这些 components 的外观样式，跳过了 JS 环境中 react 的 diff 与 reconciliation 过程，从而得到流畅、高效的动画。
简而言之，它将对动画中变化的属性数值作插值运算而且刷新 native 视图。java

动画效果：沿屏幕移动的方块

咱们将实现一个简单的动画效果：沿手机屏幕四个边，按照左上角 -> 左下角 -> 右下角 -> 右上角的顺序，移动一个正方形。示意图大概以下react

< -- <           
|    |          
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>
        );
    }
}

上面代码中有几个须要解释的地方。
注意咱们所创建的 component 的 state 是 Animated.ValueXY 的一个实例。这个 API 将在 X、Y 两个值上进行插值。git

getStyle() 方法，返回一个样式对象数组。包括描述了方块宽高大小的 square 基本样式，以及最为重要的，一个 transform 样式对象。
咱们使用 getTranslateTransform 这个 Animated API 中的 helper 方法，来返回一个适合 transform 属性结构的值。
这个返回值的结构相似于[{ translateX: xValue}, {translateY: yValue}]，xValue 和 yValue 是计算后的插值。github

最后咱们使用 Animated.View，表示这个组件是可动画组件。spring

移动正方形

一开始正方形是静止在左上角的，如今咱们把它从左上角（x = 0, y = 0）移动到左下角（x = 0, y = (屏幕高 - 正方形高)）react-native

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();
    }

在组件装载后，咱们经过 Animated.spring 进行 Spring（弹性）动画，咱们给弹性动画设置了 SPRING_CONFIG 配置，包括 tension（张力）和 friction（摩擦）值，因此正方形到达左下角后，会有一个小小回弹动画。api

再动，又动，还动

咱们会创建一个顺序的动画序列，让动画一个接一个进行。固然除了 sequence（顺序），你还能够按 parallel（并行）组合动画效果，让动画同时进行。数组

componentDidMount() {
    Animated.sequence([
      Animated.spring(this.state.pan, {
        ...SPRING_CONFIG,
        toValue: {x: 0, 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
      }),
      Animated.spring(this.state.pan, {
          ...SPRING_CONFIG,
          toValue: {x: width - SQUARE_DIMENSIONS, y: 0} //animate to top right
      }),
      Animated.spring(this.state.pan, {
          ...SPRING_CONFIG,
          toValue: {x: 0, y: 0} // return to start
      })
    ]).start();
}

如以前设想的同样，咱们定义了4个弹性动画。注释解释了动画移动方向。

一直不停动

Animated.sequence(animtionList: Arrary).start(cb: Function);

动画序列的start方法能够传一个回调函数，在动画所有执行完时触发。在咱们的例子中，这时候正方形回到了起点，咱们能够从新开始一遍动画。

componentDidMount() {
    this.startAndRepeat();
}

startAndRepeat() {
    this.triggerAnimation(this.startAndRepeat);
}

triggerAnimation(cb) {
    Animated.sequence([
        Animated.spring(this.state.pan, {
            ...SPRING_CONFIG,
            toValue: {x: 0, 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
        }),
        Animated.spring(this.state.pan, {
            ...SPRING_CONFIG,
            toValue: {x: width - SQUARE_DIMENSIONS, y: 0} //animate to top right
        }),
        Animated.spring(this.state.pan, {
            ...SPRING_CONFIG,
            toValue: {x: 0, y: 0} // return to start
        })
     ]).start(cb);
 }

咱们把动画逻辑提取为一个方法，在完成回调函数中触发它。

所有代码

import React, {  
    AppRegistry,
    Component, 
    Dimensions,  
    StyleSheet,  
    View,  
    Animated 
} from 'react-native';
const { width,  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,
                toValue: {x: 0, 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
            }),
            Animated.spring(this.state.pan, {
                ...SPRING_CONFIG,
                toValue: {x: width - SQUARE_DIMENSIONS, y: 0} //animate to top right
            }),
            Animated.spring(this.state.pan, {
                ...SPRING_CONFIG,
                toValue: {x: 0, 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  
    },  
    square: {    
        width: SQUARE_DIMENSIONS,    
        height: SQUARE_DIMENSIONS,    
        backgroundColor: 'blue'  
    } 
});

AppRegistry.registerComponent('AnimatedSquare', () => AnimatedSquare);

其它一些范例

react-native-animated-demo-tinder
UIExplorer Animated example