React Native开源特效动画封装库模块(lottie-react-native)
2017-03-15 17:15
633 查看
尊重版权,转载请注明出处
本文来自:嘎嘎软件( http://www.gagakj.com )
/江清清的技术专栏(http://www.lcode.org)
开源项目地址: https://github.com/airbnb/lottie-react-native
这两天突然发现一个非常好的开源动画特效项目,Airbnb出品,他们公司的产品一向比较精美,而且开源出来的东西非常不错。Lottile组件库本来是适用于Android和iOS平台的。大体流程为:
1.1.使用Adobe After Effects软件做出特效动画;
1.2.通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;
1.3.用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。
刚创建的React Native交流十群: 157867561 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
这样我们在第一次设计的时候,可以设计出来很多精致的动画特效效果,然后去导出相关的动画文件即可。
首先我们来看一些精致的效果吧~
![](http://img0.tuicool.com/bI3m2aj.gif)
![](http://img0.tuicool.com/2MbE73E.gif)
![](http://img1.tuicool.com/bYvUJf2.gif)
![](http://img1.tuicool.com/bMjQBjn.gif)
![](http://img1.tuicool.com/NZnaMbe.gif)
以上所有的动画效果全部通过After Effects工具设计,然后使用bodymovin导出JSON格式文件,直接原生渲染出来,没有其他任何额外的工作量哈。
这个项目是在Lottie原生模块库的基础上面进行封装给React Native使用,所有有关解析和渲染的代码都可以在以下的两个相关库中找到。
3.1.Lottie for iOS ( https://github.com/airbnb/lottie-ios )
3.2.Lottie for Android ( https://github.com/airbnb/lottie-android )
4.1.安装Lottie node模块库
4.2.如果你在iOS中使用CocoaPods,你可以在Podfile文件中如下配置
4.3.如果你在iOS中没有使用CocoaPods,可以直接使用react-native linke;进行关联
4.4.针对android版本,你也可以如下使用react-native link
(五).实例说明
查看本库全部的组件API( 点击进入 )
以下就是Lottie库的基本使用方法,Lottie的动画进度,可以通过Animated的值进行控制,如下代码:
除此之外还有另外一种更加精简的调用方法:
我们可以通过以下一些步骤方法进行运行实例项目
6.1.git clone https://github.com/airbnb/lottie-react-native.git 下载项目
6.2. cd lottie-react-native 然后执行npm install 安装库依赖
6.3. 执行npm start 打开包server
6.4.然后打开另外一个终端根据,执行如下的一些命令
针对iOS版本:
1.如果你没有安装CocoaPods,可以执行sudo gem install cocoapods
2.安装pods: npm install build:pos;
3.运行实例:npm run run:ios
针对Android版本:
1.直接运行npm run run:android命令即可
本文来自:嘎嘎软件( http://www.gagakj.com )
/江清清的技术专栏(http://www.lcode.org)
开源项目地址: https://github.com/airbnb/lottie-react-native
(一).项目介绍
这两天突然发现一个非常好的开源动画特效项目,Airbnb出品,他们公司的产品一向比较精美,而且开源出来的东西非常不错。Lottile组件库本来是适用于Android和iOS平台的。大体流程为:1.1.使用Adobe After Effects软件做出特效动画;
1.2.通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;
1.3.用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。
刚创建的React Native交流十群: 157867561 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
这样我们在第一次设计的时候,可以设计出来很多精致的动画特效效果,然后去导出相关的动画文件即可。
(二).部分效果
首先我们来看一些精致的效果吧~![](http://img0.tuicool.com/bI3m2aj.gif)
![](http://img0.tuicool.com/2MbE73E.gif)
![](http://img1.tuicool.com/bYvUJf2.gif)
![](http://img1.tuicool.com/bMjQBjn.gif)
![](http://img1.tuicool.com/NZnaMbe.gif)
以上所有的动画效果全部通过After Effects工具设计,然后使用bodymovin导出JSON格式文件,直接原生渲染出来,没有其他任何额外的工作量哈。
(三).相关项目
这个项目是在Lottie原生模块库的基础上面进行封装给React Native使用,所有有关解析和渲染的代码都可以在以下的两个相关库中找到。3.1.Lottie for iOS ( https://github.com/airbnb/lottie-ios )
3.2.Lottie for Android ( https://github.com/airbnb/lottie-android )
(四).安装说明
4.1.安装Lottie node模块库npm i --save lottie-react-native
4.2.如果你在iOS中使用CocoaPods,你可以在Podfile文件中如下配置
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
4.3.如果你在iOS中没有使用CocoaPods,可以直接使用react-native linke;进行关联
react-native link lottie-ios react-native link lottie-react-native/
4.4.针对android版本,你也可以如下使用react-native link
react-native link lottie-react-native
(五).实例说明
查看本库全部的组件API( 点击进入 )
以下就是Lottie库的基本使用方法,Lottie的动画进度,可以通过Animated的值进行控制,如下代码:
import React from 'react'; import { Animated } from 'react-native'; import Animation from 'lottie-react-native'; export default class BasicExample extends React.Component { constructor(props) { super(props); this.state = { progress: new Animated.Value(0), }; } componentDidMount() { Animated.timing(this.state.progress, { toValue: 1, duration: 5000, }).start(); } render() { return ( <Animation style={{ width: 200, height: 200, }} source={require('../path/to/animation.json')} progress={this.state.progress} /> ); } }
除此之外还有另外一种更加精简的调用方法:
import React from 'react'; import Animation from 'lottie-react-native'; export default class BasicExample extends React.Component { componentDidMount() { this.animation.play(); } render() { return ( <Animation ref={animation => { this.animation = animation; }} style={{ width: 200, height: 200, }} source={require('../path/to/animation.json')} /> ); } }
(六).实例项目运行
我们可以通过以下一些步骤方法进行运行实例项目6.1.git clone https://github.com/airbnb/lottie-react-native.git 下载项目
6.2. cd lottie-react-native 然后执行npm install 安装库依赖
6.3. 执行npm start 打开包server
6.4.然后打开另外一个终端根据,执行如下的一些命令
针对iOS版本:
1.如果你没有安装CocoaPods,可以执行sudo gem install cocoapods
2.安装pods: npm install build:pos;
3.运行实例:npm run run:ios
针对Android版本:
1.直接运行npm run run:android命令即可
相关文章推荐
- React Native开源封装AES,MD5加密模块(react-native-encryption-library)
- React Native开源秒杀倒计时模块(react-native-CountDowntimer)
- React-Native 自封装原生模块
- react native学习笔记25——Android原生模块的封装与调用
- 详解React Native开源时间日期选择器组件(react-native-datetime)
- [置顶] React-Native开发之原生模块封装(Android)升级版
- React Native 扫码组件react-native-camera与自定义UI界面动画套装
- React-Native开发之原生模块封装(Android)升级版
- React-Native封装一些模块
- 【React Native开发】React Native开发IDE安装及配置(2)
- react-native 组件封装示例
- react-native组件封装与传值
- react-native开源组件react-native-wechat学习
- react-native开源组件react-native-wechat学习
- iOS之小功能模块--彩虹动画进度条学习和自主封装改进
- react native android使用react-native-tab-navigator来做底部导航tabbar(1)
- react-native组件传值与封装
- react-native使用react-art制作SVG动画
- React Native 开源组件
- 【React Native开发】React Native移植原生Android项目(4)