UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
UnityのTimelineをいくらか理解する - フレームシンセシス
（2021年1月8日）PlayableGraph VisualizerをPackage Managerでインストール （2020年6月27日）リンクをいくらか修正 Timelineは、マルチトラックでアニメーションクリップや音声などを再生できるUnityの新機能です。ゲームのカットシーンや、映像シーケンスを作るのに用いるのですが、謎めいたところが多いです。しばらく雰囲気で使っていたのですが、気持ち悪い感じが抜けなかったので、もう少し全体像を把握できないものかと思って調べてみました。 普通にTimelineを使うサンプル まず、Timelineの標準的なサンプルとしては以下の2つがあります。アセットが多く凝っているのですが、Timeline１本に、ほとんどがActivation Track（ゲームオブジェクトの有効・無効を切り替えるトラック）と、Animation Track（ゲームオブジェ
ウマイハナシ
COLLADAは最近出てきた3Dフォーマットの一つで、有名メーカが協賛している点は 数あるフォーマットの中でも変り種なのですが、野村XXの愛するLightWaveは蚊帳の外です。 というかNewtekの掲示板の書き込みを見ると、なんかどーでもいいよそんなのって雰囲気が漂ってました。 それはともかく、無いものは作ってしまえというわけでPluginを作り始めました。 あまりにもニッチな気がするので、国内に見切りをつけて(?)海外の皆さん向けにこっちのページで公開します。 興味をもたれた方は覗いてやってください。 技術的にどーというもんでもないので、黙々とコードを書き連ねるのみです。 ちょっと困ったバグがあるので修正記事をお待ち下さい(04/12/27) 今回はOBBTreeによる衝突判定をXファイルで使ってみることにします。 といっても、もはや前回でコアの部分は出来てしまっているので、さくっと
エディンバラ大学とAdobe、ニューラルネットワークを用いて、より現実的に滑かな動きを実現する四足歩行キャラクタのリアルタイム制御技術を発表
エディンバラ大学とAdobe、ニューラルネットワークを用いて、より現実的に滑かな動きを実現する四足歩行キャラクタのリアルタイム制御技術を発表 2018-05-28 スコットランドのエディンバラ大学、Adobe Researchの研究者らは、ニューラルネットワークを用いて動作データから四足歩行キャラクタにおける自然なアニメーションを生成する新たな手法を発表しました。 論文：Mode-Adaptive Neural Networks for Quadruped Motion Control 著者：HE ZHANG, SEBASTIAN STARKE, TAKU KOMURA, JUN SAITO GitHub：sebastianstarke/AI4Animation: Character Animation in Unity3D using Deep Learning and Biologic
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量) - feb19
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)date2016.12.1(Thu.)tagsflashactionscript この記事は FLASHer Advent Calendar 2016 1日目の記事です。 FLASHer とはAdobe Flash (現 Adobe Animate) を使用している / 使用していたデザイナー、エンジニアの総称です。Flasher はそのまま訳すと「露出狂」という意味があります。 2016 年現在、前者 GEEK 民族の浄化が行われたので、インターネットで検索をかけると本来の意味での露出狂の画像が見ることができます。会社で検索をかけるのは気をつけて下さい。(なお、本当に露出していた伝説の FLASHer がいます。気になる方は Flasher 露出 で検索) なぜ FLASHer である GEEK 民族浄化が起きた
【Unity】アニメーションと物理演算を連動させる - テラシュールブログ
試したら出来てしまったので、一応メモします。 物理演算とアニメーション Animationに物理演算の力を追加 実際にやってみる Physics2Dでは少し手法が異なる 関連 物理演算とアニメーション Unityを初めて作った人がよくやる事が、物理演算ベースで作成したキャラクターをアニメーションで動く床に載せるというステージ構成です。 これは一見上手く動きそうに見えますが、実際にはうまく動作しません。これは、Animationによるオブジェクトの移動とPhysicsによる移動が異なる事が問題です。 物理演算でオブジェクトを動かす場合、オブジェクトは数学の時間に学んだような演算でもって動きます。また、数学の時間に学んだような演算で、他の物理オブジェクトに対して影響を与えます。 アニメーションで動くオブジェクトは、基本的にキーフレームが指定する位置に「テレポート」しています。その過程での加速度
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
『AWA Meaningful Animations』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。 AWAでプロダクトマネージャー兼インタラクティブアニメーターをやっている冨樫(@kokiiiviii)です。 今回はAWAのインタラクションについて書いていこうと思います。 AWAインタラクションの軸 いきなりですが、実はこのテーマは以前個人ブログで綴ったことがあります。 →AWAインタラクションの主軸は『ギャップレス』 はい、そうなんです。 AWAのインタラクションを創るうえで一つのテーマとして置いていたのは ギャップレス です。 個人ブログの内容とかぶりますが、ざっくりまとめます。 ◆ 現実世界の動きとアニメーションの間にギャップを
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
iOS Tips #7 画像から動画を作成する | アドカレ2013 : SP #15 ｜ DevelopersIO
かんたんですが、複数枚の画像から動画を作成するロジックを紹介します。以外と紹介されていないので、探されていた方はどうぞ！ この処理に必要なのは、以下の３つのクラスです。 AVAssetWriter AVAssetWriterInput AVAssetWriterInputPixelBufferAdaptor これらのクラスはAVFoundation.frameworkで定義されています。なので、AVFoundation.frameworkをプロジェクトにリンクしておきましょう。 サンプル それでは早速サンプルを紹介します。画像は以下の５つを使用します。 画像をプロジェクトに追加したら、ViewController.mを以下のように変更してください。 #import "ViewController.h" #import <AVFoundation/AVFoundation.h> @inter
Origami - Design prototyping with Quartz Composer
Most designers today create static mockups to communicate app ideas. But increasingly apps are anything but static, which means as designers we need a better tool for interaction design. Origami is a free toolkit for Quartz Composer—created by the Facebook Design team—that makes interactive design prototyping easy and doesn’t require programming. Quartz Composer is a freely-available Mac OS X appl
Mecanim Humanoid について | Unity Japan Official Blog
本投稿はMecanim Humanoidの背後にある技術について説明する。動作の仕組み、長所と短所、どうして今のような選択がおこなわれたのか、さらにベストの状態を得るためのいくつかのヒントについてお話しよう。Mecanimに関する一般的な設定と手順については、Mecanim Animation Systemを参照してほしい。 Humanoidリグとマッスルスペース Mecanim Humanoidリグおよびマッスルスペースは、人型のボディやアニメーションを表現するために使われる、標準的なスケルトンノード階層とジオメトリ変形を実現する代替ソリューションだ。 Humanoidリグとは、スケルトンノード階層のトップにおけるデスクリプションであり、人型ボーンのセットを定義すると同時に、各々のボーンに対応するマッスルリファレンスを作成する。マッスルリファレンスとは、本質的には各軸ごとに一定の範囲と符
番外編・ Unity の機能を使ってユニティちゃんに命を吹き込む -1- | ギャップロ
前回までの本編は、Mecanimを使ったユニティちゃんの制御を行いました。 今回はMecanimから離れて、物理エンジンを使った揺れ物の制御を行っていきましょう。 なお今回も前回までのUnityプロジェクトを引き続き使用します。 頭のリボンを物理演算で揺らす -リジッドボディ、ジョイント- ユニティちゃんの頭に付いているリボン。今のままでは走っても止まってもビクともしません、とても固そうです。これに物理エンジンでそれらしい動きをつけましょう。 物理エンジンを用いてこれを表現するには、リジッドボディ と ジョイント を用います。 それぞれ、「剛体としての性質」、「他のオブジェクトとの連結」を設定するものです。 オブジェクト階層構造を変更する 物理演算を使うときは下準備として、まずオブジェクトの階層構造を物理演算に適したものに変えなければいけません。 物理的に干渉してほしいオブジェクト同士は、
［CEDEC 2013］なぜPixarのCG制作手法はゲームグラフィックスと違うのか？ 「OpenSubdiv」セッションレポート（前編） - 4Gamer.net
［CEDEC 2013］なぜPixarのCG制作手法はゲームグラフィックスと違うのか？ 「OpenSubdiv」セッションレポート（前編） ライター：西川善司 手島孝人氏（Pixar Animation Studio，Studio Tools Department，Software Engineer） 1年ほど前の「SIGGRAPH 2012」で，Pixarが発表したオープンソースプロジェクト「OpenSubdiv」を，日本語で解説するセッション「OpenSubdiv: オープンソースの RenderMan 完全互換 GPU対応サブディビジョンサーフェスライブラリ」が，「CEDEC 2013」2日めに開かれた。 セッションを担当したのは，「グランツーリスモ」シリーズのポリフォニーデジタルから，2年ほど前にPixar Animation Studio（以下，Pixar）に移籍したという経歴を
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Hamburger icon animation
The illusion of life
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
アミューズメント系のエフェクトの参考用。手描き風エフェクトの動画を14個集めてみたよ | CGトラッキング 世界のCGニュースを集めてみる
