Webページで表すことのできるアニメーションについて、いろいろと述べています。 Webアニメーションとは？ アニメーションが動いて見える原理 あたりからどうぞ。
続きを読むカテゴリー: CSS
10-10-3 getComputedTiming().progressの利用
「10-10 アニメーションタイマーとしての利用」で述べた”3 セットした時間を100%として、今がその何%に当たる瞬間かを教えてくれるタイマー”の例です。ここでは、Animation.effect.getCompute […]
続きを読む10_10_1 finishイベントの利用
「10-10 アニメーションタイマーとしての利用」で述べた”1 セットした時間の経過を教えてくれる、通常のタイマー”の例です。ここでは、アニメーションタイマーのfinishイベントを利用しています。 ページを開くと、カラ […]
続きを読む10_10 アニメーションタイマーとしての利用
Animationオブジェクトは次の特徴を持つタイマー(便宜的にアニメーションタイマーと呼びます)としても利用できます。 セットした時間の経過を教えてくれる、通常のタイマー セットした時間を繰り返し、その回数を教えてくれ […]
続きを読む10_9_2 SVGのシークアニメーション
<svg>要素で描いたパスに沿ってHTML要素が動くアニメーションはCSSで作成できるので、同じことがWeb Animations APIでも行えます。また、アニメーションのcurrentTimeを、シークバ […]
続きを読む10_6 アニメーションの再生状態
アニメーションには次の再生状態があります。今どの状態にあるかは、playStateプロパティで調べることができます。 idle アニメーション設定の実行前で、アニメーションのタイム値が設定されていない状態。cancel( […]
続きを読む10_5 Animationオブジェクトのイベント
Animationオブジェクトでは、finishイベントとcancelイベントが定義されており、AnimationオブジェクトのaddEventListener()メソッドで、発生を待ち受けることができます。名前から容易 […]
続きを読む10_4 CSS Animationsの取得
CSS Animations、つまりCSSのキーフレームを使ったアニメーションは、document.getAnimations()メソッドで取得できます。結果はAnimationオブジェクトを入れた配列として返されます。 […]
続きを読む6_3 よいアニメーションにするには？
よくできたアニメーション、つまり、スタート時にはもたもたせずにすぐ始まり、ヌルヌル動く（60fpsを維持する）アニメーションにするための、いくつかの技術的な方策が提案されています。 再レイアウトをともなわないCSSプロパ […]
続きを読む6_2 レイアウト変更や再描画をともなうプロパティ
要素のプロパティに変更が加えられると、ブラウザは、その変更の影響を受けるすべての要素のサイズと位置を計算しなくてはなりません。たとえば、相対的な位置設定がしてある要素の位置が変わると、他の子要素や親要素に影響が及ぶことに […]
続きを読む6_1 ブラウザがWebページを表示するまでの仕組み
快適なアニメーションにするには、ブラウザがアニメーションを画面に表示する仕組みを知っておいて損はありません。以下が概略図と説明です。 読み込んだHTMLとJavaScriptを解析してDOMツリーを構築する。 読み込んだ […]
続きを読む6 アニメーションのパフォーマンスを上げる
「1_1 アニメーションとは？」では、人間は本来的にアニメーションが好きなのだ、ということを述べましたが、これは正確ではありません。よくできたアニメーションは好きですが、できの悪いものは逆効果で、不快になるでしょう。 よ […]
続きを読む5_2 離散関数
CSS AnimationsとCSS Transitionsのタイミング関数には、出力される値が途切れる離散関数も指定できます。指定にはsteps()関数を使用します。 steps( number_of_steps, d […]
続きを読む5_1 連続関数
タイミング関数のうち、値が途切れずに変化しつづける関数を連続関数と言います。以下はCSSアニメーションに使用できる連続関数の一部です。 linear 定速 ease 最初加速し、だんだん減速 ease-in だんだん加速 […]
続きを読む5 タイミング関数
タイミング関数は別名イージング関数とも呼ばれ、CSS AnimationsやCSS Transitionsアニメーションを作成するとき、animation-timing-functionやtransition-timin […]
続きを読む4_5 CSS Transitionsのイベント
CSS Transitionsのイベントの発生は、CSS Transitionsアニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。 イベントには次のものがあります。 tra […]
続きを読む4_4 transtionプロパティ
transition CSSプロパティは、CSS Transitionsアニメーションを指定するショートハンド（一括指定）プロパティです。 通常は、transition:につづけて、変化の発生を監視するプロパティ名、その […]
続きを読む4_3 CSS Transitionsのポイント
CSS Transitionsは次の手順で作成できます。 アニメーションさせたい要素のCSSクラスで、transitionプロパティを設定する。 監視するプロパティが変化するきっかけを作成する。 前の例では、<im […]
続きを読む4_2 基本
CSS Transitionsの基本を以下に示します。 マウスオーバーで写真が少し傾き、大きくなるアニメーション HTML まずはHTMLです。<div>要素の中に、<a>、その中に<img […]
続きを読む4_1 CSS Transitionsの特徴
CSS Transitionsは、初めの状態と終わりの状態の間で、時間経過とともにCSSプロパティの値を変更することで、アニメーションを実現する方法です。 CSS Animationsとの大きな違いは、 キーフレームがな […]
続きを読む4 CSS Transitions
CSSアニメーションには、CSS Animations（キーフレームアニメーション）のほかにもう１つ、CSS Transitionsがあります。アニメーションの仕組みとしてはCSS Animationsの方が分かりやすい […]
続きを読む3_5 CSS Animationsのイベント
CSS Animationsのイベント、つまり、キーフレームアニメーションのイベントの発生は、アニメーションを実行するHTML要素のaddEventListener()メソッドで監視できます。 イベントには次のものがあり […]
続きを読む3_4 animationプロパティ
animation CSSプロパティは、キーフレームアニメーションを指定するショートハンド（一括指定）プロパティです。 通常は、animationにつづけて、まずアニメーション名、その後にアニメーションにかける時間（du […]
続きを読む3_3 CSS Animationsのポイント
CSS Animationsを作成する手順をまとめると、次のようになります。 アニメーションさせたい要素のCSSクラスで、animationプロパティを設定する。 キーフレームを定義する。 animation: bree […]
続きを読む3_2 基本
CSS Animationsの基本を示します。 みの虫がそよ風に揺れるアニメーション HTML <div class=”minomushi breeze”></div> HTMLでは、<di […]
続きを読む3_1 CSS Animationsの特徴
CSS Animationsは、キーフレームを使って、時間経過とともにCSSプロパティの値を変化させることでアニメーションを実現する方法です。別名、キーフレームアニメーションと呼ばれ、後で述べるCSS Transitio […]
続きを読む3_CSS Animations
ここで言うCSS Animationsとは、@keyframeルールを使ったキーフレームアニメーションを言います。CSSアニメーションにはもう１つ、CSS Transitionsと呼ばれるものがあり、混同しがちなので、注 […]
続きを読む1 Webアニメーションとは？
日本語でアニメーションと言うと、通常はテレビや映画のアニメを指しますが、コンピュータの世界では、時間の経過とともに、たとえば色が変わっていくこともアニメーションと呼ばれます。
続きを読む