タグ

animationに関するmanabouのブックマーク (21)

  • Rife-App 1.5 - AIによるフレーム補間・中割生成ツール「Dain-App」の後継アプリが登場!25倍高速!

    製品&ハードウェア-Product&Hardware Creality Ender-3 V3 Plus Review - CoreXZ... 2024-09-11 Creality社から、2024年新登場の大型造形対応3Dプリンター「Ender-3 V3 Plus」とフィラメント乾燥機「Creality Space Pi」ご提供いただきました!初の大型造形機のレビュー記事をご確認ください! 続きを読む 3Dスカルプト ソフト ソフトウェア&ツール-Software&Tool ZBrush for iPad - 遂にリリース!再設計されたUI!タッチベース... 2024-09-11 2024年9月10日、Maxonから予告通り「ZBrush for iPad」がリリースされました!無料版もあるのは嬉しい! 続きを読む Unreal Engine アセット アセット-Asset IMPERF

    Rife-App 1.5 - AIによるフレーム補間・中割生成ツール「Dain-App」の後継アプリが登場!25倍高速!
  • 線形代数とは?初心者にもわかりやすい解説 | HEADBOOST

    「線形代数を簡単に理解できるようになりたい…」。そう思ったことはないでしょうか。当ページはまさにそのような人のためのものです。ここでは線形代数の基礎のすべてを、誰でもすぐに、そして直感的に理解できるように、文章だけでなく、以下のような幾何学きかがく的なアニメーションを豊富に使って解説しています。ぜひご覧になってみてください(音は出ませんので安心してご覧ください)。 いかがでしょうか。これから線形代数の基礎概念のすべてを、このようなアニメーションとともに解説していきます。 線形代数の参考書の多くは、難しい数式がたくさん出てきて、見るだけで挫折してしまいそうになります。しかし線形代数は来とてもシンプルです。だからこそ、これだけ多くの分野で活用されています。そして、このシンプルな線形代数の概念の数々は、アニメーションで視覚的に確認することで、驚くほどすんなりと理解することができます。 実際のと

    線形代数とは?初心者にもわかりやすい解説 | HEADBOOST
  • How GPT3 Works - Visualizations and Animations

    Jay Alammar Visualizing machine learning one concept at a time. @JayAlammar on Twitter. YouTube Channel Discussions: Hacker News (397 points, 97 comments), Reddit r/MachineLearning (247 points, 27 comments) Translations: German, Korean, Chinese (Simplified), Russian, Turkish The tech world is abuzz with GPT3 hype. Massive language models (like GPT3) are starting to surprise us with their abilities

  • やってはいけないUIアニメーション

    ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、

    やってはいけないUIアニメーション
  • やめてほしいUIアニメーション

    最近はクオリティの高いアプリも増え、UIの見せ方も工夫されて昔より質の高いアプリが増えましたが、低コストで開発していくとUIアニメーションは後回しにされがちですよね。 開発時間や人員の問題、UIアニメーションをやる人がいないから自分がやった人など、UIアニメーションの優先順位が低いため、手探りでやっている方も多いと思います。 今回の記事では今出ているアプリに対してあれはダメだ!と言いたいわけではなく、リリースされているアプリを触って、自分が作るときはここは気をつけようと思ったり、これはアニメーションいいなとか、実際体感して勉強していけるため、その経験が業界全体を徐々にクオリティアップしていくため、結果は惜しいアニメーションだとしても挑戦した結果でもあると思うため大事なことだと思っています。 前置きはここまでにして、今回はアニメーションの中で、あれ?と思ってしまう、そんな「これはやめてほしい

    やめてほしいUIアニメーション
  • GitHub - anandpawara/Real_Time_Image_Animation: The Project is real time application in opencv using first order model

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - anandpawara/Real_Time_Image_Animation: The Project is real time application in opencv using first order model
  • UIの細かい動きについて

    イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの

    UIの細かい動きについて
  • Pictogramming – Code yourself

    © 2024 青山学院大学 ピクトグラム研究所 所長 伊藤一成 (Kazunari Ito, Pictogram Research Center, Aoyama Gakuin University) All rights reserved. ピクトグラミングのプログラムは,著作権で保護されています.The program of Pictogramming is protected by copyright. ピクトグラミングは,商標または登録商標です. Pictogramming is trademarks or registered trademarks. ピクトッチのプログラム記述領域には, Google Blocklyを用いています. Pictoch uses Google Blockly. ピクソン,ジャバスクピクトのプログラム記述領域には,CodeMirrorを用いています. P

    Pictogramming – Code yourself
  • ユーザ体験を維持した遷移アニメーションの実装 | CyberAgent Developers Blog

    はじめに みなさん、初めまして。 株式会社AbemaTVでAndroidエンジニアをやっている竹田(@satsukies)です。 17新卒として6月に配属されて、最初に取り組んだタスクが画面遷移のアニメーションの改善検証でした。 AbemaTVでは、画面上に表示される番組コンテンツやビデオコンテンツのサムネイル画像などを、デバイスに最適な形で取得する仕組みを導入しています。 単にネットワークでやりとりするデータ量を削減するだけでなく、画面表示までの待ち時間を短くしてユーザ体験を良くする狙いもあります。 今回、アニメーションの改善検証を通して得た知識を基に、ユーザ体験を維持しながら遷移アニメーションを実装する方法についてお話ししたいと思います。 目次 遷移アニメーションとは 基的な実装 非同期通信に合わせたチューニング まとめ 遷移アニメーションとは Google Developersのア

    ユーザ体験を維持した遷移アニメーションの実装 | CyberAgent Developers Blog
  • みんなで理想を共有! "動く"プロトタイプを導入しました。 - Cybozu Inside Out | サイボウズエンジニアのブログ

    こんにちは。サイボウズ デザイングループの樋田(といだ)です。 今年の6月にデザイナーとしてサイボウズへ中途入社しました。 今は社内でプロトタイピングおじさんやってます。 プロトタイピングってもう開発のプロセスには欠かせないものになってますよね。 サイボウズの開発でもいままでプロトタイピングをやってきたのですが、プロトタイピングをより開発に活かすべく新しいツールを導入することにしました。 理想のツールを探して これまではInVIsionだけでプロトタイプを作っていたのですが、InVisionのプロトタイプだけでは実装とのずれがあって詳細な検討ができない…という不満がありました。 そこで実装に近い"動く"プロトタイプが作れるツールを導入することにしました。 主な目的はこの3点 早く出来る 簡単にできる(学習コストが低い) 再現度が高い 世の中にはたくさんのプロトタイピングツールがあるので 理

    みんなで理想を共有! "動く"プロトタイプを導入しました。 - Cybozu Inside Out | サイボウズエンジニアのブログ
  • インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict

    巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問

    インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
  • Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた — un-Tech

    ごきげんよう。フーミンです。 最近のサイトはいたるところにアニメーションする要素が増えてきましたね。 制作ツールや学習環境が充実してきたことによって、実装が簡単になってきたことも要因の一つでしょうか。 実装が簡単になった分、 「アニメーション簡単で楽しい!どんどんアニメーションさせてイケてるサイト作るぜ〜!」 と、なにも考えずに何でもかんでもアニメーションさせていたら、 「なんか重いなぁ・・・動きもカクカクしてるなぁ・・・」 なんてことになったことありませんか? 今回は、もっさり重くなってしまったサイトのパフォーマンスを改善するために、原因の追求と対策について、簡単に説明していこうと思います。 パフォーマンスの改善について まず、ひとことに「パフォーマンスの改善」といっても、 ネットワークパフォーマンスの改善(HTTPリクエストを減らす など) JavaScript & CSSパフォーマン

    Webサイトのパフォーマンス改善を行うためにGPU処理を取り入れてみた — un-Tech
  • ブラウザのハードウェアアクセラレーションを理解してJavaScriptアニメーションを最適化する方法 - Qiita

    最近、アニメーションがっつりなウェブアプリケーションを早くするみたいな仕事をしていて、ハードウェアアクセラレーションってどういう仕組みなんだろうと調べていたらこんな英語でこういう記事があったので、紹介してみる。 訳しつつ独自解釈を入れてみたのが以下のような感じ。 一般にアニメーショングラフィックスをCPUのみで処理しようとした際、アニメーションにおけるフレーム毎にピクセル単位で生成し、描画するという処理を行っている。一方でCPU+GPUを処理に用いる場合、アニメーションさせる要素をGPUで確保されている無数の「テクスチャー(レイヤー)」に書き込む。そのうえでCPUからのアニメーション処理要求に応じてGPUが内部的にアニメーションを行うことで、高速な処理を実現している。 一般にいうブラウザのHA(ハードウェアアクセラレーション)とは、アニメーションを行わせるDOM要素を抽出し、その単位でGP

    ブラウザのハードウェアアクセラレーションを理解してJavaScriptアニメーションを最適化する方法 - Qiita
  • Material Design

    Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

    Material Design
  • React、Redux、D3を用いたアニメーション | POSTD

    これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか? 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら

    React、Redux、D3を用いたアニメーション | POSTD
  • 【統計学】ハミルトニアンモンテカルロ法をアニメーションで可視化して理解する。 - Qiita

    ハミルトニアンモンテカルロ法(HMC)の動作原理をアニメーションを用いて理解してみようという記事です。 先日の記事、「【統計学】マルコフ連鎖モンテカルロ法(MCMC)によるサンプリングをアニメーションで解説してみる。」の続編にあたります。 豊田先生の書籍「基礎からのベイズ統計学」の例題を使わせていただき、サンプリング対象の分布は今回ガンマ分布とします。記事ではアニメーションに使った部分の理論的な解説しかしませんので、HMCの詳細な解説はこちらの書籍をご参照いただければと思います。 はじめに 推定する対象は$\theta$を変数としたガンマ分布です。ベイズ推定で推定したいパラメーターを$\theta$で表すので、$\theta$の分布として表されます。1 ガンマ分布はこちらです。 $$ f(\theta|\alpha, \lambda) = {\lambda^{\alpha} \over

    【統計学】ハミルトニアンモンテカルロ法をアニメーションで可視化して理解する。 - Qiita
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • How to Create Twitter Exploding Hearts

    So we're going to build this exploding heart, except just know Twitter kind of cheated. Not really but they used an image and played each frame adjusting background-position so it looked animated. Okay not cheated they used a really smart technique but what's the fun in doing that when we can build it for real! I've already built a Firework concept here http://browniefed.com/blog/2015/08/29/react-

    How to Create Twitter Exploding Hearts
  • React Rally: Animated -- React Performance Toolbox

    リプレイスを安心安全に 〜段階的リプレイスと等価比較〜/Safe and Secure Replacement ~ Phased Replacement and Equivalent Comparison ~

    React Rally: Animated -- React Performance Toolbox
  • 非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ!って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回

    非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita