もっと詳しくなりたいEasing - Adobe XDのAuto AnimationとCSS Transition

この記事は、Adobe XD Advent Calendar 2018の2日目です。

Adobe XDは2018年を通して進化を続け、1年前まではまったく想像もしなかったほど使い勝手がよくなりました。
さて、その中ですこし物議を醸していそうな気がしなくもないような機能が10月のアップデートでやってきました。自動アニメーションです。
Adobe XD 10月アップデートリリース! 音声プロトタイプ、プラグイン対応などをAdobe MAXで発表 #AdobeMAX #AdobeXD

さて、アニメーションの実装は、デザイナーとエンジニア感でのエアポケットになりがちな部分です。そのため、この記事ではCSSアニメーションの入門としての内容を書いています。

Adobe XDにおけるアニメーションのEasing

Trigerがタップな状態で、ActionをAuto-Animate(自動アニメーション)に設定すると以下のようなオプションが選べるようになります。

  • Destination(移動先)
  • Easing(イージング)
  • Duration

Destinationについては、遷移先のことで遷移先アートボードのレイヤー情報と遷移元のアートボードのレイヤー情報をベースに自動アニメーションします。
残る2つの、EasingとDurationによってアニメーションの動きが変わります。

Durationはアニメーション開始から終了までの時間のことで、0.2秒〜1.0秒の値を0.2秒刻みで選択できます。
Adobe XDのEasingが取りうる値は以下のようなものです。

  • None
  • Ease Out
  • Ease In
  • Ease In-Out
  • Snap
  • Wind Up
  • Bounce

動画で見るEasing毎の違い

言葉では説明が難しいものですので、すべての動きを動画であげました。
行きは1秒、帰りは0.6秒で実行させています。

ここまでAdobe XDのEasingオプションでどのような動きになるかを見てきたので、次からはCSSのお話をします。

CSS Transitionを利用したアニメーション

CSS Transitionというもので、プロパティの変更を一定時間をかけて単純な動きのアニメーションを実装することができます。

1
transition: property duration timing-function delay;

という形で記載します。
このショートハンドの形を分解すると、下のように4つになります。もちろん、挙動上の違いはありません。

1
2
3
4
transition-property
transition-delay
transition-timing-function
transition-duration

transition-propertyは何をトランジションさせるかの選択をして、transition-durationはトリガーとなったアクションからどれだけ遅らせるかを記述します。

MDN web docs | transition

CSSでのトランジションの時間設定は transition-duration

transition-durationについては、Adobe XD上のDurationと同じで何秒かけてTransitionするかです。
ミリ秒単位ならmsを、秒単位ならsをつければよいです。

1
2
3
4
5
transition-duration: 200ms;
transition-duration: 400ms;
transition-duration: 600ms;
transition-duration: 800ms;
transition-duration: 1s;

以上の5つの選択肢がAdobe XD上で選択しうるものに対応しています。もちろん、CSS側ではこの選択肢に限ることなく、実質的に無限の選択が可能です。たとえば、 86400s と指定すれば一日をかけてのアニメーションができるわけです。(そんなことを書く人はいないでしょうが)

MDN web docs | transition-duration

Transition Timing Functionとはなにか

1
2
3
4
5
6
7
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: ease;
transition-timing-function: step-start;
transition-timing-function: step-end;

MDN web docs | transition-timing-function

Transition Timing Functionをわかるためのサンプルデモ

See the Pen XdEasing by Naruhito Kubota (@naru0504) on CodePen.

ふわっと今回のポイントになるところを書いておきます。

transition-property に指定しているのは margin-left: 24px から margin-left: 320px にしています。

1
2
3
4
5
6
7
.circle {
margin-left: 24px;

&.is-animated {
margin-left: 320px;
}
}

※ PostCSSでネストさせる書き方をしています。

Adobe XDとCSS Transitionの対応表

これらの値を先に説明したXDの取りうる値と対応させると以下の通りです。

XD CSS
None linear
Ease In ease-in
Ease Out ease-out
Ease In-Out ease-in-out
- ease
- step-start
- step-end
Snap -
Wind Up -
Bounce -

※ Adobe XD上での正確な動きが数値ベースで把握できていないため、あくまでも名前の対応上で細かくは違う動きである可能性もあります。

CSSでもっと細かくイージングを設定するには

1
transition-timing-function: cubic-bezier(n,n,n,n);

という値を設定することで、トランジションをカーブで設定できます。
こちらを使うことで、SnapやWind Upの動きっぽいことが書けます。
詳細には踏み込みませんが、cubic-bezier.comが便利なので、参考にどうぞ。

Adobe XDで設定されたアニメーションをコード化するのかんたん?

さて、見てきた限りではすくなくとも、transition-timing-functionで定義されているease-in-outなどは非常にかんたんに実装できそうですね。

でも、この記事で埋め込んだコードは解説用に用意したものなので実は転用しようとするとすこし問題があります。
margin-leftを絶対値であるpxで指定していることです。

今回は親要素にiPhone8サイズdivを用意し、どんなウインドウサイズでも375pxの中で動くという状態にしましたが、親要素が可変であると対応しきれません。
相対値である%で指定すればよい、といったお話でもありません。オブジェクトである丸のサイズが絶対値であることの影響を受けてしまいますので、右側の余白が必ずしも一定にはなりません。

アニメーションを付けること自体はかんたんですが、クロスプラットフォームのブラウザ間における振る舞いの把握が大変なのです。
そのため、あるアートボードサイズのみならず複数のサイズでどうアニメーションされるのかを考えておきましょう。

もっとたいへんな要因はあるのですが、今回は入門っぽい位置付けなのでこれ以上は深く書きません。

もっと複雑な表現が必要なら

より複雑な表現をするなら、 CSSで済ませずにJavaScriptを使うことになります。
有名なライブラリでは、TweenMaxがありますし、XDで制作したオブジェクトをSVGとして書き出せば、svg.jsでの操作もできます。
また、svgでも線のみを扱う場合、Vivus.jsはとてもカンタンに使えて便利です。

iOSアプリではアニメーションどうなの?

1
animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:

っていういわゆるスプリングが、Bounceっぽい動きをするはず。(よく知らない)

参考記事載せておくので、気が向いたらgifだけでも見てください。
A look at UIView Animation Curves (Part 1)

アプリでの利用を高めようとすると、どちらかというとTriggerの選択肢がすくないことがキツいですかね。
私はWebの人で、アプリの世界もPWAで攻めていきたいのでそこまでクリティカルには感じていませんが、iOS専門という人にはまだ物足りないんでしょう。(Principle比較)

もっと詳細にAdobe XDのアニメーションを使い倒したい!

今回は非常にカンタンな例を見てきましたが、もっと使いこなして使い倒したい!という方もいるでしょう。
そんな人には必見な投稿は12/21に予定されています。zen19880407 さんが『プロトタイプのアニメーションを使い倒す』というタイトルで書いてくれます。
それまでもとても役に立つ記事がたくさん出るので、ぜひアドベントカレンダーのチェックをおすすめします。

共有 コメント