「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540｜note昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！
「Layers Act」と「表現のプラットフォーム」｜ヒルズライフ
「Layers Act」という名前は、二つの層（レイヤー）を重ね合わせることでできる模様が、操る人の手の動きにビビッドに反応して、まるで演舞のように絶え間なく変化する様から名づけました。 ほんのわずかな手の動きでも、模様は大きく変化し、さまざまな表情を見せる。 この「2枚のシンプルな模様を重ねて抽象的なアニメーションを作る」＝「Layers Act」、もともとは2018年に21_21 DESIGN SIGHTで開催された企画展「AUDIO ARCHITECTURE：音のアーキテクチャ展」に出展した映像のために開発した「映像手法」（＝映像の作り方）でした。今回は、この「Layers Act」という手法が生まれた経緯と、それを用いて現在取り組んでいること、考えていることをご紹介します。 研究テーマ：アニメーションの技術史 話は、私が独立する前、ユーフラテスという組織に所属していた2017年頃に
見逃し
きょうの健康 選 ニュース 「私たちがオーバードーズする理由」 【毎週月～木曜日 Ｅテレ 午後８：３０から放送】 「きょうもオーバードーズしてしまった」「かぜ薬を１００錠のんだ」。こうした書き込みが今、ＳＮＳにあふれてい… 2024年4月25日放送分 2024年5月2日 20:45 公開終了 あしたが変わるトリセツショー 楽ちん！「メガネ」のトリセツ 【毎週木曜日 総合 午後７：３０から放送】 ７５００万人以上がかけている「メガネ」に衝撃の事実判明！なんと「８割の人が合わないメガネをかけている」という。そ… 2024年4月25日放送分 2024年5月2日 20:15 公開終了 ゴー！ゴー！キッチン戦隊クックルン 「デリシャス探検隊！牛乳（後編）」 【毎週月～水曜日 Ｅテレ 午前７：００から放送】 クックルンが全国のおいしいものを探しに行く「デリシャス探検隊」。昨日に続いて、ヨモギが「牛乳」
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
AnimeRefiner | AI converts animation to 4K size · remastering
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
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、
404 - Page Not Found
404: Page Not Found The thing you were looking for is no longer here, or never was
Music Visualization Generator
※Macで動画の書き出しがうまくいかない場合、下記をお試しください（※2018.10.09修正）。 https://evermeet.cx/ffmpeg/ 上記サイトよりffmpegをダウンロードします（.7z/.dmgどちらでも可）。Music Visualization Generatorアプリを右クリックして、[パッケージの内容を表示]をクリックします。Contents/Resources/tool/ 以下にある"ffmpeg"というファイルを、1.でダウンロードしたファイル内にある"ffmpeg"で置き換え（上書き）します。 起動すると２つのウィンドウ（「モニター部」と「操作部」）が表示されます。 「モニター部」は名前の通り、実際に出力される結果（波形など）が表示されるウィンドウになります。 ここでは「操作部」について上から順に説明していきます。 プレビュー再生、動画の書き出し、及
「マルチデバイス時代を生き残る演出術」と題して80点を最短距離で取る方法を話してきました | 地獄の大開発者養成ブログ
DIST.15 「アニメーションで差を付ける演出とデザイン」 - connpass で登壇してきました！ ほかの登壇された方が「ガチのアニメーション・演出をしゃべる」とのことだったので、僕は実際のアニメーション術よりも、演出制作者のマインドとおもしろプレゼンに重きを置いてました。 スライドでは極端な言い回しをしてる部分があるので、テキストで補足をしていきますね。 おもしろプレゼンした動画も公開されているのでどうぞ。 では以下からスライドです。 過激な言葉を使ってますが「愚直ではなく、クレバーにやること」。それがここでの「いい加減にやる」です このセッションではマインド(アニメーションの価値と演出)と、具体的な方法論(80点をかんたんに取る)を説明します フロントエンドと言われる領域はだいたい経験してきました 代表的な仕事 Yahoo Japan! Search for 3.11 検索キーワ
NIMA - ブラウザ上で動作する2Dキャラクターアニメーションツール！
After Effects Plugin After Effects プラグイン プラグイン＆アドオン-Plugin&Addon Moiré - モアレ表現を手軽に追加できるAfter Effects用プラグイ... 2023-11-26 420 views aescripts + aepluginsにてモアレ表現を手軽に追加できるAfter Effects用プラグイン『Moiré』がリリースされました！ 000 続きを読む Blender チュートリアル チュートリアル-Tutorial Skip UV unwrapping - Vertex Painting for... 2023-11-26 572 views Jamie Dunbar氏が頂点ペイントを行う際のフローを紹介したBlenderチュートリアル動画『Skip UV unwrapping - Vertex Painting
AnimeEffects | 2D Animation Tool
AnimeEffectsは、ポリゴンメッシュの変形をベースとする2Dキーフレームアニメーション製作ツールです。 とっつきやすく、思いつきをすぐ形にでき、心変わりがあればいつでもやり直せるようなツールを理想として開発しています。 主な特徴 移動、回転、拡大縮小などの基本的な変形はもちろん、ボーン変形、自由変形(Free-form Deformation)、不透明度や画像の切り替えなど様々な要素をアニメーションさせることが可能です。 jpg、png、gifなどの基本的な画像ファイルはもちろん、Adobe PhotoshopをはじめとしてEasy Paint Tool SAIやClip Studio Paintなどでも対応されているPSDファイルを読み込む事が可能です。 レイヤーのクリッピング設定や、大部分のブレンディング設定にも対応しています。 ペイントツールでおなじみの、ペンタブレット操作や
lottieが大変よろしいものだった - アナログ金木犀
仕事でかっこいいインタラクションを実装することになって、canvasでごりごり頑張るかなぁとも思ったのだけど、少し前に話題になったlottieを使ってみることにした。 結果、レベルの高いアニメーションをすこぶる簡単に1時間もかからず実装することができた。 実際に導入してみるところまで +α を説明してみる。 lottieとは 詳細は こちら から見ることができる。知らない人に三行で説明してみると After Effectsで作ったアニメーションを jsonに変換して それをそのまま読み込ませてアプリに組み込める 以上。 Android, iOS, Native Reactに対応しているみたい。 例えば下記はAfter Effectsで Lottie のサンプルを動かしているところ。 これを、jsonに変換してそのまま lottieのライブラリを入れてjsonを読み込ませるだけで下記のように
Flashで学んでいた数学「追うのは微分が役に立つ」 - Qiita
スクリプトでアニメーションをつくると、何かしら動きの計算をするので、つまるところ数学を使うことになるわけです。高校時代はこんな計算何に使うのかと文句をいっていた式の使い途に出逢ったり、単なる四則演算だと思っていた式が、実は高度な数学と関わっていることもあります。 等速直線運動 ボールを真っ直ぐ同じ速さで動かしたいというときは、等速直線運動の動きをつくります。といっても、何のことはない、フレームごとに位置に同じ数値を足し込むだけです。これは、ただの足し算にしか見えません。 「計算」は足し算です。けれど、「考え方」は微分にもとづきます。等速直線運動の位置($x$)は、経過時間($t$)の一次式で表されます。
話題になったウェブサイト事例 【2016年夏〜秋】 - ICS MEDIA
私たちが毎日目にしているウェブサイトは、ユーザーの閲覧環境や使用する技術によって日々変化しています。今回は、2016年8〜10月に国内外のブックマークサイトで取り上げられた国内のリッチなウェブサイトを5つ取り上げ、どのような技術や表現手法が用いられているのかを解説します。 IJC MATSURI | IS JAPAN COOL? 別ウィンドウで開く ANAが運営する外国人向けのメディアサイト「IS JAPAN COOL?」で日本の祭りを紹介するスペシャルコンテンツ。サイトの背景一面に映像を表示し、迫力のある音で祭りの臨場感を表現しています。映像の他にもさまざまな演出が各所に用意されており、日本に訪れたことのない外国人でも日本の祭りを感じられます。 ▲デスクトップ版では、祭り独特の所作に似せたUIで映像（数枚のコマ画像）をパラパラアニメのように操作できます ▲360度の全方向を撮影できるカメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
邱 家和_Q KAWA_Animator on Twitter: "憧れのアクションアニメーターと偶然出会ってサーカスについていろいろ学ばせていただきました！ 一コマ打ち 全原画じゃなくて中割使う 一気に全部のミサイル描くじゃなくて毎回は一つのミサイルだけに集中 後足しで別のミサイル追加 ちゃんと… https://t.co/0w4YhTIOjE"
DOTweenで作成したモーション17個を含むプロジェクトを公開
どまそ - Portfolio Site
GitHub - smdls/C0: 2D Animation Tool for macOS.
ゲームという名の、オルタナティヴなアニメーションデイヴィッド・オライリー＆インディゲーム