p5.jsでこんな感じのまばたきアニメーションを作りました。

上の検証にも書いていますが、まばたきアニメーションは使う画像を3枚にすると途端にリッチになります。
まばたきアニメーションは画像を3枚使うとリッチ
開き目、閉じ目の間にほんのちょっとだけ下げた(閉じた)目を用意します。
「ほんのちょっとだけ」というのがポイントで、開き目と重ねるとこのくらいの下がり具合です。
開き目と下げ目の比較

このちょっとだけずらした絵を用意する方法は下記のツイートを参考にしました。
(センシティブ要素はないです🙅‍♀️)




開き目と閉じ目の間なんだから半目にすればいいじゃん、と思っていましたが本当にほんのちょっと下げるだけでいいみたいです。
原理としてはおそらくこのような話だと思われます。
緩急を持った動きを表現するには、2枚の原画のうち、速度が緩む方にツメて(寄せて)割れば良い



まばたきという動作を考えてみると、まず等速運動ではないはずです。
そして、まぶたに重さがあるという点を考慮すれば、
目を閉じる時はストンと閉じて、開く時はエイヤッと開いているはずです。
これを反映すると開き目〜閉じ目の中間のカット(等速運動の割り方)ではなく、
目を開ける直前にカットを加える方がたしかに自然です。

というわけで、上記に掲載した2個目の作品、キラキラ目の方は
開き目→閉じ目→下げ目→開き目→...
という流れになっています。
まぶたを閉じる時はストンと、開ける時はエイヤッと、を反映しています。
ちなみに検証時のアニメだと開き目→下げ目→閉じ目→下げ目→開き目→...という流れなので、
キラキラ目よりもさらにもっちゃりと動いています。

キラキラ目はさらに開け...閉じ...をばらつきのあるリズムにしています。
このリズムについては下記のツイートを参考にしました。



一定のリズムより、ばらつきのあるリズムの方がたしかにカワイイです。

p5.js上ではどの画像をどの程度の長さ出すかを制御しています。
画像を配列に入れて開き目は0番、下げ目は1番、閉じ目は2番というように管理しています。
0番(開き目)の画像を40回表示した後、1番(下げ目)の画像を2回、2番(閉じ目)の画像を2回、1番の画像を2回...を1セットとしてループさせているのが検証アニメーションです。
これをframeRate(25)でアニメーションさせています。
キラキラ目についても同様の手法です。

目は片方だけiPadで描いて、p5.jsで左右反転させてもうひとつ表示させることで双眸を表現しています。
また、瞳の色がつく部分を透過させた画像で作っているのでキラキラ目のように瞳の中は何でもやりたい放題になっています。

アニメーションのカット割りって通常のp5的なアニメーションとはまた違った面白さがあるので、
気になった方はぜひチャレンジしてみてください〜!