アニメーション on akky@サイボウズラボ・ブログ

キャラクターがログインフォームをチラチラ見てる

Wed, 25 Jan 2023 00:00:00 +0000

画面上の目がマウスカーソルを追いかけるというと、X Window System の Xeyes の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら

What a cute login form 🥰 pic.twitter.com/Qc1csk0I52
— Victor (@vponamariov) January 24, 2023

メールアドレスを入力するタイプに応じて雪男風のキャラクターの視線が動きますが、面白いのはパスワードを入力する時のキャラクターの動作。

パスワード入力時のマナーとして確立した挙動ですね。

twitter のリプライからは、この手のキャラクターがいつ登場したかの情報が集まっています。

小物に自分のデータを印刷して購入できるサービスSticker Mule のログイン画面

Sticker Mule のログイン画面

VPNサービス TunnelBear のログイン画面

昔 dribble でも見た、という反応は多かったのですが、Dribbble.com のことであれば、今のログインフォームにはキャラクターは居ないようです。

2019年の Flutter と Flare のデモで、スマートフォン上で同様のフォームを作るコードもありました。

GJJ2019/Flutter-Teddy-SignIn: A Flutter Project For Real Sign In Page Based on Flare Teddy animation

Floor796 - あらゆるmemeをアニメーションにして一つの拡大し続けるフロアに配置したアート

Wed, 16 Nov 2022 00:00:00 +0000

Floor796は、人工衛星の796階ワンフロアに映画やバンド、漫画・アニメ・ゲームなど色々なミームが混在するという設定で描かれた巨大なアニメーションアート・ウェブサイトです。

斜め上から見下ろしたクウォータービューで書かれたイラストは、スクロールすると次の部屋が表示されていきます。今の時点でもそうとう広いものですが、今も随時新しい部屋が拡張され続けていて、もっと大きなものを目指しているそう。

人やロボットなどはクリックできることが多く、作品名やキャラクター名が表示され、そのmemeを表すYouTube動画を開けるようにもなっています。

多数のキャラクターが描き込まれていて、中には海外でも知られている日本の漫画のキャラも見つかります。ざっと流して見つけたのは「北斗の拳」「ソニック」「食戟のソーマ」「FAIRY TAIL」「ダーリン・イン・ザ・フランキス」「スーパーマリオ」「リング」など。もっといろいろありそう。

もちろん海外発のキャラクターはアメリカのものを中心にもっと多く登場しています。向こうの人は知っているけど日本ではそれほど、といった作品を知るきっかけにもできそうです。

作品は専用エディタを用意してその上で製作しているそう。メイキングがいくつか動画としてあげられていますが、とんでもなく時間が掛かる作業だとわかります。

[Changes]メニューでは新memeが追加された日時を遡って確認できます。「ベルセルク」や「ヒロアカ」もいるのか。

via Hacker News

hexyzland - 数式で六角形の図形表示を動かす遊び場サイト

Wed, 29 Jun 2022 00:00:00 +0000

hexyzland は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。

Hexyzland トップページ

6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。

あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。

作成した図形は URL が生成されるので SNS 等で共有することもできますし、動いているところを動画として保存することもできます。

http://localhost:8099/wp-content/uploads/2022/06/hexyzland.webm

GitHub にサイトのソースコードも公開されています。

tixyland という正方形ベースの同様の遊び場があり、hexyzland はそれにインスパイアされたものだそうです。

tixy.land トップページ

A collection of colorful examples from https://t.co/664X7G2TH2:

// sin cos sin cos sin cos
// by @inky
(t,i,x,y)=>
((x^y)%2?sin:cos)(t)https://t.co/fp20uLGg2Z pic.twitter.com/ymY0kg6hCl
— Martin Kleppe (@aemkei) November 11, 2020

via reddit/programming

Tokyo Gifathon - 一か月の東京滞在で見た名物をまとめたアニメーション

Thu, 06 Jul 2017 00:00:00 +0000

ジェームズ・カランさん(James Curran)が今年の4月に東京で過ごした際に、毎日インスピレーションを受け取った東京の観光地やローカル文化を元に作成したアニメーションだそうです。

猫カフェ

カプセルホテル

外国人旅行者が東京旅行でどんなものを見て回ったり、どんなところに驚いたリしているか、というのをたった2分の動画で追体験できた気がします。楽しい滞在だったことでしょうね。

東京版に先行して、同じシリーズのニューヨークバージョンや

ロスアンゼルスバージョンも公開されています。

via Vimeo’s Staff Picks

公共交通機関の威力

Wed, 20 Nov 2013 00:00:00 +0000

よくできたアニメーションgifですね。自家用車とトラムの効率の違いが一枚で実感できます。

とは言っても、車の便利さもなかなか捨てがたいのですが。

via hamock myson via Tumblr

最後のコスモファイタ一メタマンガツ

Tue, 11 Jun 2013 00:00:00 +0000

Metaman, the last cosmo fighter は、フランスの宇宙刑事ファンが作ったらしい、どこか懐かしい感じのヒーローアニメです。

地球は、テロを起こし星を制圧しようとする「トライアングル団」を名乗る悪の組織に侵攻されようとしていた。最初の破壊活動のターゲットを狙った時、トライアングル団はまだ、最後の宇宙戦士にして人類の守護者メタマン・ガツに気づいていなかった… [ ](http://vimeo.com/62615977>Vimeo

http://vimeo.com/62615977

YouTubeでも公開されています。

制作はYoann Durand。

via UFunk

ストリートファイターIIをテーマにしたファン作成の3Dアニメーション彫刻

Wed, 29 May 2013 00:00:00 +0000

Street Fighter Motion Sculpture は、Cinema 4DとVrayという3DCG制作ツールの使い方を取得する目的でDant Headmanさんが制作した、ビデオゲームストリートファイターをテーマにしたアニメーション動画です。

サマーソルトキック

ゲームをやったことがある人なら、色や動きだけでわかるのですが、キャラクターはたいへん抽象化されています。

動きの残像がずっと残り続けていることと相まって、あまり見たことがない効果を生んでいます。

コメント欄では、これはぜひ3Dプリンターで印刷して飾るべきだ、という意見も。たしかに面白いかもしれません。

via Street Fighter Motion Sculptures – Virtual sculptures | Ufunk.net

Androidの起動アニメーションを使ったプロポーズが報告される

Fri, 13 Jul 2012 00:00:00 +0000

Androidスマートフォンの起動時のアニメーションは、ある程度知識があれば自作のものやネットに流れている他のアニメーションに変更することができます。( 改造扱いで保証が無くなることも多いですが ) 英語のニュース掲示板サービス大手のredditのAndroid板で、「Galaxy Nexusのブート時のアニメーションでプロポーズしたいんだけど、表示時間が短すぎるからもっと延ばしたいんだよね…」という相談をしていた男性が、掲示板のみんなの多数の助言を元に実際にアンドロイドの起動アニメーションを使ってのプロポーズを敢行したそうです。以下が、実際に使われた起動アニメーションを撮影した動画です。

それで肝心の結果は? 答えはイエス。感激して泣いた彼女が泣き止んだところで撮影したのがこちらの写真なんだとか