createjs.Ticker でアニメーション用のループを作成するので、一旦実行すると CPU 負荷が少しかかった状態になります。そのリセットとかしたかったですけれど、createjs.Ticker の reset と init はうまく動きませんでした。 4分割固定で処理していますが、何分割でもできるようなパラメータ設定になっています。配列の数と、分割の割り算のところを引数にすればいいですね。 EASELJS で作成した Bitmap を TWEENJS でサンプルどおりに動かしてみました ※ 回転はあとから追加です。同時に元の座標に戻していますEASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでしたhttps://t.co/JO07xwTqCj pic.twitter.com/fXvMaaHmIX
— 夜歩き@DAZStudio (@sworc) 2016年5月3日
<script>
if ( typeof createjs === 'undefined' ) {
document.write("<"+"script src=\"https://code.createjs.com/easeljs-0.8.2.min.js\"></"+"script>");
document.write("<"+"script src=\"https://code.createjs.com/tweenjs-0.6.2.min.js\"></"+"script>");
}
</script>
<script>
var bitmap = Array(),bitmap_all,rect = Array();
var tick = false;
$(function(){
$("#tm_action_05103").on("click", function(){
if ( !tick ) {
// アニメーション開始
createjs.Ticker.addEventListener("tick", stage1);
tick = true;
}
for( i = 0; i < 4; i++ ) {
bitmap[i].rotation = 0;
createjs.Tween.get(bitmap[i], {loop: false})
.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
.to({alpha: 0, y: 75}, 500, createjs.Ease.getPowInOut(2))
.to({alpha: 0, y: 125}, 100)
.to({alpha: 1, y: 100}, 500, createjs.Ease.getPowInOut(2))
.to({x: (i%2)*(bitmap_all.image.width/2), y: (parseInt((i/2)))*(bitmap_all.image.height/2), rotation:360 },
800, createjs.Ease.getPowInOut(2))
.call(function(){
console.log("アニメーション終了(一応)");
});
}
});
});
</script>
<input type="button" value="アニメーション" id="tm_action_05103">
<br>
<canvas id="load_area1" width="600" height="450" style='border:1px solid #000000'></canvas>
<script>
var stage1 = new createjs.Stage("load_area1");
img = new Image()
img.onload = function() {
bitmap_all = new createjs.Bitmap(this);
// トリミング用 bitmap
for( i = 0; i < 4; i++ ) {
bitmap[i] = new createjs.Bitmap(this);
rect[i] = new createjs.Rectangle(
(i%2)*(bitmap_all.image.width/2),
(parseInt((i/2)))*(bitmap_all.image.height/2),
bitmap_all.image.width/2,
bitmap_all.image.height/2
);
bitmap[i].sourceRect = rect[i];
bitmap[i].x = (i%2)*(bitmap_all.image.width/2);
bitmap[i].y = (parseInt((i/2)))*(bitmap_all.image.height/2);
stage1.addChild(bitmap[i]);
}
// 最初の表示
stage1.update();
}
img.src = "https://lh3.googleusercontent.com/-A5QW2HTze84/VyNZEIwxh4I/AAAAAAAAeRE/-rCcFQmsKawDMRrV6logONKz0i6LVhtYACCo/s600/wing_elf.jpg";
</script>
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
