タグ

Tweenに関するHamken100perのブックマーク (3)

  • あえてズレを入れるのがミソ! ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA

    アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって

    あえてズレを入れるのがミソ! ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
    Hamken100per
    Hamken100per 2018/01/27
    Tweenなど、アニメーションをちょっと工夫すると、動きがぐっと良くなるTips。
  • イージング関数チートシート

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

    イージング関数チートシート
    Hamken100per
    Hamken100per 2016/03/25
    Easeを視覚的に確認できるサイト。凄く便利。
  • easing_demo

    Hamken100per
    Hamken100per 2016/01/24
    TweenのEaseのアルゴリズムを勉強できるサイト。Easeタイプを視覚的に確認できるサイトへのリンクや、Easeの実装も様々な言語に対応したコードを取得できる。
  • 1