Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easingYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
『インタラクションを支える技術』
こんにちは。 AWAでAndroidエンジニアをしている新家（ニイノミ）です。 最近インタラクションって言葉、よく聞きますよね。 インタラクションの役割や意味合い等はここでは割愛しますが、「インタラクションをつくる」といった場合、コードを書くエンジニアとしては「動きをつくる」という意味合いが大きいかと思います。 この「動き」について、今まではゲームやFlashを用いたスペシャルサイトなど、世界観の構築やブランディングが必要なサービスで用いられることは多かったものの、SNSなどのスマホのコミュニティ系サービスで取り入れられることはあまり多くありませんでした。 しかし、ユーザーの操作感や体験を重視するようになってきた昨今、コミュニティ系サービスの開発においても「動きをつくる」要件は増えてきました。 実際、僕が開発に携わっているAWAもユーザー体験を重視しており、その一つとしてインタラクションに
イージング関数を使いたい@C++ - Qiita
あるかと思ったら意外とネットに情報がなかったのでまとめ。 イージング関数(Easing Function)は、様々な値の変化の仕方をする関数たちです。 各関数と詳しい形状はこのあたりとかググるとかで見てください。 さて、このEasing Function、元々はアニメーションの動きの指定に使われたりしているらしく、 JavaScriptライブラリjQueryのeasingプラグインなどで実装されています。 これを見るとC/C++,C#でもイージング関数を使えそうだったので参考にしつつ書いてみました。 (ほぼ、なのはElasticだけめんどくさそうだったのでまだやってないだけです)。 jQueryとの対応はf→t、a→min、h→max - min、g→totaltimeです。 エフェクト作ったりするときに役に立つかも？ ちなみにt==0でminの値、t==1でmaxの値になります。 //イ
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
[iOS] Core AnimationのCAMediaTimingFunctionでRobert Pennerのイージングを近似 « きんくまデザイン
こんにちは。きんくまです。 Core AnimationのCABasicAnimationのイージングはAppleが用意したデフォルトの値がいくつかあります。 kCAMediaTimingFunctionLinearとかkCAMediaTimingFunctionEaseInとか。 それでその5つで指定するのも良いんですが、この間リファレンスを見ていたところ、 オリジナルのベジェカーブでもOKだということを見つけました。 – initWithControlPoints::::のところ。 >> CAMediaTimingFunction Class Reference そうかそうかと。以前にもCSS3のTransitionのライブラリを作ったときにすでにベジェをトレースして4点とったものがあったので、こいつを使えば簡単そうということでやってみました。 ソースコードとサンプルコードはgithu
[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ
CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
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
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
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Tim Groleau's Easing Function Generator
download source To use the generator, drag the handle points at the bottom of the movie (in orange) or enter their position manualy in the fields provided (warning: dragging may be slow). Then just copy the function for pasting and use it as you normally do (tween engine, etc.). Although each handle point modifies the curve, their are numbered to show which portion of the curve they influence the
カスタムイージングを作成できるAIRアプリ「Easing Generator」 | ClockMaker Blog
FlashのActionScriptトゥイーンエンジンに利用できるカスタムイージング（加減速）編集アプリを作りました。ActionScriptでトゥイーンを作成するとテンプレートと言える「イージング関数」は数種類しかないので似たような動きになりがちです。それを解決すべく作った、動かし方を自由に編集できるツールということです。ActionScript 3.0で主要なトゥイーンエンジン各種に対応しています。 インストール方法と主な使い方は以下から。 このアプリが役立つ場面 ［上：Flash Professionalのような感覚で加減速を調整できる］ このアプリは主に次のような場面で役に立つと思います。 標準搭載のイージングに自分の求めている動きがなかった 始点と終点で別々のイージングを適用したい 他の人と同じイージングを使うのが嫌だ 簡単な動きであれば標準のイージングでことが足りるのですが、F
jQueryっぽく書けるTweenライブラリ「eaze-tween」をさくっと試してみた (Unknown Quality)
This domain may be for sale!
Progression4でBetweenAS3を使おう | _level0 - KAYAC Front Engineer Blog
最近は久々にAS2であれこれしてるうちにProg4のAS2版みたいのができちゃいました。Prog3ならCellfusionさんのがあるって途中で気づいてたんですが後に引けない感じで…。需要があればそのうちご紹介します。 DoBetweenAS3コマンド さて、BetweenAS3にoverwriteが実装されより実戦向きになってきたと聞いたのでそろそろTweenerから乗り換えてみようと思い、Progression4用にカスタムコマンドをつくりました。 ※2010/2/19時点でwonderflにはoverwrite版は反映されていません コンセプト 考え方としては、DoTweenerライクに使えるというか、インターフェイスを合わせることを重視してます。※(追記)transitionにIEasingインスタンスを指定する必要があります。一緒なのはパラメーター名だけ。 これによりBetwee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stylie
Google Code Archive - Long-term storage for Google Code Project Hosting.
GitHub - gskinner/TweenJS: A simple but powerful tweening / animation library for Javascript. NOTE: The PreloadJS repo has moved to the URL below. Read the REPO_MOVED.txt file for instructions on updating your remote URL.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Code Archive - Long-term storage for Google Code Project Hosting.