『映画 すみっコぐらし』～こうやって作ってるんです～ Autodesk Animation Day セッションレポート（1）
『映画 すみっコぐらし ツギハギ工場のふしぎなコ』 サンエックスが展開する人気キャラクター「すみっコぐらし」を劇場アニメ化した『映画 すみっコぐらし』シリーズ第3弾。 監督：作田ハズム 原作：サンエックス 脚本：角田貴志（ヨーロッパ企画） 美術監督：日野香諸里 アニメーション制作：ファンワークス 配給：アスミック・エース ©2023 日本すみっコぐらし協会映画部 sumikkogurashi-movie.com 登壇者 プリプロダクション キャラクターらしさの追求 まず最初に、開発の初期段階からIKIF+がどのように関わってきたのかが紹介された。IKIF+は劇場映画1作目から本シリーズの制作に携わっており、2018年にファンワークスからすみっコぐらしの「3D化を前提とした」映像制作の相談があったという。すみっコぐらしのキャラクターたちは、商品化される際のデザインが細やかに決め込まれており、
CSS Gridのアニメーションが全モダンブラウザ対応! 手軽に楽しめる表現豊かなナビゲーション
Chrome 107およびEdge 107にて、CSS Gridで行や列のアニメーションが可能になりました。SafariおよびFirefoxは対応済みなので、全ブラウザで使えることになります。 本記事では、CSS Gridのアニメーションについてデモを交えながら解説します。 目的のレイアウト 次のようなレイアウトを作りながら解説します。 左側のナビゲーションと右側の写真表示エリアからなる2カラムのコンテンツです。 左側ナビゲーション内のボタンをクリックすると、次のことが起こります。 左側がアニメーションしつつ広がる 右側エリアがアニメーションしつつ狭まる 使用するHTML / CSS / JavaScript HTMLは次のようになっています。 ▼ HTML <heder> <button class="menu-button">メニューボタン</button> </heder> <div
React Spring
With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler. Why Springs?We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’t have a defined curve or a set duration. As A
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
How can I transition height: 0; to height: auto; using CSS?
I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition, If I do it from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height. How else could I do this without using JavaScript? #child0 { heigh
【CSS3】@keyframes と animation 関連のまとめ - Qiita
はじめに animation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。 簡単にアニメーションの設定ができるので、覚えると楽しいです。 そもそもアニメーションって？ アニメーションの意味をググると動画と書かれていますが、動画というよりは、動きまたは変化という意味で捉える方が理解しやすいかと思います。 この記事でも、アニメーションという単語を用いて説明しますが、動きまたは変化という意味で読んでください。 最初は @keyframes について見ていきましょう。 説明するときに英語の読み方も記載していますが、参考程度に見てください。 keyframes について @keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定できるCSSの文法です。 @keyframes は、@規則のため、@から始まり、波括弧内
Reactのアニメーションを攻略する - Qiita
仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の高さが欲しい 適材適所でライブラリを使うのは嫌なので、できるだけシンプルかつ柔軟にしたい。 Redux、MobXは使いたくない Redux作者もローカルのstateでいいみたいなこと言ってるし、 わざわざ依存するライブラリを増やしたくない。 CSSアニメーションは使いたくない CSSだとDOM依
プレビューで簡単！CSSアニメーションがブラウザ上で作れる「animista」
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。 ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。 詳しくは以下 拡大や縮小、スウィングなどの18種類ものアニメーションの雛形から、オプションで数値を変更してアニメーションを細かにカスタマイズすることができます。オプションではアニメーションのスピードだけでなく、ディレイや回転回数など、細かな場所まで弄ることが可能。面倒だった細かな調整作業を、ブラウザ上でプレビューを見ながらできるので、効率的に仕事をこなすことができます。スムーズなアニメーション実装で
redux-saga で DOMからアニメーションを分離した話 - Qiita
DOMアニメーションをredux-sagaに乗せる React + Redux でアニメーションといえば CSSアニメーションをマルチクラスでトリガーするものが殆どかと思いますが、要件によってはそれだけでは十分ではない場合があります。jQuery.animateでやっていた様に、インラインスタイルをゴリゴリ書き換えるものを React + Redux でも実現したいです。 しかし、多くのアニメーションライブラリはDOM参照する実装都合上、ref参照が必要になりStatelessを諦めなければいけなくなります。また、Presentational層にアニメーション終了などの action を発行する様なロジックを記述しなければいけません。 そこで、 Redux の副作用を扱う redux-saga を用いて実装したいと思います。動かすDOMは Store.state を参照するアプローチ。アニ
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
React + Redux- Animation - - DeNA Design
デザイン戦略室フロントエンドエンジニアの吉井です。 昨今の React 実装は、StatelessFunctionalComponent(SFC)を用いて Flux や Redux に状態管理を委譲するデザインパターンが定着していますね。アプリケーションの UX に欠かせないアニメーションですが「SPA とは相性が悪い」という噂を聞いたことがあります。従来の html アニメーションといえば jQuery.animate によるものが定番ですが、jQuery.animate は以下の理由で React と相性が悪いです。 jQuery を使用しないことがほとんどで、ほかライブラリに頼る必要がある。 DOM 参照(ref 参照)のために SFC を諦めないといけない。 Animation 実行中に component を unmount すると参照エラーになる。 Animation の状態を
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
【CSS3】Transition（変化）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から変化するまでの時間などを指定できる、transition （トランジション）プロパティが追加されました。 ボタンにマウスカーソルを乗せたときに、色や大きさなどが変わる時間を設定するときに使われるプロパティです。 transitionプロパティについて transition（トランジション）は、直訳すると変化や移り変わりという意味です。 変化するまでの時間を設定するプロパティです。 transitionは、ショートハンドプロパティを含め5つのプロパティがあります。 ショートハンドプロパティのtransitionで一括て指定することも出来るし、それぞれのプロパティで個別に指定することもできます。 No プロパティ名 読み方 説明
【CSS3】Transform（変形）関連のまとめ - Qiita
はじめに この記事は、HTMLとCSSの基礎知識がある方向けの内容です。 CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。 transformプロパティを使うことで、要素に対して移動、回転、伸縮、傾斜の変形を加えることができます。 ボタンにマウスカーソルを乗せたときに、移動したり、大きさを変えたりするのに使われるプロパティです。 jQueryやJavaScriptを使って似たようなことができますが、CSSを使う方がヌルヌル動きます。 transform（変形）には、2D（ XY 方向）と 3D（ XYZ 方向）があり、3D 表示するには複数のプロパティを指定する必要があります。 解説の都合上、プロパティは順番に説明しているため、記事の途中で 3D 表示を試しても意図した 3D 表示がされません。 検証する場合は、一読して全てのプロパティ
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
2015年11月時点。マテリアルデザインのアニメーション情報のまとめ。サンプル集付き。 - webhack / 猫とウェブ技術が好き
2015-11-09 2015年11月時点。マテリアルデザインのアニメーション情報のまとめ。サンプル集付き。 ウェブデザイン レスポンシブデザイン マテリアルデザイン Photo credit: Gattou - Lucie Provencherいま流行中のマテリアルデザインの肝は？と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。マテリアルデザインで使われるアニメーションについてのパターンや情報がまとまっているページが見当たらなかったのでこの記事にずらーっとまとめて行きます。 Dribbbleでマテリアル＋アニメーションで検索 Dribbbleで検索すると良質なサンプルがたくさん見つかります。dribbble.com dribbble.com dribbble.com dribbble.com drib
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
けんさくとえんじんのABC Days - Yahoo! JAPAN
Cards Swipe Animation
Redirecting to Animate.css