diff options
Diffstat (limited to 'catapult/third_party/polymer/components/web-animations-js/docs/examples.md')
-rw-r--r-- | catapult/third_party/polymer/components/web-animations-js/docs/examples.md | 241 |
1 files changed, 241 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/web-animations-js/docs/examples.md b/catapult/third_party/polymer/components/web-animations-js/docs/examples.md new file mode 100644 index 00000000..7957a29c --- /dev/null +++ b/catapult/third_party/polymer/components/web-animations-js/docs/examples.md @@ -0,0 +1,241 @@ +#Examples of using Web Animations + +Property indexed keyframes syntax +--------------------------------- +- Each CSS property specifies its keyframe values as a list, different properties may have differently sized lists. +- The `easing` property applies its timing function to all keyframes. + +[**Live demo**](http://jsbin.com/qiyeriruru/edit?js,output) +```javascript +element.animate({ + transform: [ + 'scaleY(0.5)', + 'scaleX(0.5)', + 'scaleY(0.5)', + ], + background: [ + 'red', + 'blue', + 'orange', + 'red', + ], + easing: 'ease-in-out', +}, { + duration: 2000, + iterations: Infinity, +}); +``` + +Keyframe list syntax +-------------------- +- Keyframes can be specified as a list of multiple CSS property values. +- Individual keyframes can be given specific offsets and easings. +- Not all properties need to be specified in every keyframe. +- Offsets are implicitly distributed if not specified. + +[**Live demo**](http://jsbin.com/yajatoyere/edit?js,output) +```javascript +element.animate([ + { + background: 'red', + transform: 'none', + easing: 'ease-out', + }, + { + offset: 0.1, + transform: 'translateY(100px)', + easing: 'ease-in-out', + }, + { + offset: 0.2, + transform: 'translate(100px, 100px)', + easing: 'ease-in-out', + }, + { + offset: 0.4, + transform: 'translateX(100px)', + easing: 'ease-out', + }, + { + background: 'blue', + transform: 'none', + }, +], { + duration: 4000, + iterations: Infinity, +}); +``` + +Timing parameters +----------------- +- Web Animations inherits many of its timing parameters from CSS Animations. +- See the [specification](http://w3c.github.io/web-animations/#animationeffecttimingreadonly) for details on each parameter. + +[**Live demo**](http://jsbin.com/dabehipiyo/edit?js,output) +```javascript +element.animate({ + transform: ['none', 'translateX(100px)'], + background: ['green', 'lime'], +}, { + // Apply effect during delay. + fill: 'backwards', + + // Delay starting by 500ms. + delay: 500, + + // Iterations last for 2000ms. + duration: 2000, + + // Start at 25% through an iteration. + iterationStart: 0.25, + + // Run for 2 iterations. + iterations: 2, + + // Play every second iteration backwards. + direction: 'alternate', + + // Stop animating 500ms earlier. + endDelay: -500, + + // The timing function to use with each iteration. + easing: 'ease-in-out', +}); +``` + +Playback controls +----------------- +- element.animate() returns an Animation object with basic playback controls. +- See the [specification](http://w3c.github.io/web-animations/#the-animation-interface) for details on each method. + +[**Live demo**](http://jsbin.com/kutaqoxejo/edit?js,output) +```javascript +var animation = element.animate({ + transform: ['none', 'translateX(200px)'], + background: ['red', 'orange'], +}, { + duration: 4000, + fill: 'both', +}); +animation.play(); +animation.reverse(); +animation.pause(); +animation.currentTime = 2000; +animation.playbackRate += 0.25; +animation.playbackRate -= 0.25; +animation.finish(); +animation.cancel(); +``` + +Transitioning states with element.animate() +------------------------------------------- +- This is an example of how to animate from one state to another using Web Animations. + +[**Live demo**](http://jsbin.com/musufiwule/edit?js,output) +```javascript +var isOpen = false; +var openHeight = '100px'; +var closedHeight = '0px'; +var duration = 300; + +button.addEventListener('click', function() { + // Prevent clicks while we transition states. + button.disabled = true; + button.textContent = '...'; + + // Determine where we're animation from/to. + var fromHeight = isOpen ? openHeight : closedHeight; + var toHeight = isOpen ? closedHeight : openHeight; + + // Start an animation transitioning from our current state to the final state. + var animation = element.animate({ height: [fromHeight, toHeight] }, duration); + + // Update the button once the animation finishes. + animation.onfinish = function() { + isOpen = !isOpen; + button.textContent = isOpen ? 'Close' : 'Open'; + button.disabled = false; + }; + + // Put our element in the final state. + // Inline styles are overridden by active animations. + // When the above animation finishes it will stop applying and + // the element's style will fall back onto this inline style value. + element.style.setProperty('height', toHeight); +}); +``` + +Generating animations +--------------------- +- The Javascript API allows for procedurally generating a diverse range of interesting animations. + +[**Live demo**](http://jsbin.com/xolacasiyu/edit?js,output) +```html +<!DOCTYPE html> +<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script> + +<style> +#perspective { + margin-left: 100px; + width: 300px; + height: 300px; + perspective: 600px; +} + +#container { + width: 300px; + height: 300px; + line-height: 0; + transform-style: preserve-3d; +} + +.box { + display: inline-block; + width: 20px; + height: 20px; + background: black; +} +</style> + +<div id="perspective"> + <div id="container"></div> +</div> + +<script> +container.animate({ + transform: [ + 'rotateX(70deg) rotateZ(0deg)', + 'rotateX(70deg) rotateZ(360deg)', + ], +}, { + duration: 20000, + iterations: Infinity, +}); + +for (var y = -7; y <= 7; y++) { + for (var x = -7; x <= 7; x++) { + var box = createBox(); + box.animate({ + transform: [ + 'translateZ(0px)', + 'translateZ(20px)', + ], + opacity: [1, 0], + }, { + delay: (x*x + y*y) * 20, + duration: 2000, + iterations: Infinity, + direction: 'alternate', + easing: 'ease-in', + }); + } +} + +function createBox() { + var box = document.createElement('div'); + box.className = 'box'; + container.appendChild(box); + return box; +} +</script> +``` |