Skip to content

Instantly share code, notes, and snippets.

@butchi
Last active December 19, 2016 09:07
Show Gist options
  • Save butchi/160717f0b5dea0d55dea7475370854c7 to your computer and use it in GitHub Desktop.
Save butchi/160717f0b5dea0d55dea7475370854c7 to your computer and use it in GitHub Desktop.
実践!Animate CCを使ったWebサイト演出 ref: http://qiita.com/butchi_y/items/fb62522e64812213c2a5
// timeline functions:
this.frame_19 = function() {
$(canvas).trigger('end-anim');
stop();
}
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
ss = ss||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for(i=0; i<ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
}
exportRoot = new lib.kanpai();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(false,'both',false,1);
}
for(let i=0; i<ssMetadata.length; i++) {
...
}
manifest: [
{src:"img/sprite-kanpai.png", id:"kanpai_atlas_"}
.kanpai.
<canvas class="anim-kanpai" width="375" height="375" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
prepend JavascriptBlock
script(src="https://code.createjs.com/createjs-2015.11.26.min.js")
import $ from 'jquery';
import AnimKanpai from './module/AnimKanpai';
let animKanpai = new AnimKanpai();
animKanpai.$elm.on('end-anim', (evt) => {
console.log('end anim.');
});
setTimeout(() => {
animKanpai.$elm.trigger('start-anim');
}, 2000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment