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 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:更丰富的前端动效by CSS Animation

 在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

1454
来自专栏林德熙的博客

WPF 使用 SharpDX 在 D3DImage 显示 介绍创建控件D3D 设备设置指针画出来

本文告诉大家如何使用 SharpDX 在 D3DImage 显示。在上一篇WPF 使用 SharpDX只是使用窗口,也就是无法使用其它的 WPF 控件。所以这一...

891
来自专栏HenCoder

HenCoder Android 自定义 View 1-5: 绘制顺序

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

943
来自专栏Java帮帮-微信公众号-技术文章全总结

04.HTML区块/布局/表单/框架/颜色/颜色名/颜色值

04.HTML区块/布局/表单/ 框架/颜色/颜色名/颜色值 HTML <div> 和<span> ---- HTML 可以通过 <div> 和 <span>将...

3255
来自专栏非著名程序员

基础篇章:React Native之Flexbox的讲解(Height and Width)

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天在讲解Flexbox之前,我们先讲解一下...

2047
来自专栏葬爱家族

Android高德之旅(8)绘制线废话简单的api总结

绘制线会比绘制点稍微复杂点,抛开一些复杂的属性不谈,主要分为三类:实线、虚线、纹理。绘制线在自定义地图中是非常重要的一个环节。

1305
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

3124
来自专栏mini188

学习笔记:delphi之TStringGrid

1、说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼。。。 的需求是显示一个类似于Wo...

1915
来自专栏Android知识点总结

D8-Android自定义控件之DotNum及item复用问题

591
来自专栏破晓之歌

高德地图开放平台 原

平台地址:http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/cust...

3182

扫码关注云+社区