Skip to content
This repository has been archived by the owner on Aug 10, 2022. It is now read-only.

Commit

Permalink
Merge pull request #1579 from samthor/webanimations-update
Browse files Browse the repository at this point in the history 
update symbols and add links to Web Animations updates
  • Loading branch information
@PaulKinlan
PaulKinlan committed Sep 3, 2015
2 parents b3c800b + 5339ec5 commit ff6f39a
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 67 deletions.
12 changes: 8 additions & 4 deletions ...pdates/2014-05-22-Web-Animations-element.animate()-is-now-in-Chrome-36.markdown
View file
Expand Up @@ -13,7 +13,7 @@ title: "Web Animations - element.animate() is now in Chrome 36"
description: "Web Animations define a model for supporting animation and synchronization on the Web platform. element.animate() is the first of those pieces landing in Chrome."
article:
written_on: 2014-05-22
updated_on: 2014-10-07
updated_on: 2015-09-03
authors:
- brendankenny
tags:
Expand All @@ -22,6 +22,9 @@ tags:
- animations
permalink: /updates/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36.html
---

*Note:* This article has been updated for the [latest naming in Web Animations](https://developers.google.com/web/updates/2015/04/web-animations-naming).

Animation on the web was once the province of JavaScript, but as the world moved to mobile, animations moved to CSS for the declarative syntax and the optimizations browsers were able to make with it. With 60fps on mobile always your goal, it makes sense to never step outside of what browsers know how to efficiently display.

More tools are appearing to make JavaScript-driven animations more efficient, but the holy grail is a unification of [declarative and imperative animations](http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-imperative-declarative) , where the decision of how to write your animations is based on what's the clearest code, not what is possible in one form and not in the other.
Expand Down Expand Up @@ -88,11 +91,11 @@ snowFlake.animate([
{% endhighlight %}


<h2>AnimationPlayer</h2>
<h2>Animation</h2>

<code>element.animate()</code> actually returns an AnimationPlayer object, which will become increasingly important as more of the Web Animations spec is launched. Both JavaScript- and CSS-created animations will have associated AnimationPlayers, allowing them to be seamlessly combined in useful and interesting ways.
<code>element.animate()</code> actually returns an `Animation` object, which will become increasingly important as more of the Web Animations spec is launched. Both JavaScript- and CSS-created animations will have associated `Animation` players, allowing them to be seamlessly combined in useful and interesting ways.

For now, though, AnimationPlayer only has two pieces of functionality, both very useful. You can cancel an animation at any time by using <code>AnimationPlayer.cancel()</code>:
For now, though, `Animation` only has two pieces of functionality, both very useful. You can cancel an animation at any time by using <code>Animation.cancel()</code>:

{% highlight javascript %}
var player = snowFlake.animate([
Expand All @@ -116,6 +119,7 @@ player.onfinish = function(e) {
}
{% endhighlight %}

*Note:* As of December 2014, [`Animation` has a few more features](https://developers.google.com/web/updates/2014/12/web-animation-playback).

<h2>Try it out</h2>

Expand Down
129 changes: 66 additions & 63 deletions src/_langs/en/updates/2014-12-05-web-animation-playback.markdown
View file
Expand Up @@ -13,33 +13,36 @@ title: "Web Animations Playback Control in Chrome 39"
description: "Learn about Web Animation Playback"
article:
written_on: 2014-12-05
updated_on: 2014-12-05
updated_on: 2015-09-03
authors:
- samthorogood
tags:
- elementanimate
- animations
- webanimations
permalink: /updates/2014/12/web-animation-playback.html
---

Earlier this year, [Chrome 36 landed the element.animate method](http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36) as a part of the broader [Web Animations spec](http://w3c.github.io/web-animations/). This allows for efficient, native animations written imperatively - giving developers the choice to build their animations and transitions with the most suitable approach for them.
*Note:* This article has been updated for the [latest naming in Web Animations](https://developers.google.com/web/updates/2015/04/web-animations-naming).

Earlier in 2014, [Chrome 36 landed the element.animate method](http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now-in-Chrome-36) as a part of the broader [Web Animations spec](http://w3c.github.io/web-animations/). This allows for efficient, native animations written imperatively - giving developers the choice to build their animations and transitions with the most suitable approach for them.

For a quick refresher, here's how you might animate a cloud across the screen, with a callback when done:

{% highlight javascript %}

var player = cloud.animate([
{transform: 'translateX(' + start + 'px)'},
{transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
console.info('Cloud moved across the screen!');
startRaining(cloud);
};
var player = cloud.animate([
{transform: 'translateX(' + start + 'px)'},
{transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
console.info('Cloud moved across the screen!');
startRaining(cloud);
};

{% endhighlight %}

This alone is incredibly easy and is well worth considering as part of your toolbox when building animations or transitions imperatively. However, in Chrome 39, playback control features have been added to the `AnimationPlayer` object returned by `element.animate`. Previously, once an animation was created, you could only call `cancel()` or listen to the finish event.
This alone is incredibly easy and is well worth considering as part of your toolbox when building animations or transitions imperatively. However, in Chrome 39, playback control features have been added to the `Animation` object returned by `element.animate`. Previously, once an animation was created, you could only call `cancel()` or listen to the finish event.

These playback additions open up the possibilities of what Web Animations can do - turning animations into a general-purpose tool, rather than being prescriptive about transitions, i.e., 'fixed' or predefined animations.

Expand All @@ -49,19 +52,19 @@ Let's start by updating the above example to pause the animation if the cloud is

{% highlight javascript %}

cloud.addEventListener('mousedown', function() {
player.pause();
});
cloud.addEventListener('mousedown', function() {
player.pause();
});

{% endhighlight %}

You could also modify the `playbackRate` property:

{% highlight javascript %}

function changeWindSpeed() {
player.playbackRate *= (Math.random() * 2.0);
}
function changeWindSpeed() {
player.playbackRate *= (Math.random() * 2.0);
}

{% endhighlight %}

Expand All @@ -73,35 +76,35 @@ You can also call the `reverse()` method, which is normally equivalent to invert

## Scrubbing the player

An `AnimationPlayer` now allows its `currentTime` to be modified while an animation is running. Normally, this value will increase over time (or decrease, if the `playbackRate` is negative). This might allow an animation's position to be externally controlled, perhaps through user interaction. This is commonly referred to as [scrubbing](http://en.wikipedia.org/wiki/Scrubbing_%28audio%29).
An `Animation` now allows its `currentTime` to be modified while an animation is running. Normally, this value will increase over time (or decrease, if the `playbackRate` is negative). This might allow an animation's position to be externally controlled, perhaps through user interaction. This is commonly referred to as [scrubbing](http://en.wikipedia.org/wiki/Scrubbing_%28audio%29).

For example, if your HTML page represented the sky, and you'd like a drag gesture to change the position of a currently playing cloud, you could add some handlers to the document:

{% highlight javascript %}

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
startEvent = event;
startEventTime = players.currentTime;
player.pause();
});
document.addEventListener('touchmove', function(event) {
if (!startEvent) return;
var delta = startEvent.touches[0].screenX -
event.changedTouches[0].screenX;
player.currentTime = startEventTime + delta;
});
var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
startEvent = event;
startEventTime = players.currentTime;
player.pause();
});
document.addEventListener('touchmove', function(event) {
if (!startEvent) return;
var delta = startEvent.touches[0].screenX -
event.changedTouches[0].screenX;
player.currentTime = startEventTime + delta;
});

{% endhighlight %}

As you drag over the document, the `currentTime` will be changed to reflect the distance from your original event. You might also like to resume playing the animation when the gesture ends:

{% highlight javascript %}

document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});
document.addEventListener('touchend', function(event) {
startEvent = null;
player.play();
});

{% endhighlight %}

Expand All @@ -114,9 +117,9 @@ This could even be combined with reversing behavior, depending on where the mous
</div>
</div>

Instead of scrubbing an `AnimationPlayer` in response to a user interaction, its `currentTime` could also be used to show progress or status: for example, to show the status of a download.
Instead of scrubbing an `Animation` in response to a user interaction, its `currentTime` could also be used to show progress or status: for example, to show the status of a download.

The utility here is that an `AnimationPlayer` allows a value to be set and have the underlying native implementation take care of its progress visualization. In the download case, an animation's duration could be set to the total download size, and the `currentTime` set to the currently downloaded size ([demo](http://codepen.io/samthor/pen/QwbBbQ)).
The utility here is that an `Animation` allows a value to be set and have the underlying native implementation take care of its progress visualization. In the download case, an animation's duration could be set to the total download size, and the `currentTime` set to the currently downloaded size ([demo](http://codepen.io/samthor/pen/QwbBbQ)).

## UI transitions and gestures

Expand All @@ -126,32 +129,32 @@ With Web Animations, a similar effect is very easy to replicate here on the web

{% highlight javascript %}

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
var srcTime = player.currentTime;
var dstTime = findNearest(setpoints, srcTime);
var driftDuration = dstTime - srcTime;

if (!driftDuration) {
runCallback(dstTime);
return;
}

var driftPlayer = target.animate(steps, {
duration: duration,
iterationStart: Math.min(srcTime, dstTime) / duration,
iterations: Math.abs(driftDuration) / duration,
playbackRate: Math.sign(driftDuration)
});
driftPlayer.onfinish = function() { runCallback(dstTime); };
player.currentTime = dstTime;
});
var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
var srcTime = player.currentTime;
var dstTime = findNearest(setpoints, srcTime);
var driftDuration = dstTime - srcTime;

if (!driftDuration) {
runCallback(dstTime);
return;
}

var driftPlayer = target.animate(steps, {
duration: duration,
iterationStart: Math.min(srcTime, dstTime) / duration,
iterations: Math.abs(driftDuration) / duration,
playbackRate: Math.sign(driftDuration)
});
driftPlayer.onfinish = function() { runCallback(dstTime); };
player.currentTime = dstTime;
});

{% endhighlight %}

Expand All @@ -168,7 +171,7 @@ Finally, if you like kittens, there's a [demo web application](http://whistlr.in

## Go forth and element.animate

The `element.animate` method totally rocks *right now* - whether you're using it for simple animations, or leveraging its returned `AnimationPlayer` in other ways.
The `element.animate` method totally rocks *right now* - whether you're using it for simple animations, or leveraging its returned `Animation` in other ways.

These two features are also fully supported in other modern browsers [via a lightweight polyfill](https://github.com/web-animations/web-animations-js). This polyfill also performs feature detection, so as browser vendors implement the spec, this feature will only get faster and better over time.

Expand Down

0 comments on commit ff6f39a

Please sign in to comment.