Home | History | Annotate | only in /external/chromium-trace/catapult/third_party/polymer/components/neon-animation
Up to higher level directory
NameDateSize
.bower.json06-Dec-20162.1K
.gitignore06-Dec-201617
.travis.yml06-Dec-20161.8K
animations/06-Dec-2016
bower.json06-Dec-20161.8K
CONTRIBUTING.md06-Dec-20163.4K
demo/06-Dec-2016
guides/06-Dec-2016
index.html06-Dec-2016992
neon-animatable-behavior.html06-Dec-20164.7K
neon-animatable.html06-Dec-20161.4K
neon-animated-pages.html06-Dec-20166K
neon-animation-behavior.html06-Dec-20162.2K
neon-animation-runner-behavior.html06-Dec-20163.5K
neon-animation.html06-Dec-2016981
neon-animations.html06-Dec-20161.7K
neon-shared-element-animatable-behavior.html06-Dec-20161.2K
neon-shared-element-animation-behavior.html06-Dec-20162.1K
README.md06-Dec-201610.2K
test/06-Dec-2016
web-animations.html06-Dec-2016591

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)
    307