あなたのUI/UXを上げる "アニメーション" の基礎

こんにちは！
最近Zennで本を出版しました！ 🚀🚀🚀

アニメーションを始めとした、ユーザー体験をこだわりたいと思って書いた本です！
ただ、ごめんなさい、有料にしちゃってるので、まずこの記事読んでもらって面白いと思ったら、ぜひ本を購入を検討してくれると嬉しいです！

https://zenn.dev/imajoriri/books/2ab1be474e53c8

では本編です！！

はじめに。

素晴らしい見た目のアプリでも、アニメーションがダサいと急にアプリのクオリティが低く見えてしまいます。
アニメーションは「なんかカッコイイ」を表現するだけではなく、ユーザーにとっての使いやすさにも影響してきます。
この記事では、

• アニメーションをどんな時に使うのか
• アニメーションの種類と使い所

について深掘りしていきます。

アニメーションはぱらぱら漫画

アニメーションとは、実は一枚絵が高速で動いているだけなのです。
いわゆるパラパラ漫画のような原理です。

Flutterでアニメーションする仕組みは実はシンプルです。
1秒間に60回setStateすることで、Widgetが高速でリビルドされるため動いているように見えています。
(端末によっては1秒間に120回)

アニメーションのない世界を体験する

アニメーションがない世界を体験するとどうなるのでしょうか?
iOSは普段意識してないにせよ、いろんなインタラクションにアニメーションが採用されています。
アクセシビリティの設定からアニメーション(視差効果)を減らすことができます。

設定アプリ > アクセシビリティ > 動作 > 視差効果を減らす

こうすることで、例えばアプリを開いたり閉じたりする際のアニメーションが無くなります。
試してみると、違和感を感じると思います。

GIFを置いておきますが、手元で実際に触ってみるのが一番わかりやすいと思います。

アニメーションの目的

なぜ我々はコストをかけてまでアニメーションを実装するのでしょうか?
そこには2つの理由があります。

1. 示唆するアニメーション
2. 心地よさのアニメーション

示唆するアニメーション

iPhoneの待ち受け画面のカメラ・ライトボタンは長押しで起動できます。
つまり、タップしただけでは何も起こりません。
しかし初見ではタップしてしまいそうですし、何も起こらなければ「バグなのか?」と疑ってしまいます。

Appleはこれを"ボタンのバウンス"で解決しています。
タップした際、機能としては何も起こりませんが、バウンスアニメーションが起こることでこの機能は長押しすることで使えることを示唆しています。

このようにアニメーションには見た目の良さだけではなく、機能の役割を伝えることができます。
いつも使っているPush遷移でさえも、右側から出てくることで左にスワイプすれば閉じれる、ということを示唆しています。

心地よさのアニメーション

心地よさのアニメーションもあります。
こちらはFlutterで作られていることが話題のMixi2ですが、いいねを押した際の演出に心地よさを感じます。
このアニメーションによって機能を示唆しているわけではないですが、"心地よさ"、"楽しさ"を感じ、アプリへの印象が良くなります。

それでは、どのようなアニメーションを作ることができるのでしょうか?
次はアニメーションの種類を見ていきます。

アニメーションの種類

アニメーションを実装する時に一番使うのはEasingだと思います。
FlutterではCurves.easeOutのように実装します。

いわゆるEasing Curve(イージングカーブ)というものですが、実はたくさん種類があります。

Easing Curve(イージング カーブ)

そもそもイージング カーブとはなんでしょうか?
Flutter公式にはこのように書かれています。

イージング カーブは、時間の経過に伴うアニメーションの変化率を調整するために使用され、一定の速度で動くのではなく、アニメーションを加速したり減速したりすることができます。

Curveより: https://api.flutter.dev/flutter/animation/Curve-class.html

要はアニメーションの時間と動き方を定義し、加速したり減速するアニメーションです。

Flutter公式のCurvsクラスには多くのアニメーションが定義されています。
よく使うLiner、Ease In、Ease Outとその種類についてみていきます。

Gifではわかりずらい部分もあると思うので、サンプルを置いたサイトを載せておきます。
https://v0-new-project-lbkkbuv43he.vercel.app/

等速直線運動のLiner

イージング カーブではありませんが、比較するための代表的なアニメーションとしてLinerです。
これは最初から最後まで同じ速度で移動します。

Ease Inは徐々に "加速" する

Ease Inは最初はゆっくり移動し、徐々に加速していきます。

Ease Outは徐々に "減速" する

Ease Outは逆に最初は早い速度で、徐々に減速していきます。

Ease In と Ease Outどちらを使えばいいの?

自然なアニメーションを作るにはどうすればいいでしょうか?
"自然"と感じるには、実際の世界と似たような動きになっている必要があります。

考え方の一つとして「実際の世界と似ているか」というのがあります。

例えばボールは転がり、摩擦や空気抵抗を受け徐々にゆっくりになり、最後には止まります。
多くの場合でEase Outはその動きにとても似ています。

では、もう少しアニメーションの種類について深掘りしていきましょう。
実はEase Out1つとっても多くの種類があります。

性格の強さを表すSine・Quad・Cubic・Quart・Quint・Expo・Circ

Ease InやEase Outの中にも性格を表す種類があります。それが Sine・Quad・Cubic・Quart・Quint・Expo・Circの7つです。

Sine < Quad < Cubic < Quart < Quint < Expoの順に性格が強くなります。
またCircはExpoのみたいな強さですが、加速や減速の時間がよりゆるやかになります。

こちらはEase OutのGIFです。
同じEase Outなのにいろいろな性格があるのがわかります。

結局どれ使えばいいの??

結局、この多種の中から何を使えば良いのでしょうか。

正解はケースバイケースですが、Curves.easeOutQuartを使うこといい感じになる気がします。
単純なeaseOutは緩急が弱く、動きにメリハリがありません。
少し癖が強いCurves.easeOutQuartを使うことでメリハリをつけることができます。

とはいえ、アプリの中での一貫性や、アニメーション対象のオブジェクトの大きさ、移動距離によっても変わってきます。
大事なのは、エンジニアがアニメーションの豊富さを知り、デザイナーに提案できるようになることだと思います。

もっとアニメーションを極めたい方へ。

冒頭で紹介した本ですが、この記事をもっと濃くしたり、アニメーション以外のことも書いたりしています。
よかったら立ち読みしてください！

https://zenn.dev/imajoriri/books/2ab1be474e53c8

内容としてはスプリングアニメーションを使ったアニメーションの実装方法などを紹介しています。

Xでのアウトプットもよくしているのでよかったらフォローお願いします！
https://x.com/imasirooo