[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8955":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},8955,"vue-lottie","chenqingspring\u002Fvue-lottie","chenqingspring","Render After Effects animations on Vue based on Bodymovin","",null,"Vue",1312,276,12,36,0,1,3,57.93,"MIT License",false,"master",true,[25,26,27,28,29,30,31],"bodymovin","lottie","lottie-animation","vue","vue-animate","vue-components","vuejs2","2026-06-12 04:00:42","# Lottie Animation View for Vue ([React](https:\u002F\u002Fgithub.com\u002Fchenqingspring\u002Freact-lottie), [Angular](https:\u002F\u002Fgithub.com\u002Fchenqingspring\u002Fng-lottie))\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-lottie.svg)](http:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fvue-lottie)\n\nGenerated by [create-vue-component](https:\u002F\u002Fgithub.com\u002Fchenqingspring\u002Fcreate-vue-component)\n\n## Wapper of bodymovin.js\n\n[bodymovin](https:\u002F\u002Fgithub.com\u002Fbodymovin\u002Fbodymovin) is [Adobe After Effects](http:\u002F\u002Fwww.adobe.com\u002Fproducts\u002Faftereffects.html) plugin for exporting animations as JSON, also it provide bodymovin.js for vender them as svg\u002Fcanvas\u002Fhtml.\n\n## Demo\nhttps:\u002F\u002Fchenqingspring.github.io\u002Fvue-lottie\n\n## Why Lottie?\n\n#### Flexible After Effects features\nWe currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.\n\n#### Manipulate your animation any way you like\nYou can go forward, backward, and most importantly you can program your animation to respond to any interaction.\n\n#### Small file sizes\nBundle vector animations within your app without having to worry about multiple dimensions or large file sizes. Alternatively, you can decouple animation files from your app’s code entirely by loading them from a JSON API.\n\n[Learn more](http:\u002F\u002Fairbnb.design\u002Fintroducing-lottie\u002F) › http:\u002F\u002Fairbnb.design\u002Flottie\u002F\n\nLooking for lottie files › https:\u002F\u002Fwww.lottiefiles.com\u002F\n\n\n## Installation\n\nInstall through npm:\n```\nnpm install --save vue-lottie\n```\n\n## Usage\n\n```vue\n\u003Ctemplate>\n    \u003Cdiv id=\"app\">\n        \u003Clottie :options=\"defaultOptions\" :height=\"400\" :width=\"400\" v-on:animCreated=\"handleAnimation\"\u002F>\n        \u003Cdiv>\n            \u003Cp>Speed: x{{animationSpeed}}\u003C\u002Fp>\n            \u003Cinput type=\"range\" value=\"1\" min=\"0\" max=\"3\" step=\"0.5\"\n                   v-on:change=\"onSpeedChange\" v-model=\"animationSpeed\">\n        \u003C\u002Fdiv>\n        \u003Cbutton v-on:click=\"stop\">stop\u003C\u002Fbutton>\n        \u003Cbutton v-on:click=\"pause\">pause\u003C\u002Fbutton>\n        \u003Cbutton v-on:click=\"play\">play\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  import Lottie from '.\u002Flottie.vue';\n  import * as animationData from '.\u002Fassets\u002Fpinjump.json';\n\n  export default {\n    name: 'app',\n    components: {\n      'lottie': Lottie\n    },\n    data() {\n      return {\n        defaultOptions: {animationData: animationData},\n        animationSpeed: 1\n      }\n    },\n    methods: {\n      handleAnimation: function (anim) {\n        this.anim = anim;\n      },\n\n      stop: function () {\n        this.anim.stop();\n      },\n\n      play: function () {\n        this.anim.play();\n      },\n\n      pause: function () {\n        this.anim.pause();\n      },\n\n      onSpeedChange: function () {\n        this.anim.setSpeed(this.animationSpeed);\n      }\n    }\n  }\n\u003C\u002Fscript>\n\n```\n## Configuration\n\nYou can pass a configuration object through `options` property:\n* animationData: an Object with the exported animation data.\n* path: the relative path to the animation object. (animationData and path are mutually exclusive)\n* loop: true \u002F false \u002F number\n* autoplay: true \u002F false it will start playing as soon as it is ready\n* name: animation name for future reference\n* renderer: 'svg' \u002F 'canvas' \u002F 'html' to set the renderer\n* container: the dom element on which to render the animation\n\nMore information on [Bodymoving Documentation](https:\u002F\u002Fgithub.com\u002Fbodymovin\u002Fbodymovin)\n\n## Related Projects\n\n* [Bodymovin](https:\u002F\u002Fgithub.com\u002Fbodymovin\u002Fbodymovin) vue-lottie is a wrapper of bodymovin\n* [Angular Lottie](https:\u002F\u002Fgithub.com\u002Fchenqingspring\u002Fng-lottie) angular implementation\n* [React Lottie](https:\u002F\u002Fgithub.com\u002Fchenqingspring\u002Freact-lottie) react implementation\n* [React Native Lottie](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Flottie-react-native) react native implementation by airbnb\n* [IOS Lottie](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Flottie-ios) ios implementation by airbnb\n* [Android Lottie](https:\u002F\u002Fgithub.com\u002Fairbnb\u002Flottie-android) android implementation by airbnb\n\n## Contribution\n\nYour contributions and suggestions are heartily welcome.\n\n## License\nMIT\n","vue-lottie 是一个基于 Bodymovin 的 Vue 组件，用于渲染 After Effects 动画。它支持多种 After Effects 特性如形状层、遮罩和路径修剪等，并允许开发者通过编程方式控制动画的播放状态（如前进、后退、暂停和速度调整）。该组件生成的文件体积小，适合在需要嵌入高质量矢量动画但又受限于文件大小的应用场景中使用，例如网页应用或移动应用中的加载指示器、按钮反馈效果等交互元素。项目采用 MIT 许可证发布，拥有活跃的社区支持。",2,"2026-06-11 03:20:32","top_language"]