forked from jakeleboeuf/ember-cli-bodymovin
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcompositor.json
More file actions
143 lines (143 loc) · 12.6 KB
/
compositor.json
File metadata and controls
143 lines (143 loc) · 12.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
{
"name": "jakeleboeuf/ember-cli-bodymovin",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "Body Movin",
"branch": "",
"style": {
"name": "Default",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BannerHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
"fontWeight": 400,
"bold": 600,
"lineHeight": 1.5,
"typeScale": [
72,
48,
24,
20,
16,
14,
12
],
"monospace": "Menlo, monospace",
"heading": {
"fontFamily": null,
"fontStyle": null,
"fontWeight": 600,
"lineHeight": 1.25,
"textTransform": null,
"letterSpacing": null
},
"h0": {},
"h1": {},
"h2": {},
"h3": {},
"h4": {},
"h5": {},
"h6": {},
"alternativeText": {},
"space": [
0,
8,
16,
32,
48,
64,
96
],
"layout": {
"maxWidth": 1024,
"centered": false
},
"colors": {
"text": "#111",
"background": "#fff",
"primary": "#08e",
"secondary": "#059",
"highlight": "#e08",
"border": "#ddd",
"muted": "#eee"
},
"border": {
"width": 1,
"radius": 2
},
"link": {},
"button": {
"hover": {
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
}
},
"input": {},
"body": {
"margin": 0
},
"breakpoints": {
"xs": "@media screen and (max-width:40em)",
"sm": "@media screen and (min-width:40em)",
"md": "@media screen and (min-width:52em)",
"lg": "@media screen and (min-width:64em)"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/jakeleboeuf/ember-cli-bodymovin",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/ember-cli-bodymovin",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "ember-cli-bodymovin",
"subhead": "A little Ember.js addon to handle svg/canvas animations from After Effects, using Bodymovin.",
"children": [
{
"component": "ui/TweetButton",
"text": "ember-cli-bodymovin: A little Ember.js addon to handle svg/canvas animations from After Effects, using Bodymovin.",
"url": ""
},
{
"component": "ui/GithubButton",
"user": "jakeleboeuf",
"repo": "ember-cli-bodymovin"
}
],
"text": "v0.1.5"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "<p><a href=\"http://badge.fury.io/js/ember-cli-bodymovin\"><img src=\"https://badge.fury.io/js/ember-cli-bodymovin.svg\"></a>\n<a href=\"http://npmcharts.com/compare/ember-cli-bodymovin\"><img src=\"https://img.shields.io/npm/dw/ember-cli-bodymovin.svg\"></a>\n<a href=\"https://circleci.com/gh/jakeleboeuf/ember-cli-bodymovin\"><img src=\"https://img.shields.io/circleci/project/github/jakeleboeuf/ember-cli-bodymovin.svg\"></a>\n<a href=\"https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin\"><img src=\"https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/badges/gpa.svg\"></a>\n<a href=\"https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/coverage\"><img src=\"https://codeclimate.com/github/jakeleboeuf/ember-cli-bodymovin/badges/coverage.svg\"></a>\n<a href=\"http://emberobserver.com/addons/ember-cli-bodymovin\"><img src=\"http://emberobserver.com/badges/ember-cli-bodymovin.svg\"></a></p>\n\n<p>A little wrapper for <a href=\"https://github.com/bodymovin/bodymovin\">Bodymovin</a>, an After Effects plugin for exporting animations to svg/canvas/html + js.</p>\n<h2>Installation</h2>\n<p><code>ember install ember-cli-bodymovin</code></p>\n<h2>Usage</h2>\n<p>Rendering your animation out of AE using the <a href=\"https://github.com/bodymovin/bodymovin#installing-extension-finally-the-plugin-is-on-the-adobe-add-ons\">bodymovin extension</a> will generate a <code>json</code> representation of your animation. COol.</p>\n<p>All you need to do is drop your animation file into your app's public dir <code>public/animations/coolFileName.json</code> and it's ready to use.</p>\n<h5>Basic usage</h5>\n<p><code>{{body-movin path='coolFileName'}}</code></p>\n<h5>External Files</h5>\n<p>Sometimes you may need or want to host your animation <code>json</code> somewhere else. No problem, just set <code>external=true</code> and include the full path.</p>\n<pre>{{<span class=\"hljs-keyword\">body</span>-movin\n path=<span class=\"hljs-symbol\">'https</span>://jklb-os.s3.amazonaws.com/bodymovin/menu.json'\n external=<span class=\"hljs-literal\">true</span>}}</pre><h2>Interacting with your animation</h2>\n<p>You can use any of the Bodymovin.js primitives in your Component/Controller. <a href=\"https://github.com/bodymovin/bodymovin#usage\">Check them out</a>.</p>\n<p>I'm providing a couple basic features that should help you get things going quickly. Please submit an issue if I'm missing something obvious!</p>\n<h4>Reverse</h4>\n<p>Reverse the play direction on click. This is useful for menu animations. It simply will flip the play direction on click.</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-variable\">{{ body-movin path='menu' clickAction='reverse' loop=false autoplay=false }}</span><span class=\"xml\"></span></pre><p><img src=\"http://jklb-os.s3.amazonaws.com/bodymovin/reverse-preview.gif\"></p>\n<h4>Play / Pause</h4>\n<p>Toggling the play state seems like a thing people would want to do. I think? Idk but here it is:</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-template-variable\">{{ body-movin path='reel' clickAction='playPause' }}</span><span class=\"xml\"></span></pre><p><img src=\"http://jklb-os.s3.amazonaws.com/bodymovin/playPause-preview.gif\"></p>\n<h4>Create your own</h4>\n<p>You have the power to create your own actions- just hook into the <code>click</code> event.</p>\n<pre><span class=\"xml\"></span><span class=\"hljs-comment\">{{!-- templates/component/playPause-animation.hbs --}}</span><span class=\"xml\">\n\n</span><span class=\"hljs-template-variable\">{{ body-movin path='reel' setup=(<span class=\"hljs-builtin-name\">action</span> setup) click=(<span class=\"hljs-builtin-name\">action</span> playPause) }}</span><span class=\"xml\"></span></pre><pre><span class=\"hljs-comment\">// component/playPause-animation.js</span>\n\n<span class=\"hljs-keyword\">import</span> Ember <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'ember'</span>;\n\n<span class=\"hljs-keyword\">export</span> <span class=\"hljs-keyword\">default</span> Ember.Component.extend({\n <span class=\"hljs-attr\">animation</span>: <span class=\"hljs-literal\">null</span>,\n <span class=\"hljs-attr\">state</span>: {\n <span class=\"hljs-attr\">playing</span>: <span class=\"hljs-literal\">true</span>\n },\n\n <span class=\"hljs-attr\">actions</span>: {\n setup(data) {\n <span class=\"hljs-keyword\">this</span>.set(<span class=\"hljs-string\">'animation'</span>, data);\n },\n\n playPause() {\n <span class=\"hljs-keyword\">let</span> state = <span class=\"hljs-keyword\">this</span>.get(<span class=\"hljs-string\">'state'</span>);\n <span class=\"hljs-keyword\">let</span> animation = <span class=\"hljs-keyword\">this</span>.get(<span class=\"hljs-string\">'animation'</span>);\n\n <span class=\"hljs-keyword\">if</span> (state.playing) {\n animation.pause();\n <span class=\"hljs-keyword\">this</span>.set(<span class=\"hljs-string\">'state.playing'</span>, <span class=\"hljs-literal\">false</span>);\n } <span class=\"hljs-keyword\">else</span> {\n animation.play();\n <span class=\"hljs-keyword\">this</span>.set(<span class=\"hljs-string\">'state.playing'</span>, <span class=\"hljs-literal\">true</span>);\n }\n }\n\n }\n\n});</pre><h2>Options</h2>\n<p>You can override all the default stuff as you'd expect.</p>\n<pre>{{body-movin\n path=<span class=\"hljs-string\">'loading'</span>\n renderStyle=<span class=\"hljs-string\">'canvas'</span>\n autoplay=<span class=\"hljs-literal\">false</span>\n autorender=<span class=\"hljs-literal\">true</span>\n rendererSettings=myRendererSettings\n clickAction=<span class=\"hljs-string\">"playPause"</span> <span class=\"hljs-comment\">// playPause or reverse</span>\n click=(<span class=\"hljs-built_in\">action</span> <span class=\"hljs-string\">'submit'</span>) <span class=\"hljs-comment\">// Handle in your component/controller</span>\n setup=(<span class=\"hljs-built_in\">action</span> <span class=\"hljs-string\">'mySetup'</span>) <span class=\"hljs-comment\">// Handle in your component/controller</span>\n}}</pre><h4>animation (String)</h4>\n<p>The file name OR url of your animation.</p>\n<h4>external (Boolean)</h4>\n<p>Set this to true if you're including an external source as your <code>path</code>.</p>\n<h4>renderType (String)</h4>\n<p>Set to 'svg' / 'canvas' / 'html' to set the renderer. If you leave it of, we'll default to our favorite- <code>SVG</code>.</p>\n<h4>rendererSettings (Object)</h4>\n<p>Some additional renderer settings for max control.</p>\n<pre><span class=\"hljs-attr\">rendererSettings:</span> <span class=\"hljs-string\">{</span>\n<span class=\"hljs-attr\"> context:</span> <span class=\"hljs-string\">canvasContext,</span> <span class=\"hljs-string\">//</span> <span class=\"hljs-string\">the</span> <span class=\"hljs-string\">canvas</span> <span class=\"hljs-string\">context</span>\n<span class=\"hljs-attr\"> scaleMode:</span> <span class=\"hljs-string\">'noScale'</span><span class=\"hljs-string\">,</span>\n<span class=\"hljs-attr\"> clearCanvas:</span> <span class=\"hljs-literal\">false</span><span class=\"hljs-string\">,</span>\n<span class=\"hljs-attr\"> progressiveLoad:</span> <span class=\"hljs-literal\">false</span><span class=\"hljs-string\">,</span> <span class=\"hljs-string\">//</span> <span class=\"hljs-string\">Boolean,</span> <span class=\"hljs-string\">only</span> <span class=\"hljs-string\">svg</span> <span class=\"hljs-string\">renderer,</span> <span class=\"hljs-string\">loads</span> <span class=\"hljs-string\">dom</span> <span class=\"hljs-string\">elements</span> <span class=\"hljs-string\">when</span> <span class=\"hljs-string\">needed.</span> <span class=\"hljs-string\">Might</span> <span class=\"hljs-string\">speed</span> <span class=\"hljs-string\">up</span> <span class=\"hljs-string\">initialization</span> <span class=\"hljs-string\">for</span> <span class=\"hljs-string\">large</span> <span class=\"hljs-string\">number</span> <span class=\"hljs-string\">of</span> <span class=\"hljs-string\">elements.</span>\n<span class=\"hljs-attr\"> hideOnTransparent:</span> <span class=\"hljs-literal\">true</span> <span class=\"hljs-string\">//Boolean,</span> <span class=\"hljs-string\">only</span> <span class=\"hljs-string\">svg</span> <span class=\"hljs-string\">renderer,</span> <span class=\"hljs-string\">hides</span> <span class=\"hljs-string\">elements</span> <span class=\"hljs-string\">when</span> <span class=\"hljs-string\">opacity</span> <span class=\"hljs-string\">reaches</span> <span class=\"hljs-number\">0</span> <span class=\"hljs-string\">(defaults</span> <span class=\"hljs-string\">to</span> <span class=\"hljs-literal\">true</span><span class=\"hljs-string\">)</span>\n<span class=\"hljs-string\">}</span></pre><h4>loop (String)</h4>\n<p>true / false / number</p>\n<h4>autoplay (Boolean)</h4>\n<p>true / false</p>\n<h1>Contributing</h1>\n<p>Hook it up!</p>\n<h2>Running</h2>\n<ul>\n<li><code>ember serve</code></li>\n<li>Visit your app at <a href=\"http://localhost:4200\">http://localhost:4200</a>.</li>\n</ul>\n<h2>Running Tests</h2>\n<ul>\n<li><code>npm test</code> (Runs <code>ember try:each</code> to test your addon against multiple Ember versions)</li>\n<li><code>ember test</code></li>\n<li><code>ember test --server</code></li>\n</ul>\n<h2>Building</h2>\n<ul>\n<li><code>ember build</code></li>\n</ul>\n<p>For more information on using ember-cli, visit <a href=\"http://ember-cli.com/\">http://ember-cli.com/</a>.</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/jakeleboeuf/ember-cli-bodymovin",
"text": "GitHub"
},
{
"href": "https://github.com/jakeleboeuf",
"text": "jakeleboeuf"
}
]
}
]
}