キャンバスの勉強No.27(CSSアニメーションNo.03)

2021.08.16.07:00





 今回はCSSアニメーションの第三弾です。

 コロナ禍の影響で昨年に続き今年も各地で

 花火大会が中止となりました。

 そこでweb上で少しでも花火を楽しんで貰いた

 くCSSアニメーションで打ち揚げ花火のアニメ

 画像を作成しました。CSSによるanimation の

 プロパティと@keyframes の文法の記述は比較

 的単純なのですが、各花火の画像の配置位置に

 は苦労しました。

 以下の画像とテキスト文をご参照下さい。





 これに利用した花火の画像はweb上に公開

 された多くの花火の画像と共に

Open Clip Art Library

 からダウンロードしたsvg画像とpng画像から

 構成されています。

 そしてsvg画像の方は9VAeにより画像を変形して

 アニメgifに出力したものを採用しています。

firework01.png firework02.png firework03.png firework04.png
花火01 花火02 花火03 花火04
夏の夜空の花火の各サムネイルの
画像をクリックして下さい。
firework05.png firework06.png firework07.png firework08.png
花火05 花火06 花火07 花火08
firework09.png firework01.svg firework01.gif
花火09 花火10 花火gif




夏の夜空の花火大会CSSアニメーション画像



夏の夜空の花火大会CSSアニメーション

のテキスト文

キャンバスの勉強No.26(CSSアニメーションNo.02)

2021.08.09.07:00



 前回CSSアニメーションについて取り上げ

 ましたが、今回はその第二弾です。

 熱狂したオリンピックも終了したので、落ち

 着いてブログ記事を再開したいと思います。

 前回9VAeではモーフィング用の画像補完が出

 来ないようだと述べましたが、まここまさん

 のご指摘により間違いだと判明致しました。

 9VAeでは最初の画像から続きのページを作る

 ことにより、移行過程における中間画像を自動

 的に作成してくれるので滑らかな動きのあるア

 ニメ動画を実現します。



 当初Inkscapeで作成した複数枚のsvg画像

 を9VAeに取り込んでアニメgifを作成していた

 のですが、これではモーフィング処理出来な

 かったのです。

 然しながらもう既にまここさん一家の歩行gif

 画像を作成していたので、これを基にして小生

 なりのCSSアニメーションの取り組みを行いた

 いと思います。

 まここさん一家の歩行スタイルは少々カクカク

 としたスタイルですが、左から右へ移動する

 姿や背景画像は滑らかな動きです。

 また遅れがちなミニラちゃんが途中でこける

 シーンなども繋ぎ目ない滑らかな(シームレス)

 アニメ表現が出来ます。

 これのweb画像とテキストを下欄に表示しまし

 たのでご参考下さい。





まここまさん一家の公園を散歩する

CSSアニメーション画像





まここまさん一家の公園を散歩する

CSSアニメーションのテキスト文

キャンバスの勉強No.25(canvasでのお絵かきNo.09)

2021.07.26.07:00



 キャンバス内でお絵かきする第九弾です。

 前回途中迄だったミニラちゃんの歩行アニメの

 残りのsvg画像を補完しておきます。インクス

 ケープによる画像制作に於いては、ParaDrawの

 アンカーに当たる輪郭を形成する各点のパスを

 配置するのに少々苦労します。然しながら、

 ParaDrawの様にモーフィング処理させる為に

 次の画像とのアンカーの数や配置を統一させる

 必要は有りません。従って、一枚一枚自由にパ

 スを配置してキャラクター等の輪郭を描く事が

 出来ます。このsvgによるモーフィング処理に

 ついては又後日勉強致します。



 従ってInkscapeとParaDrawとの大きな違い

 はモーフィング処理出来るか否かです。

 ParaDrawのpdrファイルはParaFlaにより2枚

 の画像間に補完用の画像を自動的に再生して

 アニメの動きを滑らかにしてくれます。

 然しながらInkscapeのsvg画像だけではこれを

 補完して次の画像へのスムーズな画像遷移が

 出来ません。

 当初、9VAeがこのような補完作業をやってくれ

 るものだと思ってしましたが、そうではありま

 せんでした。所詮gifファイルに出力するだけ

 なので、カクカクとしたぎこちないアニメ運動

 しか得られません。

 svg画像を作成するだけでは、機能の少ない不自

 由な9VAeを利用するよりも高機能なInkscapeを

 採用した方がよっぽどきめ細かい画像作成が出

 来ると思いました。

minilla01minilla02minilla03minilla04
ミニラちゃん01 ミニラちゃん02 ミニラちゃん03 ミニラちゃん04
ミニラちゃんの各サムネイル
画像をクリックして下さい。
ミニラちゃん

キャンバスの勉強No.24(canvasでのお絵かきNo.08)

2021.07.19.07:00



 キャンバス内でお絵かきする第八弾です。

 前回のCSSアニメーションにはその他いろんな

 工夫を施せば様々な動きのするアニメgifを表現

 することが出来ます。然しここでは一旦中止し

 てまた後日取り上げたいと思います。

 それよりもsvg形式によるキャラクター画像の

 作成を再開して行きます。

 次はミニラちゃんの番です。ミニラちゃんは

 動きが簡単なのでたった四枚の画像から歩行

 スタイルを表現する事が出来ます。然しながら

 描画するのに手こずっていてまだ二枚しか出来

 ていません。



 このsvg画像を作成するのに実はインクスケ

 ープを採用しています。これはparadrawよりも

 高機能でしかも高価なadobeのillustratorに

 匹敵する程にも係わらず無料のソフトです。

 またparadrawと同じくsvg形式のベクター画像

 を作成してくれます。ただ余りにも高機能なので

 使い熟すのに少々苦労します。然しながらこれも

 慣れれば実にきめ細かい画像を作成出来ます。

minilla01minilla02
ミニラちゃん01 ミニラちゃん02
ミニラちゃんの各サムネイル
画像をクリックして下さい。
ミニラちゃん

キャンバスの勉強No.23(canvasでのお絵かきNo.07)

2021.07.12.07:00



 キャンバス内でお絵かきする第七弾です。

 皆さんはHeeさん枠をご参照されてブログ記事

 を作成されていますね。

 小生もHeeさんの記事を拝読して勉強していま

 す。その中で最近CSSアニメーションの記事を

 読みました。これはJavaScriptを使用しなくて

 もCSSの設定により画像や文字列のアニメ風の

 動きを表現する事が出来ることです。

 そこで、小生もCanvas以外にCSSの設定だけで

 画像やキャラクタのアニメーション画像の作成

 にトライしてみました。

 



 先ず初めに画像枠よりも横幅の広い画像を

 背景として配置します。ここでは昭和記念公園

 のパノラマ画像を採用して、CSSの設定により

 左右にゆっくりスクロールして行く画像を配置

 します。ここではそれぞれの両端に接すると反

 転するように設計しています。次に、前回作成

 したsvg画像を9VAeに取り込んで、アニメgifに

 出力したまここまさんのgif画像を背景の上に配

 置します。右向きと左向きの歩行パターンがある

 ので、以下の様に2枚の背景画像の上で歩行する

 ように配置しました。ご参照下さい。



 このようにすれば、皆さんもお手持ちの画像

 やキャラクタ等のgif画像を利用して、CSSの設定

 だけでアニメーション画像を容易に作成出来る

 のではないでしょうか?

 ご参考までに、これらの作成に記述したhtml文章

 を下欄に表記しておきますので、ご利用下さい。

 使用する背景画像やアニメgifを変更して、後は

 サイズ等の数値を変更するだけで作成出来ます。

 皆様のユニークな画像を掲載されるのを期待し

 ます。





まここまさんの9VAeからのアニメ

gifによる歩く姿No.1





まここまさんの9VAeからのアニメ

gifによる歩く姿No.2





 まここまさんの9VAeからのアニメ

 gifによる歩く姿No.1





 まここまさんの9VAeからのアニメ

 gifによる歩く姿No.2



プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR