ディテールと演出 · 仕上げの小技
線画アニメーション线条自绘
- 優雅
- 過程が見える
- 手描き風
線がペンで描かれていくように始点から終点へ伸びます。全体が薄く現れるのとは違います。
使いどころ
アイコン・イラスト・フロー図が最初に現れるときに使います。毎回繰り返すとくどくなります。
パラメータ
stroke-dasharray = total path length · stroke-dashoffset: →0 · 800ms ease-in-out
レシピ
線画アニメーション → 800ms ease-in-out線画アニメーション → stroke-dasharray = total path length · stroke-dashoffset: →0
AI に渡す一文
この SVG アイコンに線画アニメーションを付けてください。stroke-dasharray と stroke-dashoffset をパス長に設定し、dashoffset を 0 まで 800ms、ease-in-out で動かします。