资讯专栏INFORMATION COLUMN

Lottie&vue-lottie--更简单的动画实现方式

dreamans / 1392人阅读

摘要:什么是是一个可以通过插件来解析动画,并生成格式的文件。对于复杂的动画,开发同学要用很长的时间来实现,并且还有可能无法达到设计同学的最初的效果。是一个基于的动画效果实现组件。它基于开源项目,可以将导出的文件渲染成动画效果。

什么是Lottie

Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画,并生成json格式的文件。该json文件可以通过Lottie开源库在iOS,Android,macOS,React Native中进行解析生成动画效果。

下面是一些官网给出的动画效果:



为什么使用Lottie

一直以来我们的设计同学都是使用设计软件,设计动画效果,开发同学再通过代码来实现动效。对于复杂的动画,开发同学要用很长的时间来实现,并且还有可能无法达到设计同学的最初的效果。
还有一种实现动画的方式就是gif图。然而Android并不支持gif图,而且gif图对于移动端还有占用过多空间的问题。

那么,Lottie为我们做了什么呢。
首先,设计同学在Adobe After Effects上设计了动画效果,通过bodymovin插件,可以将动画导出成一个json文件。
然后,开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。
这样就可以高效的实现很多复杂动画效果啦。

在vuejs中使用Lottie

对于现在十分流行的前端框架vuejs,当然有支持Lottie的组件。

vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目,可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。

vue-lottie安装

通过NPM安装

npm install --save vue-lottie
vue-lottie使用



轮子工厂--一个分享优秀的vue,angular组件的网站

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85108.html

相关文章

  • AE动画转Web代码工具指北-Lottie

    摘要:简单来说,就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库 简介 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,...

    SexySix 评论0 收藏0
  • Lottie-前端实现AE动效

    摘要:经调研发现,是个简单高效且性能高的动画方案。换言之,设计师用把动画效果做出来,再用导出相应地文件给到前端,前端使用库就可以实现动画效果。 项目背景 在海外项目中,为了优化用户体验加入了几处微交互动画,实现方式是设计输出合成的雪碧图,前端通过序列帧实现动画效果:showImg(https://segmentfault.com/img/bVbp6jB);序列帧:showImg(https...

    supernavy 评论0 收藏0
  • Lottie-前端实现AE动效

    摘要:经调研发现,是个简单高效且性能高的动画方案。换言之,设计师用把动画效果做出来,再用导出相应地文件给到前端,前端使用库就可以实现动画效果。 项目背景 在海外项目中,为了优化用户体验加入了几处微交互动画,实现方式是设计输出合成的雪碧图,前端通过序列帧实现动画效果:showImg(https://segmentfault.com/img/bVbp6jB);序列帧:showImg(https...

    dongfangyiyu 评论0 收藏0
  • 站在 Android 开发角度,聊聊 Airbnb Lottie!!!

    摘要:对于不同的工作角色,给你带来的都是更简洁的工作流。而今天,我们站在一个工程师的角度,来看看如何使用。在这个中,提供了很多的方法,用于加载动画的。故障排除有时候,设计师设计的动画,有些效果是无法被还原的。今天在承香墨影公众号的后台,回复成长。 showImg(https://segmentfault.com/img/remote/1460000012422085?w=900&h=500)...

    wushuiyong 评论0 收藏0
  • 动画 - 收藏集 - 掘金

    摘要:本文分析主要把文件转为动画属性动画入门实践掘金前言说道动画肯定要先介绍一下,逐帧动画和补间动画。安卓动画详解一官方文档掘金概览安卓为元素和自己绘制图形提供了一系列的,这篇文章介绍了这些的主要用法。 那些年收藏的 Android 开源库集合 (UI 效果) - Android - 掘金文章内容定期更新该专题其他文章:那些年收藏的Android开源库集合(控件)那些年收藏的Android开...

    roadtogeek 评论0 收藏0

发表评论

0条评论

dreamans

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<