本文小编为大家详细介绍“Lottie动画前端开发使用技巧实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“Lottie动画前端开发使用技巧实例分析”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” – 动画效果更完美与工期成本的矛盾。一般来说，页面中包含的动画效果越复杂，前端程序员在实现时需要的工期成本越大，尤其是在官网、大促活动、活动拉新等包含巨多动画效果的场景中，动画实现需要的时间占据了大部分工期时间，而工期往往是非常紧凑的。同时后期还经常伴随着与UI设计师的反复“拉扯” – 动画方向要改变下，运动的路径曲线要再调整下，这个圆角值不太圆，这个图片辛苦再替换下。诸如此类，都是让程序员脑袋变秃的罪魁祸首之一!在反复的拉扯“折磨”中，有一批程序员就在不停的思索，将动画的设计实现与使用进行物理分割，让专业的人做更专业的事儿！产出某种物料：让对色彩、交互更专业的UI同学完成动画的设计、实现、优化，产出一种可供识别的物料；以某种形式直接识别、使用物料：前端研发通过某种形式直接识别该物料，调用后页面直接渲染动画，无须再配置路径动画、描边动画等；基于这样的思考与探索，Lottie动画应运而生！Lottie是一款由airbnb开源的跨平台动画渲染库，支持Android, iOS, Web, Windows平台。是专门用于解析从AE(Adobe After Effects)中通过Bodymovin插件导出的JSON文件，直接渲染动画。Lottie官网的传送门在此点我你将见证神奇本文的重点在于如何使用导出的JSON文件，在AE中如何开发动画以及插件Bodymovin的使用欢迎查阅其他相关资料~一图胜千言 ~代码片段该示例代码如下：开发人员进行简单的配置，引入Lottie，加载相应的JSON文件，动画就实现了！简不简单，神不神奇！专业的人做专业的事儿，后期即使UI设计MM又多动画做出了调整，做为开发的你唯一需要做的就是将文件替换一下即可！是不是又可以挽救几根头发了~Lottie Files是一个专门针对Lottie动画设计、分享的网站。你可以在这个网站上上传自己制作的lottie动画，也可以浏览其他设计师上传的lottie动画，也可以快速体验，方便而有趣。loadAnimation参数配置TIPS: 当设置path属性的时候，并不是简单的一个相对路径或者是绝对路径引入，而是lottie会发送一个http请求，访问这个json文件。如果是在vue/react项目中要注意最终的打包访问路径。考虑页面性能更优，建议使用svg渲染方式，通过path加载远程JSON文件，使用animationData会让json文件打包到JS中，loadAnimation方法返回的对象为了在项目中能够快速复用，将Lottie动画渲染简易封装成react组件Lottie。安装依赖Lottie组件封装:指定path或animationData读到这里，这篇“Lottie动画前端开发使用技巧实例免费云主机域名分析”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。
相关推荐: ConcurrentHashMap是怎么实现线程安全的
这篇文章主要介绍“ConcurrentHashMap是怎么实现线程安全的”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ConcurrentHashMap是怎么实现线程安全的”文章能帮助大家解决问题。我们知道，在日常开发…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
