画像

背景

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. イージング覚書
2021/04/27CSS

イージング覚書

最近、実家の両親が犬飼いたい欲が爆発したのか、自宅の庭を改造してドッグランを作り、
飼い犬のLINEスタンプまで制作するという脅威の犬狂いっぷりを見せている、コーダーの濱尾です。

先日、動きをつけるアニメーションの作成を頼まれたのですが、
アイコンが画面上を、弧線を描くような動きを繰り返すという動きで、どうやって作ったものか、
と悩んだのでやり方を調べていたら以下のツールに行き当たりました。

https://jeremyckahn.github.io/stylie/

本題はこのツールの使い方じゃないので、この記事では触れません。

で、滑らかな曲線移動を表現したかったんですが、イージングの種類って
easeIn、easeOutくらいしか知らなかったので、この他にも色々な種類があって、
どれがどれやら混乱したので備忘録的に自分でまとめてみる形です。
さすがに数が多いので(30種類以上ある)これ使えそうだなーと気になった思ったものだけ掲載していきます。

一応、イージングの種類を調べるだけなら下記のようなサイトで確認することができます。
https://easings.net/ja

とはいえ、関数の曲線だけ眺めても動きがイメージできないのでgifで実際に、
さきほどのツールを使用して作ってみましょう。
あと、主にy方向に対してイージングをかけて実験してみます。

liner

イージングの前に、一番基本的な直線移動。

 

easeIn

Inっていうと左の開始側に緩急がついていそうに思えるけど実は終わりの方に
緩急がついている。自分も結構間違える。このgifの場合の強さはQuad。

※イージングの強さは語尾の単語で決まる。Sine Quad Cubic Quart Quint Expoの6種類。
Sineが一番弱く、Expoが一番強くなっています。

 

easeOut

Out(開始側に緩急)。

easeInOut

InとOutの両方に緩急がついている。

easeInback

上記3つと違うのは、一旦戻るような動きがついている。

bounce

ボールが跳ねるような動き。(上下逆だけど)

elastic

バネとかゴムっぽい動き。

だいたいこんなところでした。
今回はy方向にしか動きをつけてないのですが、xにもつけるとさらに複雑な動きが再現できます。
ただし、ツールを使って書き出したスタイルはかなりの文字量になるので、CSSがかなり重くなる懸念があります。
そこは、Compressedしたりなど軽量化して対策する必要がありそうです。

この記事を書いた人:hamao

映画とゲームをつまみ食いしながら生きている、駆け出しWEBコーダーです。 1年ほどカナダで過ごしたあと、ビデオ屋店員、部品設計者を経てWEB業界にどんぶらことやってきました。

LINEで送る
Pocket

人気記事ランキング

株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-211-9898 / FAX.052-211-9899

お問い合わせ