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

2021.08.09.07:00



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

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

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

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

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

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

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

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

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

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

 ニメ動画を実現します。



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

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

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

 かったのです。

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

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

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

 いと思います。

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

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

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

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

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

 アニメ表現が出来ます。

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

 たのでご参考下さい。





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

CSSアニメーション画像





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

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

関連記事

comment

Secret

プロフィール

chappychan2

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

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

この人とブロともになる

QRコード
QR