ReactNative Animated 动画详解

In 未分类 on 2016年01月21日 by TAT.will view: 37,465

最近 ReactNative（以下简称 RN）在前端的热度越来越高，不少同学开始在业务中尝试使用 RN，这里着重介绍一下 RN 中动画的使用与实现原理。

使用篇

var React = require('react-native');

var {

Animated,

Easing,

View,

StyleSheet,

Text

} = React;

var Demo = React.createClass({

getInitialState() {

return {

fadeInOpacity: new Animated.Value(0) // 初始值

};

componentDidMount() {

Animated.timing(this.state.fadeInOpacity, {

toValue: 1, // 目标值

duration: 2500, // 动画时间

easing: Easing.linear // 缓动函数

}).start();

render() {

return (

<Animated.View style={[styles.demo, {

opacity: this.state.fadeInOpacity

}]}>

</Animated.View>

);

}

});

var