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（ゲームオブジェ
エディンバラ大学と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)
capptivate.co is coming soon
is a totally awesome idea still being worked on. Check back later.
[iOS]画面遷移のアニメーションをカスタムする
ベトナムで開発を始めてはや４ヶ月目、田中です。 iOS7から追加されたUIViewControllerAnimatedTransitioningとUIViewControllerTransitioningDelegateの２つのプロトコルを使用して画面遷移のアニメーションをカスタムする方法を紹介します。 このようにいつものスライドして遷移するのではなく、好きなアニメーションで画面を遷移させることができます。 ViewController.m #import "ViewController.h" #import "AnimationController.h" @interface ViewController () <UIViewControllerTransitioningDelegate, UINavigationControllerDelegate> { AnimationContro
![[iOS]画面遷移のアニメーションをカスタムする](https://cdn-ak-scissors.b.st-hatena.com/image/square/64fb667c06e43fce9b74ad44d063f7e6b3657877/height=288;version=1;width=512/https%3A%2F%2Fseesaakyoto.up.seesaa.net%2Fimage%2Ftransition1.jpg)
第1回 様々なアニメーションを実現するiOSアプリ用トゥイーンライブラリ3種を比較！ | gihyo.jp
はじめに iOS SDK登場から早4年近くが経ち、使い回しの効くUIコンポーネントや、煩雑な手順を楽にするスクリプト、自作するには難易度の高い技術をライブラリ化したものなどなど、今では多くの便利なオープンソースソフトウェアが公開されています。 本連載ではそんなオープンソースソフトウェアの中で、有用かつあまり日本語での情報が少ないものを中心にご紹介していく予定です。具体的な使用方法や、ソースの内容にも踏み込んで解説していきますので、ぜひ皆様の日々の開発にお役に立ていただければ幸いです。 トゥイーンライブラリを使用するメリット UIViewのアニメーションで指定できるイージングの種類は、 UIViewAnimationOptionCurveEaseInOut UIViewAnimationOptionCurveEaseIn UIViewAnimationOptionCurveEaseOut U
UIViewで手軽にアニメーションを実行する方法 - プログラミングノート
UIViewにはアニメーション関連メソッドが用意されているので、お手軽にアニメーションを実行することができます。ボタン、ラベル、画像などは全てUIViewを継承しているので基本的に全て同じ方法で実行可能です。 まずはUIViewの初期化メソッドでUIButtonを生成してViewに追加しておきます。このボタンが押されると@selector()で指定してあるメソッドが呼ばれるので、そこでアニメーションを実行します。 - (id)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.backgroundColor = [UIColor whiteColor]; // button UIButton *btn= [UIButton buttonWithType:UIButtonTypeRounde
【WebGL特集】第6回：他のCGツールからBlenderへの移植｜株式会社モックス
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。 【前記事】 【WebGL特集】第1回：WebGLって何？ 【WebGL特集】第2回：回転する立方体 【WebGL特集】第3回：カメラをグリグリ 【WebGL特集】第4回：Blenderでモデル出力 【WebGL特集】第5回：Blenderでアニメーション出力 ちょっと番外編です。前回まででBlednerからのキャラクターアニメーションのwebGL出力が実現しました。 では、Maya,3dsMaxなどの他の3DCGソフトではどうなるのでしょうか。 2013年頃では、アニメーションの出力には対応できていませんでした。しかし2018年の現在では制限があるものの、Maya,3dsMaxなどの他の3DCGソフトからのアニメーションの出力が可能になってきています。慣れたツールで直接出力で
Bone アニメーション - webgl - three.js
ボーン(リグ)を使ったアニメーション。リグがどういうものかは、BVH Motion Playerを見てみてください。 別のアニメーション方式であるモーフターゲットに比べると、理論上はハイポリゴンでのファイルサイズは小さくなる。
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
Creating skeletal animation in Blender and exporting it to three.js. | DevMatrix
Today I’ve faced a rather difficult problem to solve. Creating model in Blender, animating it with armature and exporting the animation to three.js (r56) JSON format. I was working on for 2 days now and it was really a harsh job to be done, especially that three.js is still in alpha version and a lot of features are not stable and fully reliable. So now I’m gonna explain how to perform the mention
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
The illusion of life
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CoreAnimation CATransaction