← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/neon-animation/README.md

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/neon-animation/README.md
 
1
# neon-animation
 
2
 
 
3
`neon-animation` is a suite of elements and behaviors to implement pluggable animated 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-encapsulation)
 
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.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible 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/neon-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 different when it enters the view and when it exits from view. You can set the `animationConfig` 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/neon-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 configuration object.
 
133
All animations should accept the following properties:
 
134
 
 
135
 * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
 
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 Animations 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 function 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` property.
 
172
 
 
173
```js
 
174
animationConfig: {
 
175
  value: function() {
 
176
    return {
 
177
      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable
 
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.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run 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" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing 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` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
 
255
 
 
256
For example:
 
257
 
 
258
```js
 
259
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="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 left.
 
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 `none` to `translateY(100%)`;
 
280
 * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
 
281
 * `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
 
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 `none`;
 
286
 * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
 
287
 * `transform-animation` Animates a custom transform.
 
288
 
 
289
Note that there is a restriction that only one transform animation can be applied 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 transforms 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_components/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_components/neon-animation/demo/tiles/index.html)
 
306
 * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)