Silky smooth Web AnimationsYouTube↗  IA↗(long shot)
Science & Technology  36.7K views 450 likes 6 dislikes   18 Jun 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
アレックス・ダニーロこんにちは。
알렉스 다닐로: 안녕하세요!
開発者リレーションズチームの アレックス・ダニーロです。
저는 Google Developer Relations 팀의 알렉스 다닐로입니다.
Web開発者として とても苦労したのは、
웹 개발자로 일하면서 정말 어렵다고 생각한 것 중 하나는
サイト上での魅力的な アニメーション作りでした。
사이트에서 주의를 끌만한 애니메이션을 만드는 것입니다.
サイトにCSSアニメーションを 組み込んで、ブラウザ内で
CSS 애니메이션을 사이트에 만들어 올리는 것이 처음에는 쉬워 보입니다.
色々なものを動かすのは とても簡単そうに思えるし、
브라우저에서 여러분 주위의 것이 날아다니는 것을 보세요.
初めて目にした時は 大喜びすることでしょう。
이를 처음 보았을 때는 온통 기쁜 마음이 들 것입니다.
でも、私と同じ考えなら、 もっと目立つサイト、つまり
여러분이 저와 같다면 돋보이는 사이트를 만들고 싶을 겁니다.
記憶に残るようなサイトを 作りたいと思うでしょう。
아시죠, 기억에 남는 사이트 말이에요.
前に見たことのあるような 出来合いのものとは
이미 사람들이 많이 본 것을 비슷하게 따라해 통조림처럼 찍어낸
違うサイトをです。
그렇고 그런 것 말고 말입니다.
私はWebアニメーション技術を まず色々と試してみました。
그래서 저는 다양한 웹 애니메이션 기법으로 실험을 시작했는데
そして手の込んだ事を しようとして、すぐに問題に
멋지게 일을 하려다가 당장 문제에
直面しました。
봉착했습니다.
例えば、2つのものに 全く同じ動きをさせたいと
예를 들어, 두 개가 완벽하게 동기화되는
考えたのですが、 簡単にできる方法が
애니메이션을 만들고 싶었지만 쉽게 할 수 있는 방법을
見つかりませんでした。
찾지 못했습니다.
1,000行のコードが必要で、 しかも途切れ途切れだし
제 솔루션에는 1,000개의 라인으로 구성된 코드가 사용되었는데
使い物になりませんでした。
심하게 뚝뚝 끊어지고 jank가 많았습니다.
いい方法があったらなあ…
더 나은 방법이 있으면 좋겠는데요.
私が作りたかったのは、 完全に制御可能で、
이것이 바로 제가 구축하고 싶었던 것입니다.
スムーズで余分なものがない アニメーションを使った
바로 애니메이션이 jank 없이 매끄럽게 진행되고
3Dハードウェアアクセラレータ による映像です。
완벽한 제어가 가능한 지구에 대한 3D 하드웨어 가속 뷰입니다.
今はもっといい方法があります。
이제는 더 나은 방법이 있습니다.
多数のブラウザ制作者や アニメーション専門家が
여러 브라우저 작성자와 애니메이션 전문가가
数年前、一堂に会して、 これを新たな視点から
2년 전에 모여서 이 문제를 관찰했습니다.
検討しました。
새로운 시각으로 관찰했고 많은 사람이 보았습니다.
多くの時間を費やして Web開発者が求めているものや、
웹 개발자에게 필요한 것, 애니메이션 디자이너의
アニメーションデザイナーの 仕事の進め方などを
작업 방식 등을 논의하는 데 많은 시간을
話し合いました。
들였습니다.
そして開発されたのが Web Animations 1.0でした。
그때 생각해낸 것이 Web Animations 1.0입니다.
既存のあらゆるWeb アニメーションの基本要素を
저희 목표는 기존의 모든 웹 애니메이션 프리미티브를
統合することを目指しています。
끄집어내서 하나로 통일하는 것입니다.
また、最終的には強力な だけでなく、動きが速く
새로운 기능이 전보다 더 강력한 것은 아니지만
スムーズに実行できる 新しい機能の開発も
결과적으로 더 빠르고 매끄럽게
目指しています。
실행될 것입니다.
JavaScriptから アニメーションを再生する時、
JavaScript의 애니메이션 작업을 수행하는
特に、フレーム単位に なっているものを
최고의 API 중 하나는 당연히 requestAnimationFrame입니다.
細かくコントロールする場合に 最適なAPIの1つが、
특히, 프레임 단위로 모든 것을
requestAnimationFrameです。
미세 제어하기 원할 경우에 그렇습니다.
requestAnimationFrameを 使うとアニメーションが
requestAnimationFrame을 사용할 때 애니메이션이 어떻게 작동하는지에 대해
どのように動作するかを 見ていきましょう。
간단히 살펴보도록 하겠습니다.
requestAnimationFrameを 使うと、制御性は向上しますが、
requestAnimationFrame을 이용하면 제어력이 좋아지지만
すべてのフレーム上で強制的に JavaScriptが実行されます。
JavaScript 실행을 프레임마다 강제해야 합니다.
JavaScriptをあまり使わない 場合はそれでも良いでしょう。
JavaScript에서 하는 일이 많지 않으면 이것도 괜찮습니다.
でも各フレームには16ミリ秒 しか与えられていません。
그러나 프레임당 주어진 시간은 16밀리초에 불과합니다.
これにはペイントやレイアウト の時間も含まれています。
여기에는 페인트와 레이아웃 시간까지 포함됩니다.
時間が足りないと どうなるかわかりますよね。
따라서 시간이 다 되면 어떤 일이 벌어지는지 아십니까?
フレームが飛んで、 ジッタとも呼ばれる
프레임을 건너뛰게 되고 그 결과 jank가 발생합니다.
ジャンクとなります。
어떤 사람들은 jank를 지터라고 부릅니다.
これが、アニメーションと JavaScript実行を
JavaScript 실행으로부터 애니메이션을 분리하는 것이
切り離した方が良い という主な理由です。
좋은 생각이 아닌 주된 이유가 바로 이것입니다.
ジャンクではなく、 JavaScript制御の
그래서 저희는 jank가 아니라 JavaScript로부터의
柔軟性を 必要としていたのです。
유연한 제어를 원했습니다.
これがその設計です。
이것이 저희가 디자인한 것입니다.
WebアニメーションAPIを 使用すると、JavaScriptで
Web Animations API를 사용하면 JavaScript로부터 애니메이션을
アニメーションが作成でき、 そのアニメーションの計算を
생성한 후 애니메이션 계산을 브라우저에
ブラウザにオフロードすると、 やっかいな仕事を全部
오프로드할 수 있습니다. 따라서 이 API는 감당하기 어려운
任せることが可能になります。
모든 힘든 작업을 여러분 대신 처리할 수 있습니다.
また、多くの場合、ハードウェア アクセラレーションを
많은 경우에 하드웨어 가속을 이용할 수 있습니다.
利用できるので、 各フレームの作業が
그러다 보니 각 프레임별로
大幅に削減されます。
할 일이 거의 없습니다.
つまり、ハードウェアで 高速処理したアニメーションが
다시 말해, JavaScript API를 이용해서
JavaScript APIを 使用することによって、
알맞은 하드웨어 가속화 애니메이션을 만들 수 있게 되고
実現するのです。 各フレームでの再計算による
프레임마다 계산할 것이 많아서 속도가 느려질
減速もありません。
염려가 없습니다.
これは今までになかった ことです。素晴らしい事だと
전에는 없었던 기능입니다.
思いませんか。
정말 멋지지 않습니까?
何を考えているかわかります。
여러분이 무슨 생각을 하고 있는지 알고 있습니다.
そう、ハードウェアで高速処理 したCSSアニメーションは
네, 하지만 하드웨어 가속화된
すでにありますね。
CSS 애니메이션이 이미 있습니다.
その通りです。
네, 사실입니다.
そして、すべてを統合 することでハードウェア
그리고 저희는 모든 것을 통합해서
アクセラレーションの 適用範囲が拡大されます。
하드웨어 가속의 적용 범위를 확장했습니다.
Web AnimationsはCSS アニメーション、切替え、
Web Animations 디자인은 CSS 애니메이션, 트랜지션,
JavaScript作成アニメーション、 SVGアニメーションを
SVG 애니메이션, JavaScript 작성 애니메이션을
1つに統合するのです。
모두 통합합니다.
実際、Web Animationsのエンジンは、
사실, 지금은 Web Animations 엔진을 사용하여
CSSアニメーションと切換えの 両方をChromeで実行するために
CSS 애니메이션과 트랜지션을 Chrome에서 실행하고
使われています。
있습니다.
つまり、それこそ Web Animationsのエンジンが
그런 일이 있다는 것을 눈치채지도 못했을 수 있습니다.
いかにシームレスに ブラウザに統合されているか
오히려 바로 그런 점이 Web Animations 엔진이 얼마나
を証明しているのです。
매끄럽게 브라우저에 통합되는지를 보여주는 증거입니다.
さらに優れているのは、CSS アニメーションの作動に加え、
그보다 더 좋은 장점이 있습니다. CSS 애니메이션을
element.animateを 呼び出して、ブラウザ内の
강화할 뿐만 아니라 element.animate를 호출할 수 있는데
アニメーションの内部の インターフェースに使われる
이것은 브라우저 내부에 있는 애니메이션 인터널
anmationplayerオブジェクトを 作成することが
인터페이스에 사용되는 애니메이션 플레이어 개체를
できる点です。
생성합니다.
object returnによって、 実行中のアニメーションの
개체 반환은 실행 애니메이션을 쿼리하고 수정하게 해주므로
クエリと変更が行われるので、 アニメーションの実行は
브라우저에서 애니메이션의 실행이 분리되더라도
ブラウザで切り離されますが、 JavaScriptで実行中の
JavaScript로부터 실행 애니메이션을 수정할 수 있는 기능은 그대로 유지됩니다.
アニメーションを 変更する機能は保持されます。
두 환경의 좋은 점만 골라 모아 놓은 것이라고
両方のいいとこどりですね。
할 수 있습니다.
さて、これを覚えていますか。
이제 기억나십니까?
この地球の3D映像はWeb Animationsで構築されています。
멋진 3D 지구본이 실제로 웹 애니메이션을 이용해 구축되었습니다.
わからなかったでしょう？
모르셨죠.
これは氷山の 一角にすぎません
이것은 빙산의 일각일 뿐입니다.
ここにもう1つ デモがあります。
터치와 같은 입력을 이용해서 실행 애니메이션을
タッチ入力などで、実行中の アニメーションを操作する
조작하는 방법을 소개하는 또 하나의 데모를
方法を示しています。
소개합니다.
CSSアニメーションを 使ってもこれは
CSS 애니메이션으로는 이런 것을 구축할 수 없습니다.
構築できません。 実行中のアニメーションを
실행 애니메이션이 일단 시작되면
動的に操作することが できないからです。
동적으로 조작할 수 없기 때문입니다.
Web Animationsなら可能です。
그러나 Web Animations에서는 가능합니다.
これは真の同期化を 示しています。
그것만 할 수 있는 게 아닙니다. 저와 대화한 거의 모든 사람이
これには誰もが わくわくしています。
열광한 바로 그것, 진정한 동기화도 할 수 있습니다.
Web Animationsは素晴らしい ツールで、しかも今すぐ使えます。
Web Animations는 정말 대단합니다. 그리고 지금 당장 이용할 수 있습니다.
Web Animationsに ネイティブで対応しているのは
Chrome은 웹 애니메이션을 기본적으로
Chromeだけではありません。
지원할 뿐 아니라 저희는 JavaScript의 오픈 소스
JavaScriptでオープンソース 実装を開始しました。
구현에 착수했습니다. 이를 통해 어떤 브라우저에서든
これによりどのブラウザでも APIが使用できます
API를 이용할 수 있습니다.
このPolyfillがあれば、 Web Animationsを今すぐ
폴리필 덕분에 웹 애니메이션을 곧바로 이용할 수 있게 되었고
使用できます。また、すべての ブラウザに搭載されるように、
모든 브라우저 벤더가 합류할 수 있도록
全作業をW3Cで公開しています。
이 모든 작업을 W3C에서 공개적으로 할 것입니다.
Polyfillやデモ、コード経由の ハッキングなどについて、
폴리필, 데모 동영상을 살펴보고
確認してみてください。
코드를 파헤쳐보십시오.
Web開発者にとって最強の アニメーション基本要素で
오늘날 웹 개발자가 이용할 수 있는 가장 강력한
魅力たっぷりのホームページを 展開してください。
애니메이션 프리미티브로 여러분의 사이트를 반짝반짝 빛나게 하십시오.
きっと皆があっと驚くことでしょう。
사람들이 놀라 자빠질 것입니다.
アレックス・ダニーロでした。 Web Animationsで
지금까지 알렉스 다닐로였습니다. Web Animations를 이용해서
どんなものが生まれるか 楽しみにしています。
어떤 종류의 것을 구축하실지 정말 기대됩니다.
Similar videos:

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201462% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201461% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201459% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201458% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201457% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201457% match

Responsive images today
Google for Developers
14.6K views 179 likes 4 dislikes 25 Jun 201457% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201456% match


Easy International Checkout with Chrome
Google for Developers
14.6K views 140 likes 8 dislikes 12 Jun 201456% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201438% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201438% match


DevBytes: Web Components - Overview
Google for Developers
25K views 248 likes 14 dislikes 25 Jun 201436% match


Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201434% match

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201434% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201433% match

Google Cast: Introduction to the SDK
Google for Developers
47K views 141 likes 7 dislikes 10 Dec 201432% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201432% match

DevBytes: Intro to Google Maps Data Layer
Google for Developers
81.1K views 179 likes 7 dislikes 18 Mar 201431% match

DevBytes: Chrome DevTools Device Mode
Google for Developers
73.4K views 340 likes 26 dislikes 10 Oct 201431% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201431% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201431% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201430% match

Easy Maps Apps in Java and Python
Google for Developers
30.5K views 238 likes 8 dislikes 07 Jan 201530% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201430% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201430% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201430% match

Perf Primer : CPU, GPU and your Android game
Google for Developers
31.3K views 334 likes 13 dislikes 12 Jun 201429% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201428% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201427% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201427% match


Settings Privacy About Contact Donate