やりたいこと
以下の要件を満たすアニメーションを作りたい
gif以外
無音であること
自動再生したい
ループしたい
今回の実現方法：Create.jsを使う
いろいろな方法はあると思いますが今回は、一例として
JavaScriptのライブラリ、Create.jsを使います
create.js?
2013年ごろに発表されたライブラリ郡
Canvasを使ってFlashのようにアニメーションが作成可能
FlashデベロッパーのためのCreateJS：第1回 CreateJSとは何か──そのメリットからFlashとの違いまで
用意するもの
- create.js
- (jQuery)
- sprite画像 （一定幅で用意した画像）
出来上がり予想図
※gif画像で恐縮ですが…こんな動きになります
実装
animation.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<link type="text/css" rel="stylesheet" href="./base.css">
<script type="text/javascript">
// 処理で使う変数の宣言
var canvas;
var stage;
var anime;
function init() {
// カンバスの設定
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
// アニメーションの実処理を行う関数のコール
initialize();
// FPS値の設定
createjs.Ticker.setFPS(2);
// タイマー設定（参考リンク後述 ）
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
// SP対応・タッチイベントのチェックを行う
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
stage.update();
}
// アニメーションの設定を行う
function initialize() {
// 利用するデータの呼び出し
// loadクラス(後述）を使ってファイルやフレーム設定を別ファイルにしても良い。
// 今回はhttpsやクロスドメイン制約などを無視ししたいためベタ書きをする
var data = {"images": ["./test.jpeg"], "frames": [[0,0,150,150],[150,0,150,150],[300,0,150,150],[450,0,150,150],[0,150,150,150],[150,150,150,150],[300,150,150,150],[450,150,150,150]]};
// アニメーションデータの設定
var spritesheet = new createjs.SpriteSheet(data);
anime = new createjs.Sprite(spritesheet, 0);
// ステージに設定
stage.addChild(anime);
anime.play();
stage.update();
// 一定時間ごと画面を更新する
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
stage.update();
}
</script>
</head>
<body>
<div class="content">
<canvas id="canvas" width="150" height="150"></canvas>
</div>
<script type="text/javascript">init();</script>
</body>
</html>
base.css
body {
margin: 0;
}
.content{
position:relative;
background-color:#EEEEEE;
}
#canvas {
top:0;
left:0;
display:block;
width: 150px;
padding-left:0;
padding-right:0;
position:absolute;
background-color:#FFFFFF;
}
補足・参考リンク
フレーム設定について
initialize();関数内で var data = ~~と書いているところについて補足する
- images:スプライト画像のURLの設定（上記参照）
- frames:フレーム移動の単位
[表示したい画像の幅開始点, 表示したい画像の高さ開始点, 画像幅, 画像高さ]
※今回の場合,150x150の画像を4枚2段でつなぎあわせたスプライト画像を利用した