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

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
Tween.jsや、以前づやさんが紹介していたTweenMaxと比べるとだいぶ軽量ですね。 もちろん他のライブラリと比べるとできることに限りはありますが、それでも表現豊かなアニメーションを簡単につけることができます。実際に私もこんなデモを作ってみました。 See the Pen anime.js Sample – demo by Yusuke Omi (@Im0-3) on CodePen. 使い方はかなりシンプルなので、覚えれば簡単にアニメーション出来ますよ!ライブラリのサポートブラウザは以下の通りです。 Chrome Safari Opera Firefox IE 10+ IEは10以上の対応です。ではさっそく、使い方を見てみましょう。 anima.jsを実際に触ってみよう! まずはとりあえず動かしてみましょう。ボールが上に移動するアニメーションもたったこれだけで書くことができます!
Warning: I recommend you up to 200 x 200 Changes will not affect the sample image, only the final product.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く