タグ

easingに関するmt-KAMIのブックマーク (5)

  • イージング関数チートシート

    イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

    イージング関数チートシート
  • Documentation | anime.js

    ✕ Anime.js V4 is now in early access for GitHub Sponsors! Try Anime.js V4

    Documentation | anime.js
  • ユーザ・インターフェースのためのイージングカーブをつくる | POSTD

    フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか? イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで

    ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
  • jQuery Easing - jQuery 日本語リファレンス

    Easing/jQuery easingとは、エフェクトの動きを加速/減速させるための関数です。 例えばフェードアウトの動きを考えたとき、通常は透明度の変化量は経過時間に対して線形です。全体で1秒かかって消える処理であれば、0.5秒経過時の透明度は0.5になります。 しかし、ここでeaseInQuadの動きを適用すると、変化量は線形ではなく2次関数の曲線になります。(下記サンプル参照) そのため、最初はゆっくりと薄くなっていき、後半に急激に消えていくような効果が得られます。 特別なことをしなくても使うことの出来るeasingは"linear"と"swing"の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1.3時点で32パターンが提供されています。 これ以外にもeasingは比較的容易に自作するこ

  • うむるむ -[ AS3 ] TweenMax でカスタムイージングしちゃうんです-

    うむるむ はユーザー様にとって中途半端に役に立ち、また、ほとんど身の無い話題、情報を提供することがまれにあります。 TweenMax もイージングいじれるんですの続編。前回は Back と Elastic のカスタム方法だけだったけど、今回は完全カスタムイージング。 Saqooshaさんが書いた Fuse のCustom Easing Tool をTweener で使う方法を TweenMax でも真似てみようという試みであり企み。Tweener ではほとんどコピペで 済んだとあったけど TweenMax でもほとんどコピペでOK。Tweener とは変数の名前が違うくらい。 方法は以下に。 まずはCustom Easing Tool のダウンロード。 MosesSupposesのサイトにある、Download Fuse 2.1.4 からもろもろまとまった zip がダウンロードでき

  • 1