首页 > iOS 开发, 随感 > React Native 实践 — 动画

React Native 实践 — 动画

2015年11月27日 吴颖敏 发表评论 阅读评论
伴随着 react native v0.15 的update, 解决了不少问题,今天如之前说的一样,这里介绍下react native的动画.
React native的动画主要也是通过位移来做的。 设置初期Animated.ValueXY或者Animated.Value来初始化需变化的值。
 class FadeInView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       fadeAnim: new Animated.Value(0), // init opacity 0
     };
   }
   componentDidMount() {
     Animated.timing(          // Uses easing functions
       this.state.fadeAnim,    // The value to drive
       {toValue: 1},           // Configuration
     ).start();                // Don't forget start!
   }
   render() {
     return (
        // Binds
         {this.props.children}

     );
   }
 }
官方的例子设置为opacity的变化,也可以使用
 style={{
   opacity: this.state.fadeAnim, // Binds directly
   transform: [{
     translateY: this.state.fadeAnim.interpolate({
       inputRange: [0, 1],
       outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0
     }),
   }],
 }}>
这里 inputRange代表opacity值, outputRange代表Y轴变化的值,这里会做相关的对应。
Animated 自身也做了一些效果spring,easing, 通过官方的文档都可以实现。
这里注意一点easing,spring都有不少内质的效果,包括bezier具体可以参考其Animated Labraries.
总体来说View layoutanimation都很流畅,效果也不错。 下篇jason将介绍下新版的 textinput 功能

———EOF———

作者: 吴颖敏 | www.futurehandw.com
Email: wuyingminhui@gmail.com
转载请注明来源:吴颖敏 - www.futurehandw.com



  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.