Last active
December 19, 2016 09:07
-
-
Save butchi/160717f0b5dea0d55dea7475370854c7 to your computer and use it in GitHub Desktop.
実践!Animate CCを使ったWebサイト演出 ref: http://qiita.com/butchi_y/items/fb62522e64812213c2a5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// timeline functions: | |
this.frame_19 = function() { | |
$(canvas).trigger('end-anim'); | |
stop(); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
for(let i=0; i<ssMetadata.length; i++) { | |
... | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
manifest: [ | |
{src:"img/sprite-kanpai.png", id:"kanpai_atlas_"} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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