上記記事の画像・CSSの差し替えなど、追加アイデアについてまとめました。
やりたいこと
- サンプルのチビキャラ全身から等身バストアップイラストに差し替えてみる。（画像を差し替えるだけです）
- 目パチ口パクの動きを変える。（CSSを書き換える）
等身タイプの画像で動作テスト
イラストのタイプが違っていても同じように動かせますというテスト。
音声読み上げソフト https://ondoku3.com/ja/
背景の配信画面素材 https://tearie.booth.pm/items/4007781
BGM https://zukisuzukibgm.com/diamond/
お借りしました🙏
ちびキャラのように全体をふわふわさせるアニメーションはオフにしてみました。
ふわふわのアニメーション[floating-now]を呼び出している部分、
animation: floating-now 4000ms ease-in-out forwards infinite;
を削除かコメントアウトします。
素材はテストご利用OKです。
配信などでテストご利用の場合は概要欄に当ブログへのリンクをお願いします。
素材の一括ダウンロード👉kutipaku_sozai2_241223.zip ※24/12/23修正しました
CSSの変更でアニメーションを調整
- キャラを2体以上表示させた時に、まばたきが同期しないようにしたい
- 口のアニメーションをもっと短くしたい
などなどの場合、カスタムCSSの内容を書き換えて動きを変更します。
アニメーションはCSSのアニメーション機能で実現しています。
以下はキャラクターがふわふわ上下する部分です。（CSS全体は前記事を参照してください。）
@keyframes floating-now {
0% {top: 0;}
50% {top: -5px;}
100% {top: 0;}
}再生時間の50％地点でオブジェクトの表示位置をtop-5px（上に5px）移動する。
100％地点で元に戻す。
という動きをCSSで設定しています。
これを何秒かけて再生するかなどを
animation: floating-now 4000ms ease-in-out forwards infinite;このように指定して呼び出しています。
この例では4000ms（4秒）掛けてアニメーションを実行しています。
（その他の指定の意味は、CSS animationなどで検索すると調べられると思います。）
目パチ（まばたき）の間隔調整
まばたきのアニメーションを呼び出しているのは
animation: mepachi 2400ms ease-in-out forwards infinite;この部分です。
例では2.4秒間隔で再生しています。
この数値を変更すれば、まばたき間隔の調整ができます。
口パクの調整
前記事の口パク部分はこちら
@keyframes kuchipaku {
0% {content: url(mth_3.png);}
19% {content: url(mth_3.png);}
20% {content: url(mth_2.png);}
39% {content: url(mth_2.png);}
40% {content: url(mth_3.png);}
59% {content: url(mth_3.png);}
60% {content: url(mth_1.png);}
79% {content: url(mth_1.png);}
80% {content: url(mth_2.png);}
99% {content: url(mth_2.png);}
100% {content: url(mth_1.png);}
}これだと長く感じるかもなので、短いパターンも作ってみました。
@keyframes kuchipaku {
0% {content: url(mth_3.png);}
24% {content: url(mth_3.png);}
25% {content: url(mth_1.png);}
49% {content: url(mth_1.png);}
50% {content: url(mth_2.png);}
74% {content: url(mth_2.png);}
75% {content: url(mth_1.png);}
100% {content: url(mth_1.png);}
}この変更プラス、前述の再生時間の調整で口パクも調整ができます。
口パクを呼び出している部分は
animation: kuchipaku 600ms ease-in-out forwards infinite;です。
以上変更方法のメモでした。
なに言ってるかわからんとか、
もっとこうしたいとかご要望ありましたら、以下にメッセージ送ってみてください👍
コメント