Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(129)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/neon-animation/README.md

Issue 1834313003: Remove unneeded files from third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Restore bower.json files. Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 # neon-animation
2
3 `neon-animation` is a suite of elements and behaviors to implement pluggable ani mated transitions for Polymer Elements using [Web Animations](https://w3c.github .io/web-animations/).
4
5 *Warning: The API may change.*
6
7 * [A basic animatable element](#basic)
8 * [Animation configuration](#configuration)
9 * [Animation types](#configuration-types)
10 * [Configuration properties](#configuration-properties)
11 * [Using multiple animations](#configuration-multiple)
12 * [Running animations encapsulated in children nodes](#configuration-encapsula tion)
13 * [Page transitions](#page-transitions)
14 * [Shared element animations](#shared-element)
15 * [Declarative page transitions](#declarative-page)
16 * [Included animations](#animations)
17 * [Demos](#demos)
18
19 <a name="basic"></a>
20 ## A basic animatable element
21
22 Elements that can be animated should implement the `Polymer.NeonAnimatableBehavi or` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsib le for running an animation.
23
24 ```js
25 Polymer({
26 is: 'my-animatable',
27 behaviors: [
28 Polymer.NeonAnimationRunnerBehavior
29 ],
30 properties: {
31 animationConfig: {
32 value: function() {
33 return {
34 // provided by neon-animation/animations/scale-down-animation.html
35 name: 'scale-down-animation',
36 node: this
37 }
38 }
39 }
40 },
41 listeners: {
42 // this event is fired when the animation finishes
43 'neon-animation-finish': '_onNeonAnimationFinish'
44 },
45 animate: function() {
46 // run scale-down-animation
47 this.playAnimation();
48 },
49 _onNeonAnimationFinish: function() {
50 console.log('animation done!');
51 }
52 });
53 ```
54
55 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n eon-animation/demo/doc/basic.html)
56
57 <a name="configuration"></a>
58 ## Animation configuration
59
60 <a name="configuration-types"></a>
61 ### Animation types
62
63 An element might run different animations, for example it might do something dif ferent when it enters the view and when it exits from view. You can set the `ani mationConfig` property to a map from an animation type to configuration.
64
65 ```js
66 Polymer({
67 is: 'my-dialog',
68 behaviors: [
69 Polymer.NeonAnimationRunnerBehavior
70 ],
71 properties: {
72 opened: {
73 type: Boolean
74 },
75 animationConfig: {
76 value: function() {
77 return {
78 'entry': {
79 // provided by neon-animation/animations/scale-up-animation.html
80 name: 'scale-up-animation',
81 node: this
82 },
83 'exit': {
84 // provided by neon-animation/animations/fade-out-animation.html
85 name: 'fade-out-animation',
86 node: this
87 }
88 }
89 }
90 }
91 },
92 listeners: {
93 'neon-animation-finish': '_onNeonAnimationFinish'
94 },
95 show: function() {
96 this.opened = true;
97 this.style.display = 'inline-block';
98 // run scale-up-animation
99 this.playAnimation('entry');
100 },
101 hide: function() {
102 this.opened = false;
103 // run fade-out-animation
104 this.playAnimation('exit');
105 },
106 _onNeonAnimationFinish: function() {
107 if (!this.opened) {
108 this.style.display = 'none';
109 }
110 }
111 });
112 ```
113
114 [Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/n eon-animation/demo/doc/types.html)
115
116 You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
117
118 ```js
119 properties: {
120 entryAnimation: {
121 value: 'scale-up-animation'
122 },
123 exitAnimation: {
124 value: 'fade-out-animation'
125 }
126 }
127 ```
128
129 <a name="configuration-properties"></a>
130 ### Configuration properties
131
132 You can pass additional parameters to configure an animation in the animation co nfiguration object.
133 All animations should accept the following properties:
134
135 * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAn imationBehavior`.
136 * `node`: The target node to apply the animation to. Defaults to `this`.
137 * `timing`: Timing properties to use in this animation. They match the [Web Ani mations Animation Effect Timing interface](https://w3c.github.io/web-animations/ #the-animationeffecttiming-interface). The
138 properties include the following:
139 * `duration`: The duration of the animation in milliseconds.
140 * `delay`: The delay before the start of the animation in milliseconds.
141 * `easing`: A timing function for the animation. Matches the CSS timing fun ction values.
142
143 Animations may define additional configuration properties and they are listed in their documentation.
144
145 <a name="configuration-multiple"></a>
146 ### Using multiple animations
147
148 Set the animation configuration to an array to combine animations, like this:
149
150 ```js
151 animationConfig: {
152 value: function() {
153 return {
154 // fade-in-animation is run with a 50ms delay from slide-down-animation
155 'entry': [{
156 name: 'slide-down-animation',
157 node: this
158 }, {
159 name: 'fade-in-animation',
160 node: this,
161 timing: {delay: 50}
162 }]
163 }
164 }
165 }
166 ```
167
168 <a name="configuration-encapsulation"></a>
169 ### Running animations encapsulated in children nodes
170
171 You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` p roperty.
172
173 ```js
174 animationConfig: {
175 value: function() {
176 return {
177 // run fade-in-animation on this, and the entry animation on this.$.myAnim atable
178 'entry': [
179 {name: 'fade-in-animation', node: this},
180 {animatable: this.$.myAnimatable, type: 'entry'}
181 ]
182 }
183 }
184 }
185 ```
186
187 <a name="page-transitions"></a>
188 ## Page transitions
189
190 *The artist formerly known as `<core-animated-pages>`*
191
192 The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSel ectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimata bleBehavior` and define the `entry` and `exit` animations. During a page transit ion, the `entry` animation is run on the new page and the `exit` animation is ru n on the old page.
193
194 <a name="shared-element"></a>
195 ### Shared element animations
196
197 Shared element animations work on multiple nodes. For example, a "hero" animatio n is used during a page transition to make two elements from separate pages appe ar to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements conta ining shared elements also have a `sharedElements` property defines a map from ` id` to element, the element involved with the animation.
198
199 In the incoming page:
200
201 ```js
202 properties: {
203 animationConfig: {
204 value: function() {
205 return {
206 // the incoming page defines the 'entry' animation
207 'entry': {
208 name: 'hero-animation',
209 id: 'hero',
210 toPage: this
211 }
212 }
213 }
214 },
215 sharedElements: {
216 value: function() {
217 return {
218 'hero': this.$.hero
219 }
220 }
221 }
222 }
223 ```
224
225 In the outgoing page:
226
227 ```js
228 properties: {
229 animationConfig: {
230 value: function() {
231 return {
232 // the outgoing page defines the 'exit' animation
233 'exit': {
234 name: 'hero-animation',
235 id: 'hero',
236 fromPage: this
237 }
238 }
239 }
240 },
241 sharedElements: {
242 value: function() {
243 return {
244 'hero': this.$.otherHero
245 }
246 }
247 }
248 }
249 ```
250
251 <a name="declarative-page"></a>
252 ### Declarative page transitions
253
254 For convenience, if you define the `entry-animation` and `exit-animation` attrib utes on `<neon-animated-pages>`, those animations will apply for all page transi tions.
255
256 For example:
257
258 ```js
259 <neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-anima tion="slide-from-right-animation" exit-animation="slide-left-animation">
260 <neon-animatable>1</neon-animatable>
261 <neon-animatable>2</neon-animatable>
262 <neon-animatable>3</neon-animatable>
263 <neon-animatable>4</neon-animatable>
264 <neon-animatable>5</neon-animatable>
265 </neon-animated-pages>
266 ```
267
268 The new page will slide in from the right, and the old page slide away to the le ft.
269
270 <a name="animations"></a>
271 ## Included animations
272
273 Single element animations:
274
275 * `fade-in-animation` Animates opacity from `0` to `1`;
276 * `fade-out-animation` Animates opacity from `1` to `0`;
277 * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
278 * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
279 * `slide-down-animation` Animates transform from `translateY(-100%)` to `none`;
280 * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
281 * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `no ne`;
282 * `slide-from-bottom-animation` Animates transform from `translateY(100%)` to ` none`;
283 * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
284 * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
285 * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `n one`;
286 * `slide-from-right-animation` Animates transform from `translateX(100%)` to `n one`;
287 * `transform-animation` Animates a custom transform.
288
289 Note that there is a restriction that only one transform animation can be applie d on the same element at a time. Use the custom `transform-animation` to combine transform properties.
290
291 Shared element animations
292
293 * `hero-animation` Animates an element such that it looks like it scales and tr ansforms from another element.
294 * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
295
296 Group animations
297 * `cascaded-animation` Applys an animation to an array of elements with a delay between each.
298
299 <a name="demos"></a>
300 ## Demos
301
302 * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower _components/neon-animation/demo/grid/index.html)
303 * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_c omponents/neon-animation/demo/load/index.html)
304 * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower _components/neon-animation/demo/list/index.html) (For narrow width)
305 * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_com ponents/neon-animation/demo/tiles/index.html)
306 * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_compone nts/neon-animation/demo/declarative/index.html)
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698