レスポンシブで滑らかなフレームアニメーションをCSSとJSで実装する方法
Webサイトを楽しく見せることができるフレームアニメーション。SVG画像とCSS、JavaScriptで滑らかな動きを実現する方法、注意点を解説します。 デザイナーから、「今回のプロジェクトではフレームアニメーションを使いたいんだ。きれいに動くように実装してほしい」と言われたらどうしますか？ フロントエンド開発者には、デスクトップとモバイルを問わず、すべてのブラウザーで滑らかに動き、ハイパフォーマンスでメンテナンスしやすいフレームアニメーションの実装が求められます。 このチュートリアルでは、HTML、CSS、JavaScriptを使ってアニメーションを作成する方法を紹介します。改善を繰り返しながら、プロジェクトにとって最善の結果を達成しましょう。 フレームアニメーションとは？ フレームアニメーションについてのAdobeによる定義は以下のとおりです。 すべてのフレームでステージのコンテンツが
第12回 スプライトシートでアニメーションをつくる | gihyo.jp
今回のお題では、次のようなJavaScriptコードを書いた。情報オブジェクト（data）のimagesプロパティには、スプライトシートのパス（file）ひとつを配列に納めて与えた。framesプロパティには、Objectインスタンスで幅と高さ、および基準点の座標を定めた。 {width:幅, height:高さ, regX:水平基準点, regY:垂直基準点} animationsプロパティの中身については、この後説明する。こうして設定した情報オブジェクトがSpriteSheet()コンストラクタに渡され、できあがったSpriteSheetオブジェクト（mySpriteSheet）は、さらにBitmapAnimation()コンストラクタの引数にして、BitmapAnimationオブジェクト（mySprite）がつくられている。 var data = {}; data.images =
スプライトシート軽量化テクニック(JPEG分割 vs 減色) - OPTPiX Labs Blog
開発部の山崎です。今回は、スプライトシートのファイル容量を軽減するためのテクニックをご紹介いたします。 Adobe Flash CS6には「スプライトシート」を出力する機能があります。スプライトシートを使うと、Flash Playerを使わずに、ブラウザ上でパラパラマンガ方式のアニメーションを表示することができます。現在主流のブラウザ(IE9を除く)であれば、CSSやJavaScriptを使って容易にアニメーションを表示することができます。最近は、Flashに対応していないスマートフォンでWebを閲覧する機会が増えていることから、注目されている機能です。 本記事では、このスプライトシートのファイル容量を軽減するための方法について考察してみます。 ちなみに、弊社製品の「OPTPiX SpriteStudio」と「OPTPiX imésta」を組み合わせて、スプライトシートを作成することも可能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home
自社サイトリニューアルでのアニメーション制作について少しだけ。 | ココノヱブログ
