分12こんにちは,太田です。3回ほどJavaScriptの基礎的な内容が続いたので,今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと,難しい・応用的なイメージがあるかもしれませんが,JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで,そのポイントを抑えれば中身は単純なものです。アニメーションの前提知識HTMLにおける通常のアニメーションを構成するのは,「⁠特定の要素」に対して,「⁠そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で,「⁠ある値からある値に操作」する,といった要素です。特定の要素と,CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。単純にインクリメントするだけというサンプルを見てみましょう。単純計算で言えば,1ms置きに1000回インクリメントしているので,1秒間の処理となるはずですが,実際には1秒間に1000回もの描画(1000FPS)を行うことはまず不可能です。このままでは実行される環境に大きく依存した(低スペックな環境では極端に遅い)アニメーションになってしまいます。そこで,開始時刻から経過した時間で現在の位置を決め,その位置に移動させる方法が一般的です。1秒間で100px移動させたい場合なら,300msの時点では30px移動していればよく,500msでは50px,1000msを超えたら100pxにしてアニメーションを終了すればよい,ということです。時間を基準にすれば,時間通りにアニメーションが終わるというごく当たり前なことです。10ms置きに実行アニメーションを実行この方法ではハイスペックな環境では滑らかなアニメーションに,ロースペックな環境では最低限のアニメーションになります。アニメーションの汎用化とEasing関数さて,上記の実装では汎用性がないので,もう少し使い回しができるようにしてみましょう。直線的な動きだけでなく,動きにバリエーションを増やしたいと思います。その際によく使われるのがEasing関数と呼ばれるものです。Easing関数とは,(⁠主に)経過時間,初期値,変動値,継続時間の4つの変数から現在の値を求めることができる関数です。10ms置きに実行アニメーションを実行easing関数は自作もできますが,よく使われるのはActionScriptのライブラリであるTweenerがサポートしている関数群です。Referenceにそのサンプルがあります。JavaScriptから扱う場合はTweenerのJavaScriptポートである,JSTweenerにその関数群が実装されています。JSTweener著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。