React Native的动画(一)

前言

React Native作为大前端开发的一种技术,自然离不开各种炫酷的动效。在React Native中动效有两种实现的方式。它们分别为:** LayoutAnimation Animated**。

今天,我们给一个LayoutAnimation的例子。LayoutAnimation适合开发相对简单的动画。如,一个界面的出现,或一个按钮做一些简单的缩放动画。

一个例子

需求

创建一个<Text>,每次点击它时,它就会以动画的形式变大(长宽各增加50像素)。动画持续时间5s。具有一定的弹性。

code

import React, { Component } from 'react';
import {
  NativeModules,
  LayoutAnimation,
  AppRegistry,
  View,
  Text,
  TouchableOpacity,

} from 'react-native';

import ListViewBisc from '../AwesomeProject/App/widget/ListViewBisc'
import HttpClient from '../AwesomeProject/App/widget/HttpClient'

const { UIManager } = NativeModules;

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

class HelloWorld extends Component {
  constructor(props) {
    super(props);
    this.state={
      w:100,
      h:50
    };
  }

  _onPress = () => {
   // Animate the update
   LayoutAnimation.configureNext(LayoutAnimation.create(5000,
             LayoutAnimation.Types.spring,
             LayoutAnimation.Properties.scaleXY));
   this.setState({w: this.state.w + 50, h: this.state.h + 50})
 }

  render(){
    return (
      <TouchableOpacity onPress = {this._onPress}>
        <Text style={{width: this.state.w, height: this.state.h , backgroundColor:'#f0f0f0'}}>Press me!</Text>
      </TouchableOpacity>
    )
  }
}

我们用一个TouchableOpacity包裹了<Text>控件。然后,给TouchableOpacity输入按压回调,在回调中调用动画。

我们使用LayoutAnimation创建动画,输入了三个参数,分别是动画时间5000ms、插值器类型弹性和动画类型缩放。 然后我们就可以直接改变state中的值,以调用render重新渲染界面。

总结

利用LayoutAnimation我们可以创造简单的动画。可以控制简单的时间,插值类型,动画类型。而如果需要更为精确复杂的控制,我们则需要用到Animted。

如有问题,欢迎指正。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

vue表单详解——小白速会

一、基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。 但 v-model 本质上不过是语法糖。...

4545
来自专栏老马寒门IT

02Vue.js快速入门-Vue入门之数据绑定

Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到...

2445
来自专栏Python攻城狮

Markdown-认识与使用1.简介2.使用一级标题3.设置Markdown编辑

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdo...

721
来自专栏老马寒门IT

02-Vue入门之数据绑定

2.1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,...

2386
来自专栏IMWeb前端团队

:before,:after伪元素妙用

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容...

24610
来自专栏进击的君君的前端之路

React学习笔记—JSX

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

WAI-ARIA无障碍网页应用属性完全展示

WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏...

2184
来自专栏我和未来有约会

[Silverlight 4 RC]RichTextBox概览

我们知道在silverlight 4 beta的时候增加了RichTextArea的控件。做过RIA开发的朋友富媒体在动态文本的表现渲染方面是很弱的。我们看到的...

1828
来自专栏竹清助手

jQuery架构设计与实现(2.1.4版本)

1254
来自专栏JackieZheng

初探JavaScript(三)——JS带我"碰壁"带我飞

  已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入。...

2127

扫码关注云+社区