React Native的动画(二)

前言

上一节中,介绍了React Native的LayoutAnimation。LayoutAnimation可以用来开发简单的动画。但面对组合动画的开发,就不那么方便了。因此,在React Native中还有一个Animated来完成复杂动画的开发。

Animated

Animated类似于一个单纯的值动画类。它本身并不完成任何动画的功能实现。我们通常将它设进state中。然后在合适的时机,调用Animated.timing().start()来开始执行动画。动画本身,以参数的形式传入timing方法中。如下面的代码所示:我们在创建Animated时,传入初始值为0。然后将timing中的动画定义为目标值为1。时间设定为3000ms。

  constructor(props){
     super(props);
     this.state={
      fadeAnim: new Animated.Value(0),
    };
  }
  // 在组件渲染完成之后执行
  componentDidMount(){
    Animated.timing(
      this.state.fadeAnim,{
        toValue:1,
        duration:3000,
      }
    ).start();

  }

将下来,我们只需要,将我们的某个ui与state中的fadeAnim关联起来即可。

一个例子

创建一个在渲染时,会渐进显示的控件。渐进时间是3秒,透明度由0到1。

import React ,{Component} from 'react';
import{
  Animated,
} from 'react-native'

export default class FadeInView extends Component{

  constructor(props){
     super(props);
     this.state={
      fadeAnim: new Animated.Value(0),
    };
  }
  // 在组件渲染完成之后执行
  componentDidMount(){
    Animated.timing(
      this.state.fadeAnim,{
        toValue:1,
        duration:3000,
      }
    ).start();

  }
  render(){
    return (
      <Animated.View
      style={{
         ...this.props.style,
         opacity: this.state.fadeAnim,          // 将透明度指定为动画变量值
       }}>
       {this.props.children}
     </Animated.View>
   );
  }
}

一些坑

在React Native Android中,需要做一些全局设置。

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);

参考资料:reactnative.cn

如有问题,欢迎指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

AS3给图片加水印文字

通过FileReference获取选中的图片,调用它的load方法,将图片存入到内存中。使用Loader(flash.display.Loader)类的loa...

892
来自专栏前端小叙

点击除元素以外的任意地方隐藏元素js

比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 ? 该筛选器class名 1 $(document).click(function () {...

3459
来自专栏WindCoder

Android学习笔记-控件初体验

python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

711
来自专栏前端小叙

手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端...

5366
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

9595
来自专栏逸鹏说道

06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我...

2615
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

2365
来自专栏技术总结

UIView不可不知的秘密

2299
来自专栏哈雷彗星撞地球

iOS 知识小集(Status Bar变换)

iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求。而改变状态栏颜色和控制状态栏显示和隐藏的API,在iOS 的不同版本中也发生了很多变...

742
来自专栏谈补锅

浏览器音频兼容和ffmpeg的音频转码使用

1、百度搜索浏览器对于音频文件的兼容,排在前面的文章大部分是复制粘贴很久以前的文章,容易误导搜索资料的人,

1993

扫码关注云+社区