React Native 炫酷的动画库 实现任何AE动画 lottie-react-native
lottie-react-native
1.npm i --save lottie-react-native
2.react-native link lottie-ios
3.react-native link lottie-react-native
如果找不到文件 Lottie.h文件
Go to General > Embedded Binaries > add Lottie.framework
使用步骤:
1.1.使用Adobe After Effects软件做出特效动画;
1.2.通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;
1.3.用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。
相关参数:
1. source 导入json文件
2. progress 动画执行的进程
3. speed 动画执行的速度/number
4. loop 动画是否循环执行/boolean
5. autoPlay 是否自动播放/boolean
6. autoSize 是否原始大小/boolean
7. style
8. imageAssetsFolder 安卓需要配置图片资源,ios不要
GitHub 传送门: https://github.com/allenxieyusheng/aeAnimations
React Native 炫酷的动画库 实现任何AE动画 lottie-react-native的更多相关文章
- 学习animate.css包含了一组炫酷、有趣、跨浏览器的动画
1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...
- iOS开发之 Lottie -- 炫酷的动效
动效在软件开发中非常常见,炫酷的动画能提升应用的B格,然而由设计师的设计转化成程序猿GG的代码是个非常"痛苦"的过程.对于复杂动画,可能要花费很多时间去研究和实现.Lottie 的 ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- 7种炫酷HTML5 SVG液态水滴融合分解动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷 ...
- 【轮子】发现一个效果丰富酷炫的Android动画库
没有什么比发现一个好轮子更让人开心的了. 这个库分分钟提高交互体验 :AndroidViewAnimations 一张图说明一切 配置和使用也相当简单 GitHub地址
- particles.js 一个非常酷炫的粒子动画库
GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:
- 给lol人物模型添加动画库(mixamo)中的动画
参考链接:https://www.bilibili.com/video/av61771773/?p=4 作为一个懒人,给提取出来的lol人物模型亲手制作动画是不存在的,但是又想给人物模型应用新的有 ...
- 2019年10个最受欢迎的JavaScript动画库!
摘要: 非常炫酷的动画库! 原文:值得看看,2019 年 11 个受欢迎的 JavaScript 动画库! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. Three.js 超过 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
随机推荐
- 区块链3.0 ada Cardano卡尔达诺如何获得一致好评?
区块链3.0 ada Cardano卡尔达诺如何获得一致好评? EOS 的直接竞争对手是以太坊.文章介绍的卡尔达诺(Cardano)的目标就更加远大了,他要同时锁定比特币和以太坊.但大家去网上搜索卡尔 ...
- Lambda表达式select()和where()的区别
可能很多同学和我一样对于select()和where()区别并不是太清晰,其实两者还是有本质区别的. 1.where()用法:必须加条件,且返回对象结果. static void Main(strin ...
- axios post参数为空
今天在360浏览器访问时后台接收不到参数,但是用谷歌浏览器就能收到传入的值.
- The logback manual #01# Introduction
依赖包如下pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...
- Docker学习笔记之搭建Docker运行环境
0x00 概述 既然 Docker 是一款实用软件,我们就不得不先从它的安装说起,只有让 Docker 运行在我们的计算机上,才能更方便我们对 Docker 相关知识和使用方式的学习.得益于与商业性的 ...
- win7使用问题解决
1. VM和主机互相PING不通 问题:桥接模式,VM可以ping 通外网,可以ping 通局域网其它机子,就是ping 不通本地主机 解决:将 vm网卡和本地网连接网卡都共享出来
- BootstrapTable(附源码)
Bootstrap结合BootstrapTable的使用,分为两种模试显示列表. 引用的css: <link href="@Url.Content("~/Css/bootst ...
- Thinkphp5 分页带参数
原文链接:http://www.zhaisui.com/article/51.html
- caffe中的若干问题
找不到cublas....: 在/etc/ld.so.conf文件夹中新建cuda.conf,里面添加/usr/local/cuda/lib64,然后sudo /sbin/ldconfig -v. c ...
- 向eclipse的JavaWeb项目中导入jar包
一: 在你所需的jar包网站下载对应的jar包.如org.apache.commons.lang.jar. 二:复制粘贴到该JavaWeb的WEB-INF目录下的lib目录下,如: 三:右键 ...