https://twitter.com/t_takasaka/status/1570716749565231104
「『ガンダム』は男性主体のコンテンツだ」という認識を持つ人もいまだ多いでしょう。しかし、ファーストガンダムの放送当時を振り返ると、熱心に応援していたのはむしろ女性ファンでした。 「ガンプラ」という名前を知らない人は、まずいないでしょう。言わずと知れた『機動戦士ガンダム（以下ガンダム）』に登場するロボット「モビルスーツ（以下MS）」のプラモデルである「ガンプラ」は、日本のみならず、世界中で人気のアイテムです。 最近では、プラモデル作りを愛好する女性も多くなりましたが、それでも「プラモデルと言えば男性の趣味、当然、ガンプラを愛好している主力も男性で、MSでの戦いが繰り広げられる『ガンダム』は男性主体の人気コンテンツだ」そうした認識を持つ人はいまだ多いでしょう。 では、実際はどうだったのでしょう。1979年に放送が開始された『ガンダム』を熱心に応援した最初のファンは、むしろ女性でした。 彼女たち
iOSDC 2022「アニメーションAPIのすべて」補足など - 24/7 twenty-four seven
先日のiOSDC 2022にて「アニメーションAPIのすべて」という発表をしました。 fortee.jp きっかけはDroidKaigi 2021で荒木佑一さんの「動かす」という発表です。 www.youtube.com Androidのさまざまなアニメーション APIについてコードや具体的な例を用いて解説する内容です。最後にスライド自体がAndroidアプリとして作られていて、サンプルのアニメーションはすべて実際に動いていたものだった、と明かされるところが非常におもしろいと思ったのです。ぜひこれのiOS版をやろうとそのとき考えたのでした。 ちなみに、荒木さんはそれ以前のDroidKaigiや別のカンファレンスでも「動かす」シリーズで話されているので資料などを探して読んでみるとどれもおもしろいです。 ということで１年間あたためていたアイデアが無事採択されたことはよかったのですが、さすがにこ
アニメーションで魅せるポートフォリオサイトの制作過程を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
思いのほか反響があり、三大Webアワードのawwwards CSS Design Awards FWA を受賞することができました。とても嬉しかったです。 この記事では制作を振り返りつつ、技術周りのことや、動きのあるWebサイトを作る意味を書いていきたいと思います。 ポートフォリオサイト制作過程 自分らしいデザインを目指し、デザイナーさんをアサイン ポートフォリオサイトを作ろうと思ってから、デザインを自分でやるかずっと迷っていたのですが、元LIGのデザイナーさんにポートフォリオサイトの話をしたらバイブスが合って作ってくれることになりました。 このデザイナーさんとはLIG在籍時代に一緒によく案件をやっていて、以前自己研鑽で制作していたデザイン案がとても好みだったのでそのテイストにして欲しい、パーティクルを使って欲しい、アワードを取れるクオリティにして欲しいと伝えました。 今振り返るとすごくふ
Motionityはブラウザで動作するモーショングラフィックエディターWebアプリです。特にユーザー登録等も不要で誰でも無料で利用可能です。 複数レイヤーを使って任意のオブジェクトを時間経過に合わせて動くよう設定し、モーショングラフィックとしてダウンロードできる、というもの。 一般的なシェイプや画像、テキストの他、動画や音源の追加や、勿論ローカルファイルのアップロードもできるようになっています。ただ、動画追加はちょっと重くて動きませんでした。 肝心のモーションは各レイヤーの▶ボタンをクリックすると設定項目が表示されるので設定する感じです。個人的にちょっとUIがとっつきにくかったですが、他の方は問題ないかも。 WebベースなのでDLしなくていいですし、クロスプラットフォームで動作してくれるのは良いですね。データのインポート/エクスポートやLottieのアップロードも可能です。 Motioni
VSCheatsheet | Shortcuts in the shortest time possible | Shortcut Illustrations
VSCheatsheet provides a list of instructive illustrations with the most frequently used. Find your favorite shortcut and increase your profanity.
この記事では、「もっと早く知りたかった」と思ってしまう、便利な最新オンラインツールをまとめてご紹介します。 AIをフル活用した次世代ツールから、これまでの作業が嘘のように捗る便利なものまで、今後のワークフローを変えてくれそうなツールを中心に揃えています。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザイン・配色ツール 3. モックアップ・アイコンツール 4. 面白・クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール 3D Perspective Glitch Hover Effect グリッチアニメーション中にピクセル化された画像を表示する、ユニークでたのしいホバーエフェクト。 Bike Demo Three.js マウススクロールに合
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート｜RAKSUL DESIGN
【freee / ICS / Ubie / RAKSUL】 デザインシステム構築の様々なアプローチ 「Design System Build #01」勉強会レポート 近年、国内外の様々な企業のプロダクト開発に導入されている「デザインシステム」。「デザインシステム」を導入することで、デザイナーやエンジニアの開発生産性や効率性を高めたり、ユーザー体験の一貫性を提供できたりと、様々なメリットがある一方で、事業内容や成長フェーズ、組織構造などによってデザインシステムの目指すべきカタチは異なり、正解や完成がないことから、悩みを抱えている企業や開発者は少なくありません。 そこでラクスル株式会社（以下、RAKSUL）は、デザインシステムのコミュニティ「Design System Build」を立ち上げ、2022年8月23日に“デザインシステム構築の様々なアプローチ”をテーマに勉強会を開催しました。 この
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き こんな方法があったのか、思わず納得なCSSテクニックをご紹介 この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。 新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。 普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。 コンテンツ目次 1. ついにCSSコンテナクエリ利用可能に 2. グリッドに名前をつけてレイアウトを視覚化する方法 3. 長いテキストを短く省略する方法 4. transformプロパティが独立してより使いやすく 5. くるりと回転するアニメーション文字の作り方 6. :hasプロパティでAppleのO
１.はじめに 文から画像生成をするモデルを使って、出力画像をズームやシフト等をさせ、それを初期値にして文で画像生成することを繰り返すと面白い動画が出来ます。今回ご紹介するのは deforum氏が開発した Stable Diffusion を使った動画生成をするGoogle Colabです。 2.学習済みパラメータのダウンロード まず学習済みパラメータをダウンロードします。Hugging Faceからアクセストークンの取得をしてない方は、このブログの「２．アクセストークンの取得」を参考に取得してから下記に進んで下さい。 このリンクをクリックし、学習済みパラメータ（stable-diffusion-v-1-4-original）の使用申請をします。I have read the Licence and agree with its terms のチェックボックスにチェックを入れ、Access
自分がつかってる、Google Colab用StableDiffusion環境を公開しました。 海外のWEB UIのが重いのと、やりたいことが微妙に違うので自分なりに作った。公式のDiffuserを使わないので軽いです。無課金のcolabでも動くのではないかと思います。 使い方GitHubページの「Open in Colab」ボタンをおして、colabで開く。 このページ上部のメニューで、「ランタイム > ランタイムのタイプを変更」からGPUを有効化を確認 HuggingFaceでアカウントを作成 StableDiffusionのモデルページで、「利用規約」に合意する。 モデルファイル sd-v1-4.ckpt をダウンロード モデルファイルを Google Drive等にアップロード 下のセル 「1-1. Google Driveとの接続」を実行 下のセル 「1-2. のフォーム」に、G
8月30日(米国時間)にリリースされた「Google Chrome 105」ではセキュリティの拡張やコンテナクエリ/:has()の対応など大きなアップデートが盛り込まれていますが、そのひとつ前のバージョンである「Chrome 104」(8/3リリース)では、CSSに関連した大きなアップデートが話題になりました。GoogleのChromeデベロッパリレーションエンジニアのブラームス・ヴァン・ダム(Bramus Van Damme)氏はリリースの当日、CSSアップデートについてこうツイートしています。 このツイートでいわれている「個別のCSSプロバティを変換(individual CSS properties to do transforms)」できるメリットは何なのでしょうか。CSSエキスパートの鹿野壮さんにデモを交えながら教えていただきました。 今回話を伺ったエキスパート フォローしよう！
アニメーション。 それはWEBサイトには欠かせない演出です。 最近のWEBサイトはアニメーションがかなり複雑になってきている印象です。 ただ、アニメーションって結構難しいですよね。 簡単なアニメーションならcssでちょちょっと書けばできますが、いくつものアニメーションが連動しているものになってくると難易度があがります。 とはいえ、そんな複雑なアニメーションでも、GSAPを使えばわりと簡単にできちゃいます。 この記事で実装する完成デモこの記事で実装するアニメーションの完成デモページは以下になります。 デモページを見る 結構複雑そうですよね。 でも、GSAPを使えば簡単に実装できます！ GSAPとは?GSAPとはアニメーションを実装するために特化したライブラリです。 公式サイト GSAPには2つのライセンスがあります。 1つは「Standard License」。 もう1つが「Business
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
2022年9月3日 7時0分 リンクをコピーする by ライブドアニュース編集部 ざっくり言うと 8月26日に放送された映画「」についてリアルライブが報じた 自転車の二人乗りのシーンに「コンプラ的にアウト」などのツッコミも また、図書館のシーンには個人情報に関するツッコミが出ているようだ この夏、スタジオ作品が『金曜ロードショー』(日本テレビ系)で相次いでテレビ放映されているが、その中で8月26日放送の『』に、現在のコンプラ的観点からツッコミが生じている。 これまで、作品には『となりのトトロ』で、父親と小学生の娘が一緒にお風呂に入るシーンが「欧米ではアウト」といったツッコミが入っていたが、名作と名高い1995年公開の『』にも、同様の流れが生じてしまった。 一つが自転車の二人乗りのシーンである。主人公の月島雫を乗せて天沢聖司が坂道を駆け上がるシーンは、作品のハイライトの一つである。
画像生成AI「Stable Diffusion」を利用した、GIFアニメーションを自動生成してくれるモデル「stable-diffusion-animation」がGitHubに公開されました。 andreasjansson/stable-diffusion-animation – Run with an API on Replicate https://replicate.com/andreasjansson/stable-diffusion-animation GitHubの該当ページにアクセスすると以下のような画面が出現します。すでにサンプルが動いていますが、自身で編集を加えることが可能。なお、編集にはGitHubへのログインが必要です。 最初にどのような絵を生み出し、どのような絵に変化させていけばいいのかを、開始プロンプトと終了プロンプトとして記入し、定義します。 次に生成するGI
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「クリエイティブ系のウェブサイト制作で役立つCSS技法（池田 泰延） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 みなさんこんにちは、私のほうでは「クリエイティブ系のWebサイト制作で役立つCSS技法」ということで発表していきます。 簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。 今日はWebの演出技法にフォーカスして紹介していきたいと思います。 Color Pallet Visualizer ―マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす まずデモを用意してきた
andreasjansson/stable-diffusion-animation – Run with an API on Replicate
Run time and cost This model runs on Nvidia A100 (40GB) GPU hardware. Predictions typically complete within 3 minutes. The predict time for this model varies significantly based on the inputs. Stable Diffusion Animation Animate Stable Diffusion by interpolating between two prompts Code: https://github.com/andreasjansson/cog-stable-diffusion/tree/animate How does it work? Starting with noise, we th
GSAPのScrollTrigerを使ってクラスの付け外し👏 公開日 : 2022.08.31 最終更新日 : 2023.08.28 コーディング こんにちは、AndHAコーディング部です。 指定場所までスクロールしたタイミングで、クラスを付け外しすることでアニメーションを再生する表現はどのサイトを見ても当たり前に使っているところが多いと思います。 今回はGSAPのScrollTrigerを使った雛形をコピペで利用できるコードを簡単に紹介します！ gsapのバージョンは3.10.4を利用しています。 gsap – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers 完成コード.classNameは判定させたい要素に指定するクラス名、.classActive
止まらない血、中学3年生の余命宣告…『涼宮ハルヒ』『ひだまりスケッチ』『コードギアス』声優・後藤邑子と“人気絶頂で姿を消した背景” | 文春オンライン
◆◆◆ 最初のきっかけは「中学3年生の夏、止まらなかった鼻血」 ――「全身性エリテマトーデス」とはどのような病気でしょうか？ 後藤邑子さん（以下、後藤） 自己免疫疾患のひとつです。本来、免疫というのは外から入ってきたウイルスなどの外敵と戦うものですが、それが自分の体の細胞を攻撃してしまう病気です。 血液だったり、臓器だったり、あるいは皮膚だったりと、どこを攻撃するのかわからないので、「全身性」といいます。原因は、まだハッキリとは突き止められていないようです。 ――病気が発覚したのはいつでしたか？ 後藤 2012年に倒れて入院し、そのときに検査してわかりました。 もともと私は別の自己免疫疾患、特発性血小板減少性紫斑病（血小板に対する「自己抗体」がつくられることで、血小板が破壊され、出血の危険が高まる病気。国が指定する難病の対象）というのを長く患っていたので、その症状がひどくなったのかと思って
JavaScriptライブラリの「GSAPジーサップ」（ジーサップ）はウェブサイトのモーションの制作に役立ちます。前回の記事では、GSAPの基本的な使い方を解説しました。後半となる本記事では、中上級者向けに以下の内容を説明します。 本記事で学べること タイムライン機能 スクロールトリガープラグイン モーションパスプラグイン quickSettter ユーティリティー関数 タイムライン タイムラインはGSAPで高度な演出をつくるうえで必ず利用する重要な機能です。 複雑なモーションを時系列で作成できるので、多くのトゥイーンを作成したり、管理するのに便利です。 ▼公式サイトのチュートリアル動画。たった5行のコードで出現アニメーションを構築。 使い方として、gsap.timeline()で作成したインスタンスに対して、add()メソッドでタイムラインにgsap.to()のトゥイーンを追加します。
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
永遠にスクロールしていたくなる、気持ちいいエフェクト -Intersection Observer Scrolling Effects
Intersection Observerとカスタムプロパティを使用して、グリッドやリストのスクロールビューにアニメーションを適用するテクニックを紹介します。 アニメーションはスクロールに連動して動作し、GridやListなどよく見かけるUIだけでなく、水平スクロールやジッパー・回転などもあります。 どのスクロールエフェクトも軽快な動作で、ちょー気持ちいいです！ Intersection Observer Scrolling Effects ✨ Intersection Observerやカスタムプロパティについて詳しくは、下記をご覧ください。 Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法 CSSの変数（カスタム
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
超お手軽！JavaScriptで打ち上げ花火を作って楽しめる「fireworks-js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで本格的な打ち上げ花火を作って楽しめるライブラリをご紹介します！ わずか数行のコードで簡単に花火を描画できるお手軽さと、細かいオプションを設定すれば高度にカスタマイズもできるのが特徴です。 誰でも簡単に扱えるように設計されているので、花火を見れなかった人、もっとゆっくり鑑賞したかった人なども含めて、ぜひオリジナルの打ち上げ花火を作って遊んでみてください。 【 fireworks-js 】 ■「fireworks-js」の使い方 それでは、「fireworks-js」をどのように使えばいいのか詳しく見ていきましょう！ まずはライブラリをインストールするのですが、一般的には npm や yarn を使ってコマンドラインから導入することになります。 ただし、今回はフロントエンドのJavaScriptだけで作ろうと思います。
擲弾兵＠４回目接種済 @tekidanhei 高畑勲については興行的には「宮崎駿の稼いだ金を全てㇲってしまうダメ亭主」だけど、彼自身は宮崎氏よりも新技術・手法の導入に熱心でその結果赤字額が膨らんでしまうのだが、しかし高畑勲作品で底上げされたジブリの制作力は次の宮崎作品にちゃんと反映されるから一概にダメ亭主扱いはできないんだよ 2022-05-23 11:18:39
Users today demand interfaces that are consistent, recognizable, and simple to use. But how can a designer give their UI a more human touch? Motion, by simulating “live” communication between the user and the interface, fills in this gap. Explore these 12 UI/UX animation principles now to give your interfaces a life full of fun. ⚡️ 1. EASINGEasing refers to the way in which a motion tween proceeds
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
「ウェブデザインが浮かばないから、なにか新しいアイデアが欲しい」 「今後の案件で利用できる、最新Webデザイン事情を知りたい」 「ウェブサイト、なにから作ればいいかわからない」 そんなときに目を通したい、国内外の最新おすすめWebデザイン37選をご紹介します。 他のウェブサイトを見ることで、デザインのアイデアやインスピレーションにもつながります。 「こんな感じのデザイン、考えています」といった具合で、実際のページを開きながらの打ち合わせにもオススメ。 レイアウトや配色、フォント選びだけでなく、コンセプトをうまく伝えるウェブデザインを意識した制作に活かしてみましょう。 ウェブデザインの潮流をよむ、最新おすすめサイトまとめ Kubota Future Cube スタートボタンを押した途端に、キューブの中には未来の姿がひろがります。コンテンツの切り替えにもキューブをうまく活用した、没入感たっぷり
今回は、cssのみで（コピペで）実装できるローディングアニメーションをまとめた記事になっています。 ローディングはかつてはgifアニメで作られることが多かったですが、現在は複雑なことができるcss3によって実装されるケースがほとんどです。 jsより学習コストも低く、ブラウザに負荷もかけないので良いことづくめと言えます。 ただ、普段から感じていたことですが、ローディングのようなちょっと特殊なcssを書くことって本職のコーダーでもあまりありませんよね？ 案件によって作ったり作らなかったり、それも案件ごとに基本1つしか作らないと思うので慣れていない人が多くても当然だと思います。 そんなwebデザイナー、コーダー、フロントエンドエンジニアの皆さまを対象に、コピペで実装できるローディングアニメーションをまとめました。 doneローディングアニメーション実装するメリットは大きい ローディングを実装する
AndroidアプリをMaterial Designのガイドラインに準拠させるための取り組み - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部ZOZOTOWNアプリ部Android2ブロックの鈴木（@s1u2z1u3ki）です。 本投稿ではZOZOTOWN Androidアプリを、Material Designに準拠したUI/UX1とするために取り組んでいる内容を紹介します。 目次 はじめに 目次 Material Designとは？ Material Design勉強会について 勉強会の流れ 存在した課題 課題解決へのアプローチ 提案会の実施 提案会の流れ 1. 提案会の準備 2. セクションの復習 3. 提案内容の議論 実装会の実施 「結局やらない」をなくすため モブプロ形式でリリースまでのスピードを上げるため 実装会の流れ 1. タスクの共有 2. タスクを進める 3. 進捗記入 4. 進捗共有 取り組みの結果 リリースした提案 1. ログイン画面のテキストフィールドのフォーカスを強調する
Jetpack Composeを使った複雑なアニメーション事例 - Mirrativ Tech Blog
ミラティブのAndroidエンジニアのmorizoooです。 MirrativのAndroidアプリでは、新規で作る画面には積極的にJetpack Composeを活用しています。 tech.mirrativ.stream Mirrativは、多くのユーザーがゲームや雑談などの配信をしており、配信を盛り上げるための演出として通常のアニメーションに加えてLottieも織り交ぜ、リッチなアニメーションを実装しています。 Jetpack Compose導入以前は、AnimationListenerのCallbackを入れ子にする形で複雑なアニメーションを実現していたのですが、いざJetpack Composeで実装しようとなるとどう実装するのが良いのか苦心しました。 今回の記事では、実際にアプリで使っているアニメーションを例に、Jetpack Composeで作ったアニメーションを紹介します。
UI Buttons
© 2022-present Eluda. This website uses Google Analytics to collect usage data and deliver a better experience.
アニメーション制作現場にて、Blenderの導入が着実に増えつつある。そうしたなか、『電脳コイル』（2007）で高名な磯 光雄監督の新作『地球外少年少女』では、3D背景やメカなどの3DCG表現だ...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ガンダム」ブームの立役者は女性だった？ 低視聴率だった初回放送を熱心に観ていたワケ | マグミクス
「サイバーパンク エッジランナーズ」プロデューサーインタビュー ゲームの中で"聖地巡礼"したくなる、ゲーム世界を見事に換骨奪胎したアニメーション
ブラウザで動作するモーショングラフィックエディターWebアプリ・「Motionity」
もっと早く知りたかった！便利な最新Web、オンラインツール30選
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き
Stable Diffusionによる動画生成をGoogle Colabでやってみる
Colabで動かすStableDiffusion実装｜深津 貴之 (fladdict)
ついに全ブラウザで利用可能に！CSS transformが進化した件を鹿野壮さんに聞いてみた
GSAPを使って複雑なオープニングアニメーションを作ってみよう | 東京のホームページ制作 / WEB制作会社 BRISK
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
自転車二人乗りに個人情報流出『耳をすませば』にコンプラツッコミ殺到？ - ライブドアニュース
ブラウザから今すぐ試せるStable Diffusionを用いた自動GIF生成モデルが登場
クリエイティブ系のウェブサイト制作で役立つCSS技法 ～TechFeed Conference 2022講演より | gihyo.jp
GSAPのScrollTrigerを使ってクラスの付け外し👏 | AndHA Blog
GSAP入門（後編） - タイムライン制御やスクロール演出などの魅力的なJSライブラリ - ICS MEDIA
文化庁メディア芸術祭、終了へ 今年度の作品募集せず「役割終えた」：朝日新聞デジタル
2DイラストにMayaを使う奥の手が効く！「聖剣伝説EoM」におけるキャラクターアニメーションの制作手法【CEDEC2022】 奥の手だけに“手”がすごい！ フルメタルハガーなどのアニメーション制作例も
https://actorcore.reallusion.com/auto-rig
GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
transitionをかけたホバーアクションのopacityがちらつく問題を解消する | AndHA Blog
祥太 on Twitter: "サザエさんOPの最後で音程が半音の1/3狂う件を調査しようとしたら、そもそもレコード自体が最初から全体的に半音の1/3狂ってることが判明した。 もはや正しいのは現在は使用されてない初代TVサイズ音源だけ。 https://t.co/b1kg7lEhj3"
高畑勲については興行的には「宮崎駿の稼いだ金を全てㇲってしまうダメ亭主」だけど
12 principles of UI/UX animation you should know
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
コンセプトをうまく伝える最新Webデザインみほん帖37選
CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック
既成概念を打破する“Blender”作画という挑戦。磯光雄監督作『地球外少年少女』メイキング｜Wacom Cintiq × Blender