React Native的动画（一）

Oceanlong

发布于 2018-07-03 13:07:23

1.2K0

发布于 2018-07-03 13:07:23

文章被收录于专栏：移动开发面面观移动开发面面观

前言

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。

如有问题，欢迎指正。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.05.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度