制作実績お見積フォームHTMLWordPressEC累計コーディング数:14698ページホーム>Web制作>【WEBサイトでアニメーション】CSSアニメーションとCanvasを使ってアニメーションを実装しよう【WEBサイトでアニメーション】CSSアニメーションとCanvasを使ってアニメーションを実装しようWeb制作2019年02月08日2019年は動画元年と言われるほど、動画に注目が集まっています。動画のような「動きのある」モノがブームになっているのは映像作品だけではありません。WEB業界でもアニメーションなどの動きのあるWEBサイトが多くなってきています。今後は、このような流れを受けてWEBサイトも動きを中心とした演出がメインになってくる可能性があります。今回はWEBサイトで動きをだすたための方法であるCSSアニメーションやCanvasの使用方法を紹介します。CSSアニメーションの特徴CSSアニメーションはその名前通りCSSだけで実装できるアニメーションです。Canvasなどはjavascriptなどの知識が必要になりますが、CSSアニメーションはCSSだけの知識で実装できるのがメリット。WEBサイトのレイアウトを整えるためのCSSとは、少し違うプロパティなどを覚える必要はありますがCSSを使える方ならすぐに覚えて使用できます。簡単なサンプルコードから見ていきましょう。class="sample"><p>CSSアニメーション</p></div></body></html>上記のコードを表示させると、このようになります。このコードを記述すると、「CSSアニメーション」という文字列が左から右に流れるようになります。ここで記載されているプロパティを1つずつ紹介します。「animation-name」プロパティは、キーフレームアニメーションを使用する際に使うプロパティです。animation-nameの後にキーフレームアニメーションで設定したアニメーションの名前を記述することでアニメーションが適用されます。test;」と記述するとtestで設定したアニメーションが適用されます。キーフレームアニメーションはアニメーションの進行に合わせてスタイルを変更することが可能です。今回のキーフレームアニメーションでは、このように記述しています。translate(100%);」と設定しています。これで「CSSアニメーション」という文字列移動するようになります。「animation-timing-function」はアニメーションの進行割合を指定するプロパティです。サンプルコードでは「liner」を設定しており、一定スピードで変化するようにしています。「animation-duration」プロパティは、アニメーションの長さを指定します。4s;」と設定してアニメーションの長さを4秒に設定。「animation-iteration-count」プロパティは、アニメーションの繰り返しを設定するためのプロパティです。infinite;」と記述してアニメーションを無限に繰り返すように設定しています。上記のアニメーションで使用したプロパティは以上です。ここからは、サンプルコードを少し変化させてどのようにアニメーションが変化するかを見ていきましょう。サンプルコードに「animation-direction」プロパティを追加します。「animation-direction」プロパティはアニメーションを再生する方向を指定できるプロパティです。reverse;」を追加するとアニメーションの方向が逆になります。alternate;」を記述すると順方向と逆方向の交互にアニメーションを再生します。class="sample"><p>CSSアニメーション</p></div></body></html>また、キーフレームアニメーションの内容を変化させるとアニメーションする方向を変化することも可能です。下記のコードでは、横に移動していたアニメーションを縦に移動するように変化させています。300px;」を追記して移動させる方向を横から縦に変化させるために以下のコードを追記しました。3;」にするとアニメーションが3回繰り返したところでアニメーションがストップします。class="sample"><p>CSSアニメーション</p></div></body></html>「animation-timing-function」でアニメーションの進め方を変化させる値は大きく分けるとこのようなモノがあります。・ease・・・アニメーションの開始時と終了時の近くでゆっくり変化します。・ease-in・・・アニメーションの開始時はゆっくり変化して、終了時の近くで早く変化します。・ease-out・・・アニメーションの開始時は早く変化して、終了時の近くでゆっくり変化します。・ease-in-out・・・アニメーションの開始時と終了時の近くでとてもゆっくり変化します。・liner・・・一定で変化します。細かく分けると、このようなモノがあります。・easeInOutSine・・・アニメーションの開始時と終了時近くだけゆっくり・easeInCirc・・・アニメーション開始時はとてもゆっくりで中盤から早く変化する・easeOutCirc・・・アニメーション開始時は早く変化して、中盤からゆっくり変化する・easeInOutCirc・・・アニメーション開始時と終了時はとてもゆっくりで中盤だけ早く変化するCSSアニメーションでよく使用するプロパティは以上です。これらのプロパティを使用することでCSSアニメーションを実装できます。CSSだけでアニメーションを実装できるので、初心の方やCSSの知識があまりない方も使うことが可能です。次は、Canvasの実装について説明します。Canvasを使用するためには、「canvas」というタグを使用します。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。</canvas>「canvas」というタグに「canvas」というidを設定して、このようなスタイルを適用させます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。</canvas>次にCanvasを使用するためにjavascriptを記述します。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>すると、このように表示されます。次にCanvasのメソッドを使って図形を描画していきます。以下のサンプルコードでは、fillRectを使って四角形を描画します。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>ブラウザで表示すると、このようになります。「fillRect」メソッドを使うことで塗りつぶした図形を描画できます。これと同じような図形を「beginPath」、「moveTo」、「lineTo」、「fill」メソッドを使って描画するとこのようになります。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>これをブラウザで表示させるとこのようになります。「lineTo」メソッド使用することで線を描画して、「fill」メソッドで塗りつぶしすることで同じ図形を描画することも可能です。「clearRect」を使用することで図形の一部をくり抜くことができます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>「clearRect」メソッドは、消しゴムのように使用できます。ブラウザで表示させると、このようになります。「strokeRect」メソッド枠線の図形を描画できます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>ブラウザで確認すると、このようになります。「arc」メソッドを使用することで円弧描画できます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>これをブラウザで確認すると、このように表示されます。引数の値はこのようになります。「円弧の開始角度」や「円弧の終了角度」を変えることで円弧の面積を変えることができます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>円弧の終了角度を変えることで、このように半円を描画できます。開始角度と終了角度を変更することで縦に半円を描画できます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>ブラウザで確認すると、このように表示されます。「fillRect」メソッドと「arc」メソッドを使うことで車のシルエットを描画できます。Canvasに対応していないブラウザです。Canvasに対応したブラウザを使用してください。draw();};</script></body></html>ブラウザで確認すると、このようになります。まとめいかがでしたか?CSSアニメーションやCanvasを使用することで、色々な動作を実装できます。WEBサイトでアニメーションをさせたいときは、CSSアニメーションもしくはCanvasを使って実装してみてください。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。