Webサイトにおけるアニメーション実装へのアプローチ 〜未だ見果てぬ夢〜 - Qiita
私は常々 Web サイトにおいてアニメーションはなくてもよい存在だと考えています。なぜならば・・・と話を続けたくはあるのですが、まあ正当な強い持論があるわけでもないので、ここで大仰に語ることは控えておきます。アニメーションを実装する立場でありながら、そのような考えをもち常に自責の念にかられながらも制作を続けています。そんな中でさまざまな実装へのアプローチを試みた雑な感想を、簡単なデモとあわせてご覧ください。 1. JavaScript で要素を動かす 古から伝えられてきた魔法。緻密な計算を駆使してあらゆるものを自在に操れ。 See the Pen Animation vanilla by Syuji Higa (@syuji-higa) on CodePen. 言わずもがな、ブラウザで動くスクリプトです。トランスパイラやらコンパイラやらは溢れてはいますが、結局はこの言語になります。前までは
デモとコード例で学ぶ Vue.js のトランジション
フロントエンド開発においてトランジション、アニメーションの実装は比較的難しいものだと思いますが、心地の良い UI を作るためには必要不可欠です。Vue.js にはその実装を簡単にしてくれる機能があるので、デモを交えながらその使い方と、強力さを紹介します。 <transition> コンポーネント要素が挿入、削除される時のアニメーションは Vue.js デフォルトで用意されている <transition> コンポーネントを使用することで簡単に書くことができます。<transition> コンポーネントはただ一つの子要素を持ち、子要素の表示状態に応じてアニメーションに関する処理を行います。例えば、以下のようなコードになります。 <transition> <p v-if="isAppear">この要素はアニメーションの対象になります。</p> </transition> 上記の例では <tran
Reactのアニメーションを攻略する - Qiita
仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の高さが欲しい 適材適所でライブラリを使うのは嫌なので、できるだけシンプルかつ柔軟にしたい。 Redux、MobXは使いたくない Redux作者もローカルのstateでいいみたいなこと言ってるし、 わざわざ依存するライブラリを増やしたくない。 CSSアニメーションは使いたくない CSSだとDOM依
アニメーション: CSS vs JavaScriptの議論 - ワザノバ | wazanova
http://greensock.com/css-performance 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 GreenSockが、「アニメーションのパフォーマンスは、CSSが常に優れているというわけでない。」という観点からベンチマーク調査した結果を公表。それに対して、GoogleのPaul Irishが反論。詳細やりとりはサイトを確認していただければと思いますが、ポイントはコメント欄で交わされている結論かと。 Paul Irish 独立したtransformコントロールを必要とする場合、CSSのみのアプローチではelementのカウントが膨れ上がるので、JavaScriptの方が相当よい結果を残す。それ以外のケースでは、理想的な実装がされているという前提に立てば、両者のパフォーマンスは同
JavaFX 2ではじめる、GUI開発 第13回 タイムラインを使ったアニメーション
先月にに引き続き、今月もアニメーションについて解説していきます。 先月は高レベルAPIのトランジションを使用しましたが、今月は低レベルAPIのタイムラインを使用します。 タイムラインの基本 前回、アニメーションの原理としてDukeが手を降る絵を示しました(図1)。これを特定の時間で切り替えて、動きを表現するわけです。 この1コマ1コマのことを英語ではフレーム(Frame)と呼びます。 コンピュータを使用してアニメーションを行なう場合、前回も言及したようにすべてのフレームを記述する必要はありません。必要な部分だけ記述して、後は補間して描画します。 前回使用したトランジションの場合、始めと終わりだけを指定すれば、中間の部分は自動的に補間を行なってくれます。しかし、始めと終わりだけの指定だけでは不十分な場合もあります。たとえば、途中で動きが変化する場合などは中間部分でフレームを指定する必要があり
デスクトップやブラウザ等の画面を撮影してGifアニメにしてくれるLICEcap
いくつか使っているうちに、最終的に一番優れているものが見えてくるものです。 今回ご紹介する「LICEcap」は、デスクトップ上のものであればなんでも撮影可能であり、それをGifアニメに変換してくれるというものです。こうしたフリーソフトは数多くあるものの、お気に入りのポイントは極限までシンプルであるという点です。 使いどころは様々ありまして、Web上にアップすればその動作を延々とループしてくれるため、ちょっとしたチュートリアルには最適というわけですね。 使い方 枠がぽよんと出てきます。 この枠内でおきたことを撮影します。 ちなみに今回の動作としてご紹介するのはこちらの動作の一部を撮影しています。 このjQueryプラグイン、地味にすっごい人気のプラグインなので、興味のある人はひと通り動作確認してみてください。結構色んな場面で使えるプラグインです。 さて、話しを戻します。 このソフトは、FPS
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
次世代の検索フォームを作成するjQuery＆CSS3サンプル:phpspot開発日誌
Creating “Next Level” Search Form Using jQuery & CSS3 ? Webstuffshare ? Learn and share. The simplest harmony. 次世代の検索フォームを作成するjQuery＆CSS3サンプル。 CSS3をフルに使って、面白い検索フォームを作るチュートリアルです。 アイデアの応用で面白いインタフェースが作れそうです ボタンがあってクリックするとアニメーションしながら伸びて検索フォームになります ボタンをクリックすると立体的にキューブっぽく回転して検索入力ボックスが現れます これを見ると、ああなんかまた色々と出来て数年後にはどうなっていっちゃうんだろう、ついていけるんだろうかなという不安すら覚えてしまいますね。 関連エントリ ページめくりを実現するためのjQueryプラグイン集 高機能なカルーセルを実装
QuickTiGame2d に Ti.UI.Animation 相当の機能を実装しました！ - Android でいろいろやるよ！
TitaniumTitanium Mobile で動くゲームエンジンモジュール QuickTiGame2d に、Ti.UI.Animation 相当の機能を実装した新しいバージョンをリリースしました！ 今回のアップデートはアニメーション機能がアツいです！ アニメーションオブジェクト 'Transform' この新しいバージョンから、Transform というオブジェクトが使えるようになります。これは Ti.UI.Animation と Ti.UI.2DMatrix を合わせたような機能を持っています。大体 Ti.UI.Animation に似せた感じになっているので、Titanium で Animation を使ったことがある人なら、アニメーションのサンプルを見てもらえれば分かると思います。 これがなぜ良いかというと、今まではスプライトの滑らかな移動などのアニメーションなどを実装しようと思
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
[JS]多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
FlashのようにHTML5アニメーションを作れる、アドビが開発中の「Edge」とは？
アドビシステムズが先週行ったイベント「Adobe MAX」で、開発中のHTML5アニメーションツール「Edge」について明らかにしました。そしてAdobe TVの「EPISODE：Preview of the Edge Prototype tool for HTML5」では、動画でより詳しくEdgeの機能について解説しています。 そこで見えてきたのは、EdgeとはFlashでタイムラインを設定するように手軽かつ本格的にHTML5のアニメーションを作るツールになるだろう、というものです。公開された動画からその機能を見ていきましょう。 レイヤごとにプロパティの設定が可能 これがEdgeの画面。上部がオブジェクトの操作ペインであり、WebKitによるプレビューも表示されます。下部にタイムラインが表示されています。画面右上にはレイヤ、右下にプロパティがあります。 これがタイムラインの部分。Acto
TechCrunch | Startup and Technology News
Infra.Market, an Indian startup that helps construction and real estate firms procure materials, has raised $50M from MARS Unicorn Fund.
JavaScript + CanvasでActionScript3のような描画·CanvasScript3 MOONGIFT
CanvasScript3はHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5とFlashによる次世代標準の覇権争いが続いている。HTML5は現状のFlashでできることをどんどんと浸食しており、今後開発されるサイトについてはFlashの選択が減ってくる可能性がある。 オブジェクトが回転する Flashが得意とする分野の一つにアニメーションがある。HTMLやJavaScriptでアニメーションを作ろうというのは相当大変な思いをしそうだ。だがHTML5になって機能が増えることで状況は変わってくる。それを垣間みれるのがCanvasScript3だ。 CanvasScript3はCanvasとJavaScriptを使って、アニメーションを実現するライブラリだ。マウスの位置によって動作速度を変えるオブジェクトや爆発するようにオブジェクトが広がって跳ね返るサンプルなどが公開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
【イベントレポート】 【MIX11レポート】 IE9デモで注目を集めた「SVG女子」
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介
今日もやられやく - FC2 BLOG パスワード認証