├── .babelrc
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
    ├── build.js
    ├── build.js.map
    └── logo.png
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── pinjump.json
    ├── lottie.vue
    └── main.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["env"]
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | yarn-error.log
5 | .idea
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="0.2.1"></a>
 6 | ## [0.2.1](https://github.com/chenqingspring/vue-lottie/compare/v0.2.0...v0.2.1) (2018-04-02)
 7 | 
 8 | 
 9 | 
10 | <a name="0.2.0"></a>
11 | # [0.2.0](https://github.com/chenqingspring/vue-lottie/compare/v0.1.2...v0.2.0) (2018-04-02)
12 | 
13 | 
14 | 
15 | <a name="0.1.2"></a>
16 | ## [0.1.2](https://github.com/chenqingspring/vue-lottie/compare/v0.1.1...v0.1.2) (2017-12-06)
17 | 
18 | 
19 | 
20 | <a name="0.1.1"></a>
21 | ## [0.1.1](https://github.com/chenqingspring/vue-lottie/compare/v0.1.0...v0.1.1) (2017-12-06)
22 | 
23 | 
24 | 
25 | <a name="0.1.0"></a>
26 | # [0.1.0](https://github.com/chenqingspring/vue-lottie/compare/v0.0.4...v0.1.0) (2017-07-07)
27 | 
28 | 
29 | 
30 | <a name="0.0.3"></a>
31 | ## [0.0.3](https://github.com/chenqingspring/vue-lottie/compare/v0.0.2...v0.0.3) (2017-05-03)
32 | 
33 | 
34 | 
35 | <a name="0.0.2"></a>
36 | ## [0.0.2](https://github.com/chenqingspring/vue-lottie/compare/v0.0.1...v0.0.2) (2017-05-03)
37 | 
38 | 
39 | 
40 | <a name="0.0.1"></a>
41 | ## 0.0.1 (2017-05-03)
42 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 CHEN Qing
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Lottie Animation View for Vue ([React](https://github.com/chenqingspring/react-lottie), [Angular](https://github.com/chenqingspring/ng-lottie))
  2 | 
  3 | [![npm version](https://badge.fury.io/js/vue-lottie.svg)](http://badge.fury.io/js/vue-lottie)
  4 | 
  5 | Generated by [create-vue-component](https://github.com/chenqingspring/create-vue-component)
  6 | 
  7 | ## Wapper of bodymovin.js
  8 | 
  9 | [bodymovin](https://github.com/bodymovin/bodymovin) is [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) plugin for exporting animations as JSON, also it provide bodymovin.js for vender them as svg/canvas/html.
 10 | 
 11 | ## Demo
 12 | https://chenqingspring.github.io/vue-lottie
 13 | 
 14 | ## Why Lottie?
 15 | 
 16 | #### Flexible After Effects features
 17 | We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll be adding new features on a regular basis.
 18 | 
 19 | #### Manipulate your animation any way you like
 20 | You can go forward, backward, and most importantly you can program your animation to respond to any interaction.
 21 | 
 22 | #### Small file sizes
 23 | Bundle 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.
 24 | 
 25 | [Learn more](http://airbnb.design/introducing-lottie/) › http://airbnb.design/lottie/
 26 | 
 27 | Looking for lottie files › https://www.lottiefiles.com/
 28 | 
 29 | 
 30 | ## Installation
 31 | 
 32 | Install through npm:
 33 | ```
 34 | npm install --save vue-lottie
 35 | ```
 36 | 
 37 | ## Usage
 38 | 
 39 | ```vue
 40 | <template>
 41 |     <div id="app">
 42 |         <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
 43 |         <div>
 44 |             <p>Speed: x{{animationSpeed}}</p>
 45 |             <input type="range" value="1" min="0" max="3" step="0.5"
 46 |                    v-on:change="onSpeedChange" v-model="animationSpeed">
 47 |         </div>
 48 |         <button v-on:click="stop">stop</button>
 49 |         <button v-on:click="pause">pause</button>
 50 |         <button v-on:click="play">play</button>
 51 |     </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |   import Lottie from './lottie.vue';
 56 |   import * as animationData from './assets/pinjump.json';
 57 | 
 58 |   export default {
 59 |     name: 'app',
 60 |     components: {
 61 |       'lottie': Lottie
 62 |     },
 63 |     data() {
 64 |       return {
 65 |         defaultOptions: {animationData: animationData},
 66 |         animationSpeed: 1
 67 |       }
 68 |     },
 69 |     methods: {
 70 |       handleAnimation: function (anim) {
 71 |         this.anim = anim;
 72 |       },
 73 | 
 74 |       stop: function () {
 75 |         this.anim.stop();
 76 |       },
 77 | 
 78 |       play: function () {
 79 |         this.anim.play();
 80 |       },
 81 | 
 82 |       pause: function () {
 83 |         this.anim.pause();
 84 |       },
 85 | 
 86 |       onSpeedChange: function () {
 87 |         this.anim.setSpeed(this.animationSpeed);
 88 |       }
 89 |     }
 90 |   }
 91 | </script>
 92 | 
 93 | ```
 94 | ## Configuration
 95 | 
 96 | You can pass a configuration object through `options` property:
 97 | * animationData: an Object with the exported animation data.
 98 | * path: the relative path to the animation object. (animationData and path are mutually exclusive)
 99 | * loop: true / false / number
100 | * autoplay: true / false it will start playing as soon as it is ready
101 | * name: animation name for future reference
102 | * renderer: 'svg' / 'canvas' / 'html' to set the renderer
103 | * container: the dom element on which to render the animation
104 | 
105 | More information on [Bodymoving Documentation](https://github.com/bodymovin/bodymovin)
106 | 
107 | ## Related Projects
108 | 
109 | * [Bodymovin](https://github.com/bodymovin/bodymovin) vue-lottie is a wrapper of bodymovin
110 | * [Angular Lottie](https://github.com/chenqingspring/ng-lottie) angular implementation
111 | * [React Lottie](https://github.com/chenqingspring/react-lottie) react implementation
112 | * [React Native Lottie](https://github.com/airbnb/lottie-react-native) react native implementation by airbnb
113 | * [IOS Lottie](https://github.com/airbnb/lottie-ios) ios implementation by airbnb
114 | * [Android Lottie](https://github.com/airbnb/lottie-android) android implementation by airbnb
115 | 
116 | ## Contribution
117 | 
118 | Your contributions and suggestions are heartily welcome.
119 | 
120 | ## License
121 | MIT
122 | 


--------------------------------------------------------------------------------
/dist/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenqingspring/vue-lottie/d66265f6d31f50dab4269f5a1fef7c7e29d5299d/dist/logo.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Lottie</title>
 6 | </head>
 7 | <body>
 8 | <a href="https://github.com/chenqingspring/vue-lottie" class="github-corner" aria-label="View source on Github">
 9 |     <svg width="80" height="80" viewBox="0 0 250 250"
10 |          style="fill:#42b983;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true">
11 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
12 |         <path
13 |                 d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
14 |                 fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path>
15 |         <path
16 |                 d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
17 |                 fill="currentColor" class="octo-body"></path>
18 |     </svg>
19 | </a>
20 | 
21 | <div id="app"></div>
22 | <script src="./dist/build.js"></script>
23 | </body>
24 | </html>
25 | 
26 | 
27 | <style type="text/css">
28 |     .github-corner:hover .octo-arm {
29 |         animation: octocat-wave 560ms ease-in-out
30 |     }
31 | 
32 |     @keyframes octocat-wave {
33 |         0%, 100% {
34 |             transform: rotate(0)
35 |         }
36 |         20%, 60% {
37 |             transform: rotate(-25deg)
38 |         }
39 |         40%, 80% {
40 |             transform: rotate(10deg)
41 |         }
42 |     }
43 | 
44 |     @media (max-width: 500px) {
45 |         .github-corner:hover .octo-arm {
46 |             animation: none
47 |         }
48 | 
49 |         .github-corner .octo-arm {
50 |             animation: octocat-wave 560ms ease-in-out
51 |         }
52 |     }
53 | 
54 | </style>
55 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-lottie",
 3 |   "description": "Lottie Animation View for Vue",
 4 |   "version": "0.2.1",
 5 |   "author": "CHEN Qing",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/chenqingspring/vue-lottie.git"
 9 |   },
10 |   "private": false,
11 |   "scripts": {
12 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
13 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
14 |     "gh-pages": "git checkout gh-pages && git merge master --no-edit && npm run build && git add . && git commit -m 'chore: build demo' --allow-empty && git push && git checkout master",
15 |     "release": "git add package.json && git commit -m 'chore: bump version number' && standard-version --first-release && git push --follow-tags origin master && npm run build && npm publish && git checkout ."
16 |   },
17 |   "dependencies": {
18 |     "lottie-web": "^5.1.9"
19 |   },
20 |   "peerDependencies": {
21 |     "vue": "^2.5.16"
22 |   },
23 |   "devDependencies": {
24 |     "babel-core": "^6.0.0",
25 |     "babel-loader": "^6.0.0",
26 |     "babel-preset-env": "^1.6.1",
27 |     "cross-env": "^3.0.0",
28 |     "css-loader": "^0.25.0",
29 |     "file-loader": "^0.9.0",
30 |     "standard-version": "^4.0.0",
31 |     "vue-loader": "^11.1.4",
32 |     "vue-lottie": "^0.1.0",
33 |     "vue-template-compiler": "^2.2.1",
34 |     "webpack": "^2.2.0",
35 |     "webpack-dev-server": "^2.2.0"
36 |   },
37 |   "main": "src/lottie.vue",
38 |   "keywords": [
39 |     "vue",
40 |     "lottie",
41 |     "vue-component",
42 |     "vue-animation"
43 |   ],
44 |   "license": "MIT"
45 | }
46 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
 4 |         <div>
 5 |             <p>Speed: x{{animationSpeed}}</p>
 6 |             <input type="range" value="1" min="0" max="3" step="0.5"
 7 |                    v-on:change="onSpeedChange" v-model="animationSpeed">
 8 |         </div>
 9 |         <button v-on:click="stop">stop</button>
10 |         <button v-on:click="pause">pause</button>
11 |         <button v-on:click="play">play</button>
12 |     </div>
13 | 
14 | </template>
15 | 
16 | <script>
17 |   import Lottie from './lottie.vue';
18 |   import * as animationData from './assets/pinjump.json';
19 | 
20 |   export default {
21 |     name: 'app',
22 |     components: {
23 |       'lottie': Lottie
24 |     },
25 |     data() {
26 |       return {
27 |         defaultOptions: {animationData: animationData},
28 |         animationSpeed: 1
29 |       }
30 |     },
31 |     methods: {
32 |       handleAnimation: function (anim) {
33 |         this.anim = anim;
34 |       },
35 | 
36 |       stop: function () {
37 |         this.anim.stop();
38 |       },
39 | 
40 |       play: function () {
41 |         this.anim.play();
42 |       },
43 | 
44 |       pause: function () {
45 |         this.anim.pause();
46 |       },
47 | 
48 |       onSpeedChange: function () {
49 |         this.anim.setSpeed(this.animationSpeed);
50 |       }
51 |     }
52 |   }
53 | </script>
54 | 
55 | <style>
56 |     #app {
57 |         font-family: 'Avenir', Helvetica, Arial, sans-serif;
58 |         -webkit-font-smoothing: antialiased;
59 |         -moz-osx-font-smoothing: grayscale;
60 |         text-align: center;
61 |         color: #2c3e50;
62 |         margin-top: 60px;
63 |     }
64 | 
65 |     h1, h2 {
66 |         font-weight: normal;
67 |     }
68 | 
69 |     ul {
70 |         list-style-type: none;
71 |         padding: 0;
72 |     }
73 | 
74 |     li {
75 |         display: inline-block;
76 |         margin: 0 10px;
77 |     }
78 | 
79 |     a {
80 |         color: #42b983;
81 |     }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chenqingspring/vue-lottie/d66265f6d31f50dab4269f5a1fef7c7e29d5299d/src/assets/logo.png


--------------------------------------------------------------------------------
/src/lottie.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :style="style" ref="lavContainer"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |   import lottie from 'lottie-web';
 7 | 
 8 |   export default {
 9 |     props: {
10 |       options: {
11 |         type: Object,
12 |         required: true
13 |       },
14 |       height: Number,
15 |       width: Number,
16 |     },
17 | 
18 |     data () {
19 |       return {
20 |         style: {
21 |           width: this.width ? `${this.width}px` : '100%',
22 |           height: this.height ? `${this.height}px` : '100%',
23 |           overflow: 'hidden',
24 |           margin: '0 auto'
25 |         }
26 |       }
27 |     },
28 | 
29 |     mounted () {
30 |       this.anim = lottie.loadAnimation({
31 |           container: this.$refs.lavContainer,
32 |           renderer: 'svg',
33 |           loop: this.options.loop !== false,
34 |           autoplay: this.options.autoplay !== false,
35 |           animationData: this.options.animationData,
36 |           rendererSettings: this.options.rendererSettings
37 |         }
38 |       );
39 |       this.$emit('animCreated', this.anim)
40 |     }
41 |   }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | });
8 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, 'dist'),
 8 |     publicPath: process.env.NODE_ENV === 'production' ? './dist/' : '/dist/',
 9 |     filename: 'build.js'
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue-loader',
16 |         options: {
17 |           loaders: {
18 |           }
19 |           // other vue-loader options go here
20 |         }
21 |       },
22 |       {
23 |         test: /\.js$/,
24 |         loader: 'babel-loader',
25 |         exclude: /node_modules/
26 |       },
27 |       {
28 |         test: /\.(png|jpg|gif|svg)$/,
29 |         loader: 'file-loader',
30 |         options: {
31 |           name: '[name].[ext]?[hash]'
32 |         }
33 |       }
34 |     ]
35 |   },
36 |   resolve: {
37 |     alias: {
38 |       'vue$': 'vue/dist/vue.esm.js'
39 |     }
40 |   },
41 |   devServer: {
42 |     historyApiFallback: true,
43 |     noInfo: true
44 |   },
45 |   performance: {
46 |     hints: false
47 |   },
48 |   devtool: '#eval-source-map'
49 | }
50 | 
51 | if (process.env.NODE_ENV === 'production') {
52 |   module.exports.devtool = '#source-map'
53 |   // http://vue-loader.vuejs.org/en/workflow/production.html
54 |   module.exports.plugins = (module.exports.plugins || []).concat([
55 |     new webpack.DefinePlugin({
56 |       'process.env': {
57 |         NODE_ENV: '"production"'
58 |       }
59 |     }),
60 |     new webpack.optimize.UglifyJsPlugin({
61 |       sourceMap: true,
62 |       compress: {
63 |         warnings: false
64 |       }
65 |     }),
66 |     new webpack.LoaderOptionsPlugin({
67 |       minimize: true
68 |     })
69 |   ])
70 | }
71 | 


--------------------------------------------------------------------------------