Next2D | Rendering Engine, NoCode Tool, Underlying Framework.2D entertainment development made easy! Fast! Comfortable!
線形代数とは？初心者にもわかりやすい解説 | HEADBOOST
「線形代数を簡単に理解できるようになりたい…」。そう思ったことはないでしょうか。当ページはまさにそのような人のためのものです。ここでは線形代数の基礎のすべてを、誰でもすぐに、そして直感的に理解できるように、文章だけでなく、以下のような幾何学きかがく的なアニメーションを豊富に使って解説しています。ぜひご覧になってみてください（音は出ませんので安心してご覧ください）。 いかがでしょうか。これから線形代数の基礎概念のすべてを、このようなアニメーションとともに解説していきます。 線形代数の参考書の多くは、難しい数式がたくさん出てきて、見るだけで挫折してしまいそうになります。しかし線形代数は本来とてもシンプルです。だからこそ、これだけ多くの分野で活用されています。そして、このシンプルな線形代数の概念の数々は、アニメーションで視覚的に確認することで、驚くほどすんなりと理解することができます。 実際のと
OPTPiX SpriteStudio | OPTPiX
OPTPiX SpriteStudio は超汎用の 2D アニメーション作成ツールです。 コンシューマーゲームやスマートフォンアプリ、各種ゲームなどに使用される2Dキャラクターのアニメーションや、ウィンドウなどのインターフェース周りの動き、攻撃時などに展開されるエフェクトのアニメーションなど、幅広いアニメーションを作成することができます。 作成したアニメーションはゲームエンジン等に組み込んで使用する他、アニメーションGIF・PNG・WebPやムービーとして出力することもできます。また、Ver.7.1からは音声ファイルの再生やテキスト表示にも対応し、作成できるアニメーションの幅が広がりました。 多彩な機能でキャラクターを生き生きと動かす メッシュ・ボーン機能を使用することにより、より豊かな表現を実現できるようになりました。髪の毛や布、棒のしなり等のアニメーションはもちろん、２Dイラストを立体
[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ
デモのアニメーションGIF 実装 HTML デモページの中央のセクション（背景グリーンの箇所）のHTMLです。 <section class="cd-section"> <!-- テキスト --> <div class="cd-modal-action"> <a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a> <span class="cd-modal-bg"></span> </div> <div class="cd-modal"> <div class="cd-modal-content"> <!-- モーダルコンテンツ --> </div> </div> <a href="#0" class="cd-modal-close">Close</a> </section> ボタン、モーダルコンテンツ
![[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c3e2b74f52cf5d4d27ac9771e327796cadcfbf24/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020206.png)
snabbt.js
Introduction snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices. snabbt.js is built to be fast. It will only animate things that modern browse
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
☆ sweep.js ☆
Status This project is no longer maintained. CSS now has built-in support for setting color-interpolation-method. Transitioning through the oklch color space is a superior alternative to using this library. About sweep.js is a small JavaScript library (5kb zipped) that enables proper color transitions through the HSL and HUSL spaces. Ordinary CSS transitions and existing frameworks convert HSL col
home | p5.js
Search p5js.org Hello! p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However,
ttyrecordからGIF作るのにスクリーンショットなんて必要なかったんや - すぎゃーんメモ
先日 ターミナル操作の記録(ttyrec)からGIFアニメを生成するツールを作った - すぎゃーんメモ を書いたところ、思っていた以上に反響があって。 自分的にも結構便利だなーと思っていたのだけど、 ttygifとその系列、端末マニアではない人の95%くらいのユースケースでは端末に依存するシーケンスとか流さないだろうし、色とかが微妙に違ってもそこが主眼じゃないと思うので、単純に内部に端末を持ってダイレクトにGIFを吐ければ良くて、いちいちスクリーンショト取るの筋悪ではないの？ 2014-07-24 21:45:33 via Twitter Web Client という意見をいただいて。うーん 確かに、と。 C版 で、はやくもそういうのを実現するものが作られました。すごい。 https://github.com/saitoha/seq2gif こんなカンジで使える。 エスケープシーケンスの処
新人デザイナーにオススメ！デザインの要素と原則への理解をアニメで深める動画 -Elements of Design
デザインのさまざまな要素と原則を非常にセンスのいいアニメーションでまとめたショートフィルム「Elements of Design」を紹介します。 「Elements of Design」は50秒ほどの動画で、テンポのいいアニメーションでデザインの要素と原則がまとめられています。 アニメーションが気持ちいいので、あっという間に見終わってしまいます。 Elements of Design 線（Line）から面（Plane）へ、 リズム（Rhythm）を生み出し、バランス（Balance）とスケール（Scale）を調整し、 テクスチャ（Texture）、フレーミング（Flaming）、グリッド（Grid）、カラー（Colour）など、デザインに大切なさまざまな要素と原則がまとめられています。
Home | CSS3 Animate It
CSS3 Animate It is a new CSS3 lightweight animation plugin that triggers animations when they come into view using CSS3 animations.Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we ar
GIFをくっつける - hitode909の日記
↓↓こういうのと， ↓↓こういうのを用意して， ↓こうすると， wget http://mrwgifs.com/wp-content/uploads/2014/01/A-Stylish-Emma-Stone-Gives-You-a-Thumbs-Up-In-a-Pink-Dress.gif convert -resize '245x245!' A-Stylish-Emma-Stone-Gives-You-a-Thumbs-Up-In-a-Pink-Dress.gif 1.gif wget https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20140324/20140324190314.gif convert 1.gif 20140324190314.gif 2.gif ↓↓こういうのができて便利． あらかじめサイズを合わせ
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
DragonBones ドキュメント
ドラゴンボーンズは2Dのボーンアニメーションのためのオープンソースプロジェクトです。"ドラゴンボーンズデザインパネル"というスケルトンアニメーションの設定を行うパネルと、ActionScriptによるボーンアニメーション再生のためのライブラリで構成されます。 デザインパネルは実際にはFlashの拡張機能で作られているため、デザイナーが慣れ親しんでいるタイムラインアニメーション作成フローを基に2Dスケルトンアニメーションが効率的に作成できます。 従来のタイムラインアニメーション作成に基づいたワークフロー。 ボーン(骨構造)を適用することによって、アニメーションのクオリティを向上させ、正確で自然なものとします。また、すべてのボーンはプログラムから動的に制御が可能です。 ボーン個々に対してアニメーションの再生時間や再生までの遅延時間を設定することができます。これは、より少ないキーフレーム数で生き
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirect
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
待ち受け、可愛いね。 - 窪之内英策 EISAKU's post on Vine
ディズニーアニメの12の基本原則をグラフィカルに紹介するGIF画像
Video marketing platform and animated video maker
