もうアニメーションで迷わない。 Cocos2d-xのCCActionまとめ - WonderPlanet DEVELOPER BLOG
はじめまして、デザイン・エフェクト担当の上松です。デザイナー班からは初！投稿です。 先日、弊社のパズルゲーム・PanicFarmが大幅アップデートされGoogle Playでリリースされましたが、みなさまはプレイされましたでしょうか？ バトルモードが搭載され、スコアがフィーチャーされています。ちょっとしたアドバイスですが、勢いでたくさん消すより、心の中でリズムをとってタイミングよく消とコンボを繋ぐと高得点が狙えますよ！ 私は、1,500,000点ぐらいがベストスコアです。ぜひチャレンジしてくださいね。 さて、記事の本題にはいりましょう。今回は、普段使っているCocos2d-xのアニメーション関連のメソッドをまとめてみました！ Cocos2d-xのアニメーション機能まとめ Cocos2d-xでは、簡単なメソッドで様々なアニメーションを作成することができます。複雑なアニメーションも、組み合わせ
Easing Equations
easeInSine Math function easeInSine(x) { return 1 - Math.cos((x * Math.PI) / 2); } CSS transition: transform 0.5s cubic-bezier(0.12, 0, 0.39, 0) easeOutSine Math function easeOutSine(x) { return Math.sin((x * Math.PI) / 2); } CSS transition: transform 0.5s cubic-bezier(0.61, 1, 0.88, 1) easeInOutSine Math function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; } CSS transition: transf
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Easing Functions Cheat Sheet
Easing functions specify the rate of change of a parameter over time. Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor. This page helps you choose t
ch07.vp
Flash / Robert Penner's Programming Macromedia Flash MX / Penner/ 2356-1 / Chapter 7 Blind Folio 189 Par t III Dynamic Visuals P:\010Comp\Flash\356-1\ch07.vp Friday, October 04, 2002 4:24:37 PM Color profile: Generic CMYK printer profile Composite Default screen Flash / Robert Penner's Programming Macromedia Flash MX / Penner/ 2356-1 / Chapter 7 Blind Folio 191 Chapter 7 Motion, Tweening, and Easi
cubic-bezier ジェネレータのリンク - {u:b}
使いやすいと思った順に並べてます。 Ceaser - CSS Easing Animation Tool - Matthew Lein http://matthewlein.com/ceaser/ cubic-bezier.com http://cubic-bezier.com/ Visualize and manipulate CSS transition functions http://cssglue.com/cubic CSS cubic-bezier Builder http://www.roblaplaca.com/examples/bezierBuilder/ Cubic Bezier Timing Function http://www.netzgesta.de/dev/cubic-bezier-timing-function.html Bezier control htt
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
JSTweener - JavaScript でモーショントゥイーンするライブラリ - 2nd life (移転しました)
http://coderepos.org/share/wiki/JSTweener http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/ JS でモーショントィーンするのに、JSTween というライブラリがあるのですが、一つ一つのモーションで setTimeout(func, 0) で回しててるため増えれば増えるほど重くなったり、style 設定が結構面倒だったり、一度に複数プロパティ登録ができなかったりしたので、自分でライブラリを作ってみました。ひっつき☆スターを JSTweener で動かしたら体感で全然速くなりました。 コード例ですが、ひっつきスターでのトゥイーン処理は JSTweener.addTween(el.style, { time: tm, transitions: 'easeOu
Virgo - DHTML
ここでは Macromedia Flash のモーション設定にあるイージングを考慮した移動を数学的に分析し、実際にどのようなアルゴリズムなのかを調べていきたいと思います。 イージング移動については Class Library の Edging Mover クラスを参考にして下さい。実際にどのような動作をするのかは イージング移動サンプルが参考になると思います。 これらのページでも述べていますが、イージングとは「オブジェクトが移動するときのコマ割を決めるもの」です。直線的に移動させるとき、単に等速で移動させるのではなく、加速度を考慮したアニメーションが可能になります。JavaScript は連続的な動きは実現できず、このコマ割を変えることは非常に重要で強力なものとなります。 では、実際にイージングを考慮した直線移動について調べていきたいと思いますが、上述した通り重要なのは「コマ割」です。この
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ActionScript入門Wiki - Unity - トゥイーンライブラリiTweenを使用する
Jquery UI Bounce Easing function make bounce less and/or control number of bounces
Google Code Archive - Long-term storage for Google Code Project Hosting.
Ceaser - CSS Easing Animation Tool - Matthew Lein
IDEA * IDEA