滑らかなウェブ アニメーション

ウェブ アニメーションは、CSS と JavaScript のアニメーションを統合するための新しい標準セットです。ウェブ アニメーションを使用すると、JavaScript での処理を維持しながら、GPU でアニメーションを実行できます。しかし、これらすべてのアニメーションの調整は簡単な作業ではありません。ありがたいことに、そのための要素が 1 つあります。実際の動作です。

このエピソードでは、Polymer Element カタログのネオン アニメーション動作を使用して、スムーズなアニメーション動作を組み合わせて、すべてを自分で管理する手間を省く方法について説明します。この知識があれば、次のエピソードでは伝説のネオン アニメのページの要素について学ぶことができます。

詳細

プロジェクトのソース

https://github.com/Polymer/polycasts/tree/master/ep23-neon-animation/login-panel

NEON アニメーションのドキュメント

https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages

ネオン アニメーション ガイド

https://elements.polymer-project.org/guides/using-neon-animations

鉄のアイコンセットを使用したカスタム アイコン -- Polycast #22

https://www.youtube.com/watch?v=tjmRUgUca1g&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=2

動作 -- Polycast #21

https://www.youtube.com/watch?v=YrlmieL3Z0k&index=1&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN

鉄のアイコン -- Polycast #20

https://www.youtube.com/watch?v=6kkNgVG6LuI&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN&index=1

詳細