Lottie动画框架的基本使用

最新推荐文章于 2024-08-24 15:36:12 发布
最新推荐文章于 2024-08-24 15:36:12 发布
阅读量1.6k 收藏
点赞数
分类专栏： 实用工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skylakexun/article/details/79870059
版权

GIthub地址

https://github.com/airbnb/lottie-android

导包

//设置发现会编译失败
compile 'com.airbnb.android:lottie:2.5.3'
//beta版本可以
compile 'com.airbnb.android:lottie:2.0.0-beta4'

准备动画文件

///assets/test.json

{"v":"5.1.8","fr":29.1670074462891,"ip":0,"op":190.0000485067,"w":1920,"h":1080,"nm":"Ping pong cup","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"CUP 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.236,"y":1},"o":{"x":0.333,"y":0},"n":"0p236_1_0p333_0","t":90,"s":[1517.941,539.989,0],"e":[350.808,539.989,0],"to":[-194.52214050293,0,0],"ti":[129.681381225586,0,0]},{"i":{"x":0.249,"y":1},"o":{"x":0.167,"y":0},"n":"0p249_1_0p167_0","t":120,"s":[350.808,539.989,0],"e":[739.853,539.989,0],"to":[-129.681381225586,0,0],"ti":[-64.8407516479492,0,0]},{"t":140.000035741779}],"ix":2},"a":{"a":0,"k":[141.651,147.001,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.582,-10.354],[0,0],[0,0],[0,-10.514],[10.515,0],[0,0],[0,10.515],[10.515,0],[0,0],[0,0],[10.476,0],[0,0]],"o":[[0,0],[0,0],[10.515,0],[0,10.516],[0,0],[10.515,0],[0,-10.515],[0,0],[0,0],[-1.582,-10.355],[0,0],[10.476,0]],"v":[[-41.86,-128.748],[-5.59,108.675],[0.954,108.675],[19.992,127.712],[0.954,146.751],[43.788,146.751],[62.826,127.713],[43.788,108.676],[37.244,108.676],[0.974,-128.747],[-19.989,-146.75],[-62.823,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[220.227,147.001],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.957,0],[0,0],[0,2.958]],"o":[[0,0],[2.957,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-50.54,-5.354],[50.54,-5.354],[55.894,0],[50.54,5.354],[-50.54,5.354],[-55.894,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,30.304],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.957,0],[0,0],[0,2.958]],"o":[[0,0],[2.957,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-59.873,-5.354],[59.873,-5.354],[65.227,0],[59.873,5.354],[-59.873,5.354],[-65.227,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,54.159],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.959]],"o":[[0,0],[2.958,0],[0,2.959],[0,0],[-2.957,0],[0,-2.958]],"v":[[-75.196,-5.355],[75.196,-5.355],[80.55,-0.001],[75.196,5.355],[-75.196,5.355],[-80.55,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,204.645],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.957,0],[0,0],[0,2.958]],"o":[[0,0],[2.957,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-89.083,-5.354],[89.082,-5.354],[94.437,0],[89.082,5.354],[-89.082,5.354],[-94.437,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,228.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.515,0],[0,0],[0,10.516],[10.514,0],[0,0],[0,-10.514]],"o":[[0,0],[10.514,0],[0,-10.515],[0,0],[-10.515,0],[0,10.515]],"v":[[-122.364,19.038],[122.364,19.038],[141.401,-0.001],[122.364,-19.038],[-122.363,-19.038],[-141.401,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.948999980852,0.913999968884,0.862999949736,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,274.714],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":3,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.311,-17.729],[-113.311,-17.729],[-118.728,17.729],[118.728,17.729]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,256.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":3,"cix":2,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[10.475,0],[0,0],[1.582,-10.355],[0,0]],"o":[[0,0],[-1.582,-10.354],[0,0],[-10.475,0],[0,0],[0,0]],"v":[[118.728,137.231],[79.549,-119.229],[58.587,-137.231],[-58.587,-137.231],[-79.549,-119.229],[-118.728,137.231]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.39199999641,0.395999983245,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,137.482],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":3,"cix":2,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.0000485067,"st":-30.0000076589527,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"CUP 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.256,"y":1},"o":{"x":0.333,"y":0},"n":"0p256_1_0p333_0","t":70,"s":[1128.897,539.989,0],"e":[739.853,539.989,0],"to":[-64.8407363891602,0,0],"ti":[64.8407363891602,0,0]},{"i":{"x":0.388,"y":0.388},"o":{"x":0.167,"y":0.167},"n":"0p388_0p388_0p167_0p167","t":90,"s":[739.853,539.989,0],"e":[739.853,539.989,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.249,"y":1},"o":{"x":0.167,"y":0},"n":"0p249_1_0p167_0","t":120,"s":[739.853,539.989,0],"e":[350.808,539.989,0],"to":[-64.8407516479492,0,0],"ti":[64.8407516479492,0,0]},{"t":140.000035741779}],"ix":2},"a":{"a":0,"k":[141.651,147.001,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.582,-10.354],[0,0],[0,0],[0,-10.514],[10.515,0],[0,0],[0,10.515],[10.514,0],[0,0],[0,0],[10.475,0],[0,0]],"o":[[0,0],[0,0],[10.515,0],[0,10.516],[0,0],[10.514,0],[0,-10.515],[0,0],[0,0],[-1.582,-10.355],[0,0],[10.476,0]],"v":[[-41.862,-128.748],[-5.592,108.675],[0.951,108.675],[19.99,127.712],[0.951,146.751],[43.786,146.751],[62.824,127.713],[43.786,108.676],[37.242,108.676],[0.971,-128.747],[-19.991,-146.75],[-62.825,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[220.228,147.001],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-50.54,-5.354],[50.539,-5.354],[55.894,0],[50.539,5.354],[-50.54,5.354],[-55.894,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,30.304],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.957,0],[0,-2.958]],"v":[[-59.874,-5.354],[59.873,-5.354],[65.228,0],[59.873,5.354],[-59.874,5.354],[-65.228,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,54.159],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.959]],"o":[[0,0],[2.958,0],[0,2.959],[0,0],[-2.958,0],[0,-2.958]],"v":[[-75.196,-5.355],[75.196,-5.355],[80.55,-0.001],[75.196,5.355],[-75.196,5.355],[-80.55,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,204.645],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-89.082,-5.354],[89.081,-5.354],[94.436,0],[89.081,5.354],[-89.081,5.354],[-94.436,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,228.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.515,0],[0,0],[0,10.516],[10.513,0],[0,0],[0,-10.514]],"o":[[0,0],[10.513,0],[0,-10.515],[0,0],[-10.515,0],[0,10.515]],"v":[[-122.364,19.038],[122.364,19.038],[141.401,-0.001],[122.364,-19.038],[-122.363,-19.038],[-141.401,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.948999980852,0.913999968884,0.862999949736,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,274.714],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":3,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.313,-17.729],[-113.31,-17.729],[-118.726,17.729],[118.729,17.729]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.649,256.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":3,"cix":2,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[10.475,0],[0,0],[1.582,-10.355],[0,0]],"o":[[0,0],[-1.582,-10.354],[0,0],[-10.476,0],[0,0],[0,0]],"v":[[118.728,137.231],[79.549,-119.229],[58.588,-137.231],[-58.587,-137.231],[-79.55,-119.229],[-118.727,137.231]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.39199999641,0.395999983245,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,137.482],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":3,"cix":2,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.0000485067,"st":-30.0000076589527,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"CUP 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.24,"y":1},"o":{"x":0.333,"y":0},"n":"0p24_1_0p333_0","t":50,"s":[739.853,539.989,0],"e":[350.808,539.989,0],"to":[-64.8407516479492,0,0],"ti":[64.8407516479492,0,0]},{"i":{"x":0.153,"y":0.153},"o":{"x":0.167,"y":0.167},"n":"0p153_0p153_0p167_0p167","t":70,"s":[350.808,539.989,0],"e":[350.808,539.989,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.236,"y":1},"o":{"x":0.167,"y":0},"n":"0p236_1_0p167_0","t":90,"s":[350.808,539.989,0],"e":[1517.941,539.989,0],"to":[194.52214050293,0,0],"ti":[-129.681488037109,0,0]},{"i":{"x":0.19,"y":1},"o":{"x":0.167,"y":0},"n":"0p19_1_0p167_0","t":120,"s":[1517.941,539.989,0],"e":[1128.897,539.989,0],"to":[129.681488037109,0,0],"ti":[64.8406524658203,0,0]},{"t":140.000035741779}],"ix":2},"a":{"a":0,"k":[141.651,147.001,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.582,-10.354],[0,0],[0,0],[0,-10.514],[10.515,0],[0,0],[0,10.515],[10.515,0],[0,0],[0,0],[10.475,0],[0,0]],"o":[[0,0],[0,0],[10.515,0],[0,10.516],[0,0],[10.515,0],[0,-10.515],[0,0],[0,0],[-1.582,-10.355],[0,0],[10.476,0]],"v":[[-41.862,-128.748],[-5.592,108.675],[0.952,108.675],[19.99,127.712],[0.952,146.751],[43.786,146.751],[62.824,127.713],[43.786,108.676],[37.242,108.676],[0.971,-128.747],[-19.991,-146.75],[-62.825,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[220.228,147.001],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.957,0],[0,0],[0,2.958]],"o":[[0,0],[2.957,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-50.54,-5.354],[50.54,-5.354],[55.894,0],[50.54,5.354],[-50.54,5.354],[-55.894,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,30.304],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-59.873,-5.354],[59.873,-5.354],[65.227,0],[59.873,5.354],[-59.873,5.354],[-65.227,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,54.159],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.959]],"o":[[0,0],[2.958,0],[0,2.959],[0,0],[-2.958,0],[0,-2.958]],"v":[[-75.196,-5.355],[75.196,-5.355],[80.55,-0.001],[75.196,5.355],[-75.196,5.355],[-80.55,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,204.645],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.957,0],[0,0],[0,2.958]],"o":[[0,0],[2.957,0],[0,2.958],[0,0],[-2.957,0],[0,-2.958]],"v":[[-89.082,-5.354],[89.082,-5.354],[94.436,0],[89.082,5.354],[-89.082,5.354],[-94.436,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,228.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.515,0],[0,0],[0,10.516],[10.515,0],[0,0],[0,-10.514]],"o":[[0,0],[10.515,0],[0,-10.515],[0,0],[-10.514,0],[0,10.515]],"v":[[-122.364,19.038],[122.363,19.038],[141.401,-0.001],[122.363,-19.038],[-122.364,-19.038],[-141.401,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.948999980852,0.913999968884,0.862999949736,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,274.714],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":3,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.311,-17.729],[-113.312,-17.729],[-118.728,17.729],[118.728,17.729]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,256.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":3,"cix":2,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[10.475,0],[0,0],[1.582,-10.355],[0,0]],"o":[[0,0],[-1.582,-10.354],[0,0],[-10.475,0],[0,0],[0,0]],"v":[[118.728,137.231],[79.55,-119.229],[58.587,-137.231],[-58.587,-137.231],[-79.549,-119.229],[-118.728,137.231]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.39199999641,0.395999983245,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,137.482],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":3,"cix":2,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.0000485067,"st":-30.0000076589527,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"CUP 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.241,"y":1},"o":{"x":0.333,"y":0},"n":"0p241_1_0p333_0","t":0,"s":[350.808,539.989,0],"e":[350.808,339.989,0],"to":[0,-33.3333320617676,0],"ti":[0,5.37109372089617e-7,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.752,"y":0},"n":"0p667_1_0p752_0","t":20,"s":[350.808,339.989,0],"e":[350.808,539.989,0],"to":[0,-5.37109372089617e-7,0],"ti":[0,-33.3333320617676,0]},{"i":{"x":0,"y":0},"o":{"x":1,"y":1},"n":"0_0_1_1","t":40,"s":[350.808,539.989,0],"e":[350.808,539.989,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.24,"y":1},"o":{"x":0.167,"y":0},"n":"0p24_1_0p167_0","t":50,"s":[350.808,539.989,0],"e":[739.853,539.989,0],"to":[64.8407516479492,0,0],"ti":[-129.681488037109,0,0]},{"i":{"x":0.24,"y":1},"o":{"x":0.167,"y":0},"n":"0p24_1_0p167_0","t":70,"s":[739.853,539.989,0],"e":[1128.897,539.989,0],"to":[129.681488037109,0,0],"ti":[-64.8407363891602,0,0]},{"i":{"x":0.24,"y":0.24},"o":{"x":0.167,"y":0.167},"n":"0p24_0p24_0p167_0p167","t":90,"s":[1128.897,539.989,0],"e":[1128.897,539.989,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.24,"y":1},"o":{"x":0.167,"y":0},"n":"0p24_1_0p167_0","t":120,"s":[1128.897,539.989,0],"e":[1517.941,539.989,0],"to":[64.8406524658203,0,0],"ti":[-64.8406524658203,0,0]},{"i":{"x":0,"y":0},"o":{"x":0.167,"y":0.167},"n":"0_0_0p167_0p167","t":140,"s":[1517.941,539.989,0],"e":[1517.941,539.989,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.238,"y":1},"o":{"x":0.333,"y":0},"n":"0p238_1_0p333_0","t":150,"s":[1517.941,539.989,0],"e":[1517.941,340,0],"to":[0,-33.3315315246582,0],"ti":[0,-5.37109372089617e-7,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.754,"y":0},"n":"0p667_1_0p754_0","t":170,"s":[1517.941,340,0],"e":[1517.941,539.989,0],"to":[0,5.37109372089617e-7,0],"ti":[0,-33.3315315246582,0]},{"t":190.0000485067}],"ix":2},"a":{"a":0,"k":[141.651,147.001,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.582,-10.354],[0,0],[0,0],[0,-10.514],[10.515,0],[0,0],[0,10.515],[10.515,0],[0,0],[0,0],[10.475,0],[0,0]],"o":[[0,0],[0,0],[10.515,0],[0,10.516],[0,0],[10.515,0],[0,-10.515],[0,0],[0,0],[-1.582,-10.355],[0,0],[10.476,0]],"v":[[-41.862,-128.748],[-5.592,108.675],[0.952,108.675],[19.99,127.712],[0.952,146.751],[43.786,146.751],[62.824,127.713],[43.786,108.676],[37.242,108.676],[0.971,-128.747],[-19.991,-146.75],[-62.825,-146.75]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[220.228,147.001],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-50.54,-5.354],[50.54,-5.354],[55.894,0],[50.54,5.354],[-50.54,5.354],[-55.894,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,30.304],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-59.873,-5.354],[59.873,-5.354],[65.227,0],[59.873,5.354],[-59.873,5.354],[-65.227,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,54.159],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.958,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.959]],"o":[[0,0],[2.958,0],[0,2.959],[0,0],[-2.958,0],[0,-2.958]],"v":[[-75.196,-5.355],[75.196,-5.355],[80.55,-0.001],[75.196,5.355],[-75.196,5.355],[-80.55,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,204.645],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.957,0],[0,0],[0,-2.958],[2.958,0],[0,0],[0,2.958]],"o":[[0,0],[2.958,0],[0,2.958],[0,0],[-2.958,0],[0,-2.958]],"v":[[-89.082,-5.354],[89.082,-5.354],[94.436,0],[89.082,5.354],[-89.082,5.354],[-94.436,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.823999980852,0.33300000359,0.352999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,228.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.514,0],[0,0],[0,10.516],[10.514,0],[0,0],[0,-10.514]],"o":[[0,0],[10.514,0],[0,-10.515],[0,0],[-10.515,0],[0,10.515]],"v":[[-122.364,19.038],[122.364,19.038],[141.401,-0.001],[122.364,-19.038],[-122.363,-19.038],[-141.401,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.948999980852,0.913999968884,0.862999949736,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,274.714],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":3,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[113.311,-17.729],[-113.312,-17.729],[-118.728,17.729],[118.728,17.729]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090000002992,0.113999998803,0.149000010771,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.651,256.985],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":3,"cix":2,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[10.475,0],[0,0],[1.582,-10.355],[0,0]],"o":[[0,0],[-1.582,-10.354],[0,0],[-10.475,0],[0,0],[0,0]],"v":[[118.728,137.231],[79.55,-119.229],[58.588,-137.231],[-58.587,-137.231],[-79.549,-119.229],[-118.728,137.231]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.39199999641,0.395999983245,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[141.65,137.482],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":3,"cix":2,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":190.0000485067,"st":-30.0000076589527,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ping Pong Ball 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[1517.941,621.488,0],"ix":2},"a":{"a":0,"k":[69.25,65.596,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-32.244],[30.704,-5.337],[0,32.231],[-30.717,5.339]],"o":[[0,32.231],[-30.717,-5.337],[0,-32.244],[30.704,5.339]],"v":[[54.058,0.006],[0.006,64.363],[-54.058,0.006],[0.006,-64.363]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.592000026329,0.043000000598,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[57.961,65.597],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-36.096],[36.082,0],[3.665,0.652],[0,32.231],[-30.718,5.339],[-3.851,0]],"o":[[0,36.083],[-3.851,0],[-30.718,-5.337],[0,-32.244],[3.665,-0.652],[36.082,0]],"v":[[65.346,0.007],[0.007,65.346],[-11.281,64.363],[-65.346,0.007],[-11.281,-64.362],[0.007,-65.346]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776000019148,0.470999983245,0.071000005685,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.25,65.597],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,3.268],[38.107,0],[0,-3.268],[-38.108,0]],"o":[[0,-3.268],[-38.108,0],[0,3.268],[38.107,0]],"v":[[69,0],[0,-5.917],[-69,0],[0,5.917]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.569000004787,0.528999956916,0.532999973671,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.25,125.026],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":149.000038039465,"op":190.0000485067,"st":119.000030380512,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Ping Pong Ball","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[355.273,621.488,0],"ix":2},"a":{"a":0,"k":[69.25,65.596,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-32.244],[30.704,-5.337],[0,32.231],[-30.717,5.339]],"o":[[0,32.231],[-30.717,-5.337],[0,-32.244],[30.704,5.339]],"v":[[54.058,0.006],[0.006,64.363],[-54.058,0.006],[0.006,-64.363]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.976000019148,0.592000026329,0.043000000598,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[57.961,65.597],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-36.096],[36.082,0],[3.665,0.652],[0,32.231],[-30.718,5.339],[-3.851,0]],"o":[[0,36.083],[-3.851,0],[-30.718,-5.337],[0,-32.244],[3.665,-0.652],[36.082,0]],"v":[[65.346,0.007],[0.007,65.346],[-11.281,64.363],[-65.346,0.007],[-11.281,-64.362],[0.007,-65.346]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776000019148,0.470999983245,0.071000005685,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.25,65.597],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,3.268],[38.107,0],[0,-3.268],[-38.108,0]],"o":[[0,-3.268],[-38.108,0],[0,3.268],[38.107,0]],"v":[[69,0],[0,-5.917],[-69,0],[0,5.917]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":4,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.569000004787,0.528999956916,0.532999973671,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.25,125.026],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":30,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":41.0000104672353,"st":-10.0000025529842,"bm":0}],"markers":[]}

在xml中使用

    <com.airbnb.lottie.LottieAnimationView
        //引用assets目录中的文件
        app:lottie_fileName="test.json"
        //是否循环
        app:lottie_loop="true"
        //是否自动播放
        app:lottie_autoPlay="true"

        android:id="@+id/animation_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
    />

代码中使用

        animation_view.setAnimation("test.json");
        animation_view.loop(true);
        animation_view.playAnimation();

通过JsonString添加动画

        try {
            JSONObject jsonObject = new JSONObject(jsonString);
            LottieComposition.Factory.fromJson(getResources(), jsonObject
            , new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(final LottieComposition composition) {
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            animation_view.setComposition(composition);
                            animation_view.loop(true);
                            animation_view.playAnimation();
                        }
                    },3000);
                }
            });
        } catch (JSONException e) {
            e.printStackTrace();
        }

更多api

//是否开启硬件加速
animationView.useHardwareAcceleration(boolean)
//是否合并路径(kitkat版本之后)
animationView.enableMergePathsForKitKatAndAbove(boolean)
//是否正在动画
animationView.isAnimating

//设置进度 0-1f
animationView.setProgress(float)

//设置动画的重复次数
animationView.repeatCount = ValueAnimator.INFINITE

//监听动画的更新
animation_view.addAnimatorUpdateListener();

//监听动画开始结束等事件
animation_view.addAnimatorListener();

//移除监听器
animationView.removeAnimatorListener(animatorListener)

//暂停动画
animationView.pauseAnimation()

//恢复动画
animationView.resumeAnimation()

//设置比例
thisView.setScale(0.3f);

//设置播放速度
animation_view.setSpeed(2.0f);

//在这种情况下，Lottie将位图的加载推迟到该委托
animation_view.setImageAssetDelegate

//设置起始帧
animation_view.setMinFrame()

//设置结束帧
animation_view.setMaxFrame()

//倒放动画
animation_view.reverseAnimation();

//每一帧的监听    
animationView.setComposition(composition)
animationView.setMinAndMaxFrame(composition.startFrame.toInt()
, composition.endFrame.toInt())
animationView.setPerformanceTrackingEnabled(true)
var renderTimeGraphRange = 4f
animationView.performanceTracker?.addFrameListener { ms ->
    if (lifecycle.currentState != Lifecycle.State.RESUMED) return@addFrameListener
    lineDataSet.getEntryForIndex((animationView.progress * 100).toInt()).y = ms
    renderTimeGraphRange = Math.max(renderTimeGraphRange, ms * 1.2f)
    renderTimesGraph.setVisibleYRange(0f, renderTimeGraphRange, YAxis.AxisDependency.LEFT)
    renderTimesGraph.invalidate()
}
SkylakeXun
关注
专栏目录
Lottie动画使用及原理分析
知更鸟CoolLee的博客
06-05 7708
目录结构： 1.Lottie是什么？ 2.为什么使用Lottie？ 3.Lottie适用于哪些场景？ 4.Lottie的使用和原理 1.Lottie是什么？ Lottie是Airbnb开源的一个动画渲染库，支持多平台，包括iOS、Android、React Native以及Flutter（https://github.com/airbnb/lottie-ios）。除了官方支持的平台，更...
Lottie动画资源放到服务器预下载，一文说清
m0_61418455的博客
09-05 815
callback?.invoke(true) return@apply } fetch.addListener(DownloadListener(groupId, size, callback)).enqueue(this) } } /** * 下载单个文件 */ fun download(path: String, callback: ((Boolean) -> Unit)? = null) { ...
Web前端最新web端动效 lottie-web 使用_lottie-web文档，前端技术类校招面试题汇总
2401_84438067的博客
05-09 403
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Lottie 框架Native Heap内存爆炸问题解决
m0_37048188的博客
02-02 1391
Lottie动画框架Native Heap内存优化
esp32s3 lvgl 调用 lv_timer_handler 程序卡死解决
最新发布
m0_48573736的博客
08-24 271
一开始代码从模拟器搬到esp上时，在main主函数中调用lv_timer_handler也会卡死，注释掉之后恢复正常运行，最终发现是由于调用栈内存不足导致。查找lvgl_port_task调用关系，在lvgl_port_init中创建了一个LVGL task任务。跟踪到esp_lvgl_port.c第250行，确实调用lv_timer_handler();环境是在ubuntu下，软件使用esp_lvgl_port+lvgl9.1.1。将LVGL task任务栈调大，当前任务中实际运行大约需要22k内存。
Lottie动画 轻松使用
luo_boke的博客
05-12 1万+
UI常常会用到一些动画特效，比如心形跳动、返回效果等，此时常规手段往往力不从心，使用Lottie就能助力你飞起来。
装饰你的APP：使用Lottie-Android创建动画效果
虎哥LoveDroid
02-03 1832
Lottie-Android是一个强大的开源库，由Airbnb开发，旨在帮助开发者轻松地在Android应用中添加高质量的动画效果。它基于Adobe After Effects软件中的Bodymovin插件，通过解析导出的JSON文件来渲染并播放复杂的矢量动画。Lottie-Android提供了许多令人印象深刻的功能和优点。首先，它支持从After Effects导出的JSON文件，这意味着设计师可以直接将他们创建的动画效果转化为Lottie可用的格式，而无需重新制作或重新编码动画。
图形库LVGL v8.2版本移植
aron566博客
06-06 4578
LVGL移植案例
Android Lottie动画库介绍
xianggengping的专栏
06-07 6580
目前支持android上gif动画主要存在两种方式：第一种为将动画做成一张张图片然后进行快速切换，从而形成动画效果，第二种将动画变成json字符串，利用开源库进行解析，然后进行显示从而达到动画效果。其中两种方式的典型代表库为：android-gif-drawable和Lottie。 android-gif-drawable开源库地址：https://github.com/koral--/
HarmonyOS Lottie组件，让动画绘制更简单
HarmonyOSDev的博客
02-22 1846
动画是UI界面的重要元素之一，精心设计的动画能使UI界面更直观，有助于改进应用程序的外观并改善用户体验。 ArkUI开发框架为开发者提供了丰富的动画能力，如属性动画、转场动画及自定义动画等。这些动画能力帮助开发者美化了UI界面，但不适用于绘制某些比较复杂的动画，例如，属性动画主要针对动画的通用属性进行动态变化，内容动效不够丰富，且变更时需要修改或重写代码；Gif动态图放大后锯齿明显，精度越高占用存储空间越大，直接影响安装包的大小；svg动画DOM节点多开销大，缺乏与用户的交互。 因此，我们引入.
lottie-web，一个绘制动画帧不错的选择
05-25
2. **基本使用** 在 Vue 组件中，你可以这样引入并使用 Lottie： ```html <div id="lottie_box"> 播放 暂停 .box { width: 300px; height: 200px; } #bm { width: 100%; height: 100%; ...
glottie：基于OpenGLWebGL的Lottie动画播放器
02-05
glottie：基于OpenGLWebGL的Lottie动画播放器
lvgl 主要文件目录树
嵌入式Stark
12-24 2199
目录树 注意：以下文件目录树是克隆仓库的一部分 │ lvgl.h │ lv_conf.h #该文件原名为 lv_conf_template.h │ └─src*****-------*****源文件 │ lvgl.h----------------- │ lv_api_map.h----------- │ lv_conf_internal.h----- │ lv_conf_kconfig.h------ │ ├─core*********
Lottie动画的优劣及原理
热门推荐
qq_40796375的博客
02-26 1万+
前言 Lottie是目前应用十分广泛的动画框架。在周会汇报的时候，老板问能不能对Lottie进行优化，于是就有了下文对Lottie原理的研究。毕竟要进行优化，首先要深入了解原理嘛。 Lottie实现 Lottie通过读取json文件信息实现动画效果。 json信息包括json整体结构、图片资源、图层信息等，这些属性阐述了动画该做什么、该怎么做。 json文件解析： Lottie动画总体实现原理 Lottie 先将动画 JSON 文件转换为 LottieComposition 数据对象。 继承 Im
音视频开发之旅（63) -Lottie 源码分析之动画与绘制
yabin的专栏
01-16 551
目录 动画和绘制的流程 LayerView树 ShapeLayer的分析 Lottie优劣以及rLottie、PAG的介绍 资料 收获 上一篇我们学习分析了Lottie的json解析部分. 这篇我们分析的动画和渲染部分。 分析的重点：如何组织多图层layer的关系，控制先后处理不同图层的绘制以及动画。 一、动画和绘制的流程 我们通过入口API函数（LottieDrawable#setComposition、LottieDrawable#playAnimation）来进行分析。 1.1 L
vue或者nuxt项目中使用lottie动画
weixin_46328739的博客
10-27 495
vue或者nuxt项目中使用lottie动画
Android开发中一些你需要知道的图片相关知识和网站推荐分享
大梦想家
11-28 725
    -- TinyPNG   这个网站可以说是开发必知的一个图片网站，它的作用就是压缩图片，而且效果相当显著，可以说是“神站”级别。当然了，你不知道没关系，漂亮的或者帅帅的美工知道也行，总之你俩必须有一个人知道，在我们项目开发的后期，有一项就是要减小Apk的大小，这其中较重一项就是图片，在即将2018的现在，流量对于大家来说依然很敏感，越小的Apk体积对于用户来说升级成本就越小。效...
QQ聊天气泡的动画动态效果实现
webcocoa的博客
11-25 2211
前言 气泡框作为社交聊天软件的基本功能，想必大家都了解怎么实现了。但是像国内巨头腾讯旗下的QQ气泡(尤其是动态的)我想应该是没有几个。这里就为大家提供一种类似QQ动态气泡的解决方案(还不完善)。 首先用到了一个第三方Lottie, airbnb做的一个专门做动画的东西。专门研究过动画的应该都知道或了解。简单讲就是通过插件将AE中画的动画转换成json文件，然后按照特定规则转换到页面上通过CABaseAnimation来实现。 明确需求 基本的聊天气泡，随文本大小变更气泡大小并保证边界圆角等形状不变 动态气
android 使用lottie动画
09-20
要在Android中使用Lottie动画，首先需要在应用级别的build.gradle文件中添加Lottie动画的依赖项。可以使用以下代码将依赖项添加到build.gradle文件中： ``` implementation 'com.airbnb.android:lottie:3.4.0' ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值