昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！
「Layers Act」という名前は、二つの層（レイヤー）を重ね合わせることでできる模様が、操る人の手の動きにビビッドに反応して、まるで演舞のように絶え間なく変化する様から名づけました。 ほんのわずかな手の動きでも、模様は大きく変化し、さまざまな表情を見せる。 この「2枚のシンプルな模様を重ねて抽象的なアニメーションを作る」＝「Layers Act」、もともとは2018年に21_21 DESIGN SIGHTで開催された企画展「AUDIO ARCHITECTURE：音のアーキテクチャ展」に出展した映像のために開発した「映像手法」（＝映像の作り方）でした。今回は、この「Layers Act」という手法が生まれた経緯と、それを用いて現在取り組んでいること、考えていることをご紹介します。 研究テーマ：アニメーションの技術史 話は、私が独立する前、ユーフラテスという組織に所属していた2017年頃に
きょうの料理ビギナーズ ひとり分の冬野菜おかず (2)かぶのバターじょうゆステーキ 【毎週月～水曜日 Ｅテレ 午後９：２５から放送】 厚切りにしたかぶと葉をこんがり焼いて、ジューシーな「かぶのバターじょうゆステーキ」に。にんにく風味のバターじ… 2025年1月7日放送分 2025年1月14日 21:30 公開終了 ゴー!ゴー!キッチン戦隊クックルン 「ダークイーターズかくし芸大会(2)」 【毎週月～水曜日 Ｅテレ 午前７：００から放送】 ダークイーターズの「かくし芸大会」で、クヨッペンは「ピザ生地回し」を披露するつもりだったが、予期せぬ事態に…… 2025年1月7日放送分 2025年1月14日 7:10 公開終了 【ハートネットＴＶ】虹クロ スペシャルトーク ダイシュン 【毎月第１火曜日 Ｅテレ 午後８：００から放送】 日本初、男性同士の恋愛番組出演の“ダイシュン”こと中井大さんと中西瞬さ
ありがとうございます! DOFillAmout()知らなかったですし、そもそもImageTypeをFilledにすることでこんなことができるってことも知らなかったです!勉強になりました! — わけん (@waken) July 20, 2020 そんなこともあり、DOTweenのソースコードを公開するのは割と有益なのかなと感じ、今回公開するに至りました。 確かにこのサイトを含め、DOTweenの基本的な使い方を解説しているサイトは多いですが、実際に使っているソースコードをまるごと見られる機会は少ないな…と。 制作物のソースコード公開ということで、GitHubにてUnityプロジェクトまるごと公開しました。 イベント期間中に作った17種類（イベントのお題15種 + 勝手に作った2種）が含まれています。 Unityバージョンは 2019.3.6f1 、Universal Rendering P
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
Increase the resolution of anime with AI.Let’s make high-resolution Anime easily What's AnimeRefiner?AnimeRefiner is an AI that can beautifully enhance animation resolution. Any animation can be 4x higher and 4x higher resolution. You can convert it into beautiful images as if they were made in that size. SD size (640x480px) anime can be converted to FHD size or larger, HD size (1280x) 720px) anim
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするように
404: Page Not Found The thing you were looking for is no longer here, or never was
※Macで動画の書き出しがうまくいかない場合、下記をお試しください（※2018.10.09修正）。 https://evermeet.cx/ffmpeg/ 上記サイトよりffmpegをダウンロードします（.7z/.dmgどちらでも可）。Music Visualization Generatorアプリを右クリックして、[パッケージの内容を表示]をクリックします。Contents/Resources/tool/ 以下にある"ffmpeg"というファイルを、1.でダウンロードしたファイル内にある"ffmpeg"で置き換え（上書き）します。 起動すると２つのウィンドウ（「モニター部」と「操作部」）が表示されます。 「モニター部」は名前の通り、実際に出力される結果（波形など）が表示されるウィンドウになります。 ここでは「操作部」について上から順に説明していきます。 プレビュー再生、動画の書き出し、及
DIST.15 「アニメーションで差を付ける演出とデザイン」 - connpass で登壇してきました！ ほかの登壇された方が「ガチのアニメーション・演出をしゃべる」とのことだったので、僕は実際のアニメーション術よりも、演出制作者のマインドとおもしろプレゼンに重きを置いてました。 スライドでは極端な言い回しをしてる部分があるので、テキストで補足をしていきますね。 おもしろプレゼンした動画も公開されているのでどうぞ。 では以下からスライドです。 過激な言葉を使ってますが「愚直ではなく、クレバーにやること」。それがここでの「いい加減にやる」です このセッションではマインド(アニメーションの価値と演出)と、具体的な方法論(80点をかんたんに取る)を説明します フロントエンドと言われる領域はだいたい経験してきました 代表的な仕事 Yahoo Japan! Search for 3.11 検索キーワ
Blender アドオン プラグイン＆アドオン-Plugin&Addon Fluffy Maker v1.0 - ワンクリックで手軽にモフモフ表現を追加出... 2024-11-01 数多くのアドオンを単発的に開発＆販売しているBlender Proceduralから、ワンクリックで手軽にモフモフ化出来るBlenderアドオン「Fluffy Maker v1.0」がリリースされました！ 続きを読む 業界-Industry Announced .SPZ - 高速読み込み＆低消費メモリ！3D Gaussi... 2024-10-31 ここ最近主流にになりつつある3D Gaussian Splatting（3DGS）を扱う形式として新たなオープンソースフォーマット「.SPZ」が発表されました！ 続きを読む
AnimeEffectsは、ポリゴンメッシュの変形をベースとする2Dキーフレームアニメーション製作ツールです。 とっつきやすく、思いつきをすぐ形にでき、心変わりがあればいつでもやり直せるようなツールを理想として開発しています。 主な特徴 移動、回転、拡大縮小などの基本的な変形はもちろん、ボーン変形、自由変形(Free-form Deformation)、不透明度や画像の切り替えなど様々な要素をアニメーションさせることが可能です。 jpg、png、gifなどの基本的な画像ファイルはもちろん、Adobe PhotoshopをはじめとしてEasy Paint Tool SAIやClip Studio Paintなどでも対応されているPSDファイルを読み込む事が可能です。 レイヤーのクリッピング設定や、大部分のブレンディング設定にも対応しています。 ペイントツールでおなじみの、ペンタブレット操作や
仕事でかっこいいインタラクションを実装することになって、canvasでごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。 結果、レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた。 実際に導入してみるところまで +α を説明してみる。 lottieとは 詳細は こちら から見ることができる。知らない人に三行で説明してみると After Effectsで作ったアニメーションを jsonに変換して それをそのまま読み込ませてアプリに組み込める 以上。 Android, iOS, Native Reactに対応しているみたい。 例えば下記はAfter Effectsで Lottie のサンプルを動かしているところ。 これを、jsonに変換してそのまま lottieのライブラリを入れてjsonを読み込ませるだけで下記のように
スクリプトでアニメーションをつくると、何かしら動きの計算をするので、つまるところ数学を使うことになるわけです。高校時代はこんな計算何に使うのかと文句をいっていた式の使い途に出逢ったり、単なる四則演算だと思っていた式が、実は高度な数学と関わっていることもあります。 等速直線運動 ボールを真っ直ぐ同じ速さで動かしたいというときは、等速直線運動の動きをつくります。といっても、何のことはない、フレームごとに位置に同じ数値を足し込むだけです。これは、ただの足し算にしか見えません。 「計算」は足し算です。けれど、「考え方」は微分にもとづきます。等速直線運動の位置($x$)は、経過時間($t$)の一次式で表されます。
私たちが毎日目にしているウェブサイトは、ユーザーの閲覧環境や使用する技術によって日々変化しています。今回は、2016年8〜10月に国内外のブックマークサイトで取り上げられた国内のリッチなウェブサイトを5つ取り上げ、どのような技術や表現手法が用いられているのかを解説します。 IJC MATSURI | IS JAPAN COOL? 別ウィンドウで開く ANAが運営する外国人向けのメディアサイト「IS JAPAN COOL?」で日本の祭りを紹介するスペシャルコンテンツ。サイトの背景一面に映像を表示し、迫力のある音で祭りの臨場感を表現しています。映像の他にもさまざまな演出が各所に用意されており、日本に訪れたことのない外国人でも日本の祭りを感じられます。 ▲デスクトップ版では、祭り独特の所作に似せたUIで映像（数枚のコマ画像）をパラパラアニメのように操作できます ▲360度の全方向を撮影できるカメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
