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

相关文章

来自专栏一“技”之长

设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

    文本输入框是多数与社交相关的app中不可或缺的一个控件,这些文本输入框应该具备如下的功能:

792
来自专栏向治洪

android开关按钮

刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心。 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按...

1928
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

621
来自专栏deepcc

css3 box-sizing属性

3136
来自专栏GuZhenYin

C#开发移动应用系列(3.使用照相机扫描二维码+各种基础知识)

前言 上篇文章地址: C#开发移动应用系列(1.环境搭建) C#开发移动应用系列(2.使用WebView搭建WebApp应用) 今天我们来讲一下如何使用Came...

1885
来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

801
来自专栏互联网杂技

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

982
来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

45810
来自专栏互联网杂技

h5新功能data-*,好好利用,还能做数据双向绑定

标题是data-,但是这里主要讲伪元素,看明白就知道了 1、jQuery Selectors 获取伪元素的属性值 虽然JS里没有可以直接操作伪元素的选择符,然而...

2654
来自专栏HT

扩展HT for Web之HTML5表格组件的Renderer和Editor

在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:...

2497

扫码关注云+社区