[B! アニメーション] sh19910711のブックマーク

sh19910711 id:sh19910711

アニメーションに関するsh19910711のブックマーク (8)

Live2Dモデルはとにかく腰を動かせ！｜納内れお
Live2Dユーザーのみなさん、﹁全身可動モデル﹂作ってますか？ Live2Dで人物を動かすのに慣れてくると、だんだんと全身を動かしたり可動範囲を広くしたくなってきますよね。この記事ではそんなLive2D中級者さんのための﹁より人間っぽい動き﹂を作るためのコツのひとつをお伝えします。ちなみに今回はフェイストラッキングで操作するタイプのLive2Dモデルを題材としてお話していきますが、大部分はLive2D特有の知識ではなく立ちポーズの人物にモーションを付ける際に常に共通する考え方となっています。高可動モデルにありがちな問題点さて、ここにサンプルとしてある問題を抱えた高可動モデルを用意しました。いったいどんな問題なのか考えてみてください。ん？高可動って言う割に﹁角度Z﹂しか動いてない？・・・今はそんな話をしているのではありません！！えーっと、人によって言い方は変わってくると思うの
sh19910711 2024/04/21
"動きを真似してみると確実に転倒するはず + 重心が支持基底面の真上に乗っていることが転ばないための条件 + 重心をコントロールしよう / 日常の動作こそが、Live2Dモデルを自然に動かすための極意" 2021

*design

*software

アニメーション
リンク
本当に気持ちの良い動きとは？アニメーションにおける大切な基礎｜SONICJAM
こんにちは。SONICJAMデザイナー森田です。みなさま、いかがお過ごしでしょうか。本日は"動き"について、アニメーションの基礎をお話ししていこうと思います。昨年、オープンソースライブラリ﹃Bodymovin﹄の登場でWebアニメーション表現の自由度が増したこともあり、AfterEffectsに手をつけ始めたデザイナーの方も多いはず。実際に弊社でも、Bodymovinを使った案件事例が増えてきています。アニメーションは、デザイナーであっても避けては通れない領域になりつつあります。しかし、なんとなくAfterEffectsの操作を覚えても、なかなか自然な動きをつけることが難しいと感じる人も多いのではないでしょうか？そこで今回は﹃脱！カクカクアニメーション﹄自然な動きをつけることにおいての重要な基礎をご紹介します。 MENU Step1.ものが動くときには、必ず伸縮運動が起きる！
sh19910711 2024/03/02
"アニメーションは逆算: どのように帰結させるのか、動きによって世界がどのように変わったかを考えるのはとても重要 / 優れたアニメーターは動きの止め方やブレーキのかけ方がとても上手い" 2018

*design

アニメーション

*software

AfterEffects
リンク
UIデザイナーが演出の勉強を始める時の流れ
近年スマホアプリのデザイナーに求められるハードルが徐々に上がりはじめています。スマホアプリのリッチ化によってゲーム内のアニメーションもリッチに動き始めて、それが普通になってきました。しかし、デザイナーがUIアニメーションをつけるという状態はまだまだ希少な状態です。デザイナーがUIアニメーションのスキルをつけるのはハードルが高く、UnityやAEでアニメーションを覚えたとしても、業務で任せてもらえるかわからない状態だと、中々習熟度が上がらないかと思います。なので、多くの人は急に業務でUIアニメーションをお願いされて強制的にスキルをつけていき、スパルタで育てられた一部の人の領域だと思っています(最近は企業の教育でアニメーションを勉強しようという流れもあります) UIデザイナー自体が希少とはいえ、周りがUIアニメーションできて当たり前、という状態になってから動くよりも、今動いたほうがお得
sh19910711 2022/07/10
"正解はないのですが、最適な演出はある / 様々な知識をつけておくことが重要で、資料集めをしていき、目を肥やしておくのが大切 / 映画、MV、CMなど、様々なものを見ておき、あ、これいいかもと思ったものは常に保存"

*design

UI

アニメーション

学習
リンク
演出を作る時の心がけ
意識していること飽きさせないこれ！動きは見ていて工夫させないと飽きます。主に、同じような場面、動き、スピードが続くと退屈に感じてしまうので、少しでもその感情をなくすために様々なところに変化をつけ、見ていて飽きないようにしていきます。飽きさせないために何をするかですが、緩急、粗密、ジャンプ率、明暗に変化を加え、印象を変えて飽きさせないようにします。緩急でメリハリ
sh19910711 2021/05/22
"緩急でメリハリ・疎密の変化・ジャンプ率を強調・明暗の変化・変化量を多くする / インパクト時に明暗を反転させる事を行うと、より破裂した時の強調ができる"

*design

UI

アニメーション
リンク
Spineを使って２Dキャラクターを３Dのように動かす | Nagisaのすゝめ
初めまして。グラフィックデザイナーのにしやまです！今日はSpineというアニメーションツールを使って、2Dキャラクターを3Dっぽく動かす工程とポイントを簡単にご紹介します。 Spineとは Spineとは2Dアニメーションを作成するためのツールです。ボーンを入れて動かしたり、画像を複雑に変形できたりするので、比較的少ない枚数のイラストから高度なアニメーションを制作することができます。公式サイト : Spine: ゲーム用 2D アニメーションソフトウェア【１】絵を準備するまずは何といっても動かす元の絵が必要ですね。この段階で、そのキャラクターがどのような動きになるのかほぼ決まってしまうのでしっかり考えてアイデアを絞り出します。そして今回出来上がったのがこちら。（Photoshopで描いています）魔法が苦手すぎて科学も駆使しちゃう魔女っ娘です。相棒の猫型ハコロボットと花
sh19910711 2017/11/18
*software

cg

Spine

アニメーション
リンク
ChromeがAPNG (Animated PNG) に対応したので作ってみた | SONICMOOV LAB
Chromeのバージョン59でAPNG (Animated PNG)が対応されたみたいなので、早速作ってみたいと思います。目次 APNG (Animated PNG)とは？ APNGのデモ APNGのブラウザ対応状況 APNGの作り方 Adobe Animate CCでアニメーションを作成 PNGシーケンスに書き出し﹁アニメ画像に変換する君﹂のダウンロード APNGへの書き出し設定JSライブラリ﹁apng-canvas﹂で非対応ブラウザでも再生 APNG (Animated PNG)とは？アニメーションをするPNGファイルで、The Animated Porta bleNetwork Graphicsの略です。アニメーションGIFのPNG版といったところですが、アニメーションGIFが256色しか扱えなのに対して、APNGは24bitのフルカラーでアルファチャンネルを扱えます。また
sh19910711 2017/06/28
*webdev

browser

アニメーション

PNG
リンク
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。スプライトシートを使う方法ベクターアニメーションを使う方法スプライトシートビルダーを使う方法おまけ‥GIFアニメーションを使う方法おまけ‥Flashアニメーションを使う方法スプライトシートを使うスプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。表現の再現性が高いう
sh19910711 2013/05/16
*program

javascript

frontend

アニメーション
リンク
GitHub - sole/tween.js: Javascript tweening engine
You 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
sh19910711 2013/03/10
*program

javascript

git*

tween.js

アニメーション
リンク
1