100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 【React-Native】如何做一个让旁边的妹子惊呼Amazing的动画?

【React-Native】如何做一个让旁边的妹子惊呼Amazing的动画?

时间:2022-06-01 11:38:46

相关推荐

【React-Native】如何做一个让旁边的妹子惊呼Amazing的动画?

前言&预览

废话先不多说,直接上图!

欢迎页

如下图,每一个页面都有一个相类似的主题动画

Loading动画

如下图,用户名称输入正确后烟花特效及登录时的猫咪捕食 Loading

多达12种 Loading 随机渲染

思考时间(Brainstorming!)

那么,大家想一想,如果让你在APP中加入酷炫的动画,你该怎么做呢?

1.原生提供的 Animate,进行旋转、拉伸、位移等等?

简单动画可以,但是不够酷炫。

2.使用 GIF 图片可否?

可以,但是不能控制启动,暂停;此外图片大小样式不好控制,需更改原GIF后重新生成。

3.使用 AE + Bodymovin 生成后导出 JSON,然后用 Lottie 进行读取渲染!

本文说的就是这种方式,可以使用代码控制启动、暂停以及重置。

怎么用呢?

以React-Native为例:

一、集成组件

npm i --save lottie-react-nativenpm i --save lottie-ios@3.2.3

然后进入 ios 文件夹安装相关依赖

pod install

二、导入 JSON

这里给大家准备了一个我自用的动画 JSON 文件:JSON下载

更多的请参考本文 JSON 哪里来部分

三、使用

import LottieView from "lottie-react-native"; // import// 视图渲染 render 中<LottieViewautoPlayloopspeed={1}source={require("./github.json")}/>

四、其他如React、Vue 或者 JS 接入方案

参考官方: 多平台接入方案

神奇的 JSON 特效哪里来?

方案一

总所周知,我们程序员啥都会,下一个AE(Adobe After Effects),自己撸一个动画然后到出JSON使用!

方案二(伸手党必备)

Lottie官方社区:Lottie社区

如下图,成千上万精选动画随便用!

APP示例Demo(React-Native版本)

ExploreRN github:RN精选动画示例

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。