1.Lottie-前端实现AE动效
2.有哪些开源的源码源码网站?
Lottie-前端实现AE动效
阅读时间 ~min 本文转载自：TAFE - 腾讯动漫前端开发团队，原文链接： 人类身份验证 - SegmentFault
项目背景
为了提升用户体验，源码项目加入了微交互动画。源码之前动画流程是源码通过设计输出合成的雪碧图，前端通过序列帧实现动画效果，源码如图：
序列帧：
动画效果：
帧动画的源码通达信pvi指标源码缺点和局限性明显，合成的源码雪碧图文件大，且在不同屏幕分辨率下可能会失真。源码调研发现，源码Lottie是源码个简单、高效且性能高的源码动画方案。
Lottie是源码可应用于Android, iOS, Web和Windows的库，通过Bodymovin解析AE动画，源码并导出可在移动端和web端渲染动画的源码json文件。设计师用AE制作动画，源码砼友erp源码再用Bodymovin导出相应json文件，前端使用Lottie库实现动画效果。
Bodymovin插件的安装与使用
打开输出目录会看到生成的JSON文件，若动画里导入了外部，则会在images中存放JSON中引用的。
前端使用lottie
静态URL cdnjs.com/libraries/lot...
NPM
调用loadAnimation
vue-lottie
也可以在vue中使用lottie
loadAnimation参数
container
用于渲染动画的HTML元素，需确保在调用loadAnimation时该元素已存在
renderer
渲染器，可选值为'svg'（默认值）/'canvas'/'html'。svg支持的功能最多，但html的性能更好且支持3d图层。各选项值支持的功能列表在此
loop
默认值为true。可传递需要循环的特定次数
autoplay
自动播放
path
JSON文件路径
animationData
JSON数据，与path互斥
name
传递该参数后，可在之后通过lottie引用该动画实例
rendererSettings
可传递给renderer实例的长城汽车源码特定设置，具体可看
Lottie动画监听
Lottie提供了用于监听动画执行情况的事件：可使用addEventListener监听事件
控制动画播放速度和进度
可使用anm.pause和anm.play暂停和播放动画，调用anm.stop则会停止动画播放并回到动画第一帧的画面。
使用anm.setSpeed(speed)可调节动画速度，而anm.goToAndStop(value, isFrame)和anm.goToAndPlay可控制播放特定帧数，也可结合anm.totalFrames控制进度百分比，比如可传anm.totalFrames - 1跳到最后一帧。
这样的好处是可以把相关联的JSON文件合并，通过anm.goToAndPlay控制动画状态的切换，如下图中一个JSON文件包含了2个动画状态的数据：
资源
JSON文件里assets设置了对的引用：
若想统一修改静态资源路径或者设置成绝对路径，可在调用loadAnimation时传入assetsPath参数：
功能支持列表
即使用bodymovin成功输出了JSON文件（没有报错），也会出现动效不如预期的情况，比如这是在AE中构建的形象图：
但在页面中渲染效果是这样的：
这是因为使用了不支持的Merge Paths功能
因此对设计师而言，创建Lottie动画和往常制作AE动画有所不同，此文档记录了Bodymovin支持输出的刺青网站源码论坛AE功能列表，动画制作前需跟设计师沟通好，根据动画加载平台来确认可使用的AE功能。
尽量遵循官方文档里对设计过程的指导和建议：预览效果
由于以上所说的功能支持问题会导致输出动画效果不确定性，设计师和前端之间有个动画效果联调的过程，为了提高联调效率，设计师可先进行初步的效果预览，再把文件交付给前端。
方法1:输出预览HTML文件
渲染前设置所要渲染的文件
勾选☑️Demo选项
在输出的文件目录中就可找到可预览的demo.html文件
方法2:LottieFiles分享平台
把生成的JSON文件传到LottieFiles平台，可播放、暂停生成文件的动画效果，可设置图层颜色、动画速度，也可以下载lottie preview客户端在iOS或Android机子上预览。
LottieFiles平台还提供了很多线上公开的曝光骗子平台源码Lottie动画效果，可直接下载JSON文件使用
交互hack
Lottie的不足之处是没有对应的API操纵动画层，若想做更细化的动画处理，只能直接操作节点来实现。比如当播放完左图动画进入惊讶状态后，若想实现右图随鼠标移动而控制动画层的简单效果：
开启调试面板可以看到，lottie-web通过使用标签的transform属性来控制动画：
当元素已添加到DOM节点，找到想要控制的标签，提取其transform属性的矩阵值，并使用 rematrix解析矩阵值。
监听鼠标移动，设置新的transform属性值。
进一步优化
看到一个方法，在AE中将图层命名为#id格式，生成的SVG相应的图层id会被设置为id，命名为.class格式，相应的图层class会被设置为class
试了下的确可以，如下图，因此可通过这个方法快速找到需要操作的动画层，进一步简化代码：
小结
Lottie的缺点在于若在AE动画制作的过程不注意规范，会导致数据文件大、耗内存和性能的问题；Lottie-web的官方文档不够详尽，例如assetsPath参数是在看源码的时候发现的；开放的API不够齐全，无法很灵活地控制动画层。
而优点也很明显，Lottie能帮助提高开发效率，精简代码，易于调试和维护；资源文件小，输出动画效果保真；跨平台——Android, iOS, Web和Windows通用。
总的来说，Lottie的引用可以替代传统的GIF和帧动画，灵活利用好提供的属性和方法可以控制动画的播放，但需注意规范设计和开发的流程，才可以更高效地完成动画的制作与调试。
有哪些开源的源码网站?
开源源码网站为开发者提供了丰富的资源和交流平台。下面列举了一些知名的开源源码网站：
一、CSDN - 专业开发者社区，提供原创博客、问答、培训、论坛和资源下载服务。
二、OSCHINA - 中文开源技术交流社区，传播开源理念，推广开源项目，提供开源技术交流平台。
三、SegmentFault - 中国领先的新一代开发者社区和技术媒体，提供问答、专栏、课程和资讯。
四、v2ex - 创意工作者社区，讨论编程、设计、硬件、游戏等话题。
五、有穹 - 专注开源软件源码分享与交流的平台，发布、收藏和下载源码作品。
六、LearnKu - 终身编程者知识社区，定制编程知识。
七、掘金 - 技术文章社区，提供技术筛选和干货分享。
八、博客园 - 开发者知识分享社区，帮助开发者分享和学习。
九、Gitee - Git代码托管和协作平台，提供代码托管服务。
十、GitHub - 全球最大的开源社区，聚集众多开源项目。
这些网站为开发者提供了丰富的资源和交流机会，是学习和分享编程知识的重要平台。
