|
|
Line 1,741: |
Line 1,741: |
| <!-----------------------------------------------------------------------------------------------------------------------------------------> | | <!-----------------------------------------------------------------------------------------------------------------------------------------> |
| | | |
− | <div id="projectIntro">
| |
− |
| |
− | <body onload="init();" style="margin:0px;">
| |
− | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/CreatJS&action=raw&ctype=text/javascript"></script>
| |
− | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/AnimationProject&action=raw&ctype=text/javascript"></script>
| |
| | | |
− | <div id="animation_container" style="background-color:rgba(8, 39, 58, 1.00); width:800px; height:450px">
| |
− | <canvas id="canvas" width="800" height="450" style="position: absolute; display: block; background-color:rgba(8, 39, 58, 1.00);"></canvas>
| |
− | <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:800px; height:450px; position: absolute; left: 0px; top: 0px; display: block;">
| |
− | </div>
| |
− | </div>
| |
− | <div id="teamLogo"><img id="mobileCover" src="https://static.igem.org/mediawiki/2019/f/f9/T--Fudan-TSI--800-450.gif"></div>
| |
− |
| |
− | <script>
| |
− | var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
| |
− | function init() {
| |
− | canvas = document.getElementById("canvas");
| |
− | anim_container = document.getElementById("animation_container");
| |
− | dom_overlay_container = document.getElementById("dom_overlay_container");
| |
− | var comp=AdobeAn.getComposition("59A1DD61F7F294448CE610842DD5118B");
| |
− | var lib=comp.getLibrary();
| |
− | var loader = new createjs.LoadQueue(false);
| |
− | loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
| |
− | loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
| |
− | var lib=comp.getLibrary();
| |
− | loader.loadManifest(lib.properties.manifest);
| |
− | }
| |
− | function handleFileLoad(evt, comp) {
| |
− | var images=comp.getImages();
| |
− | if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }
| |
− | }
| |
− | function handleComplete(evt,comp) {
| |
− | //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
| |
− | var lib=comp.getLibrary();
| |
− | var ss=comp.getSpriteSheet();
| |
− | 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.Project();
| |
− | stage = new lib.Stage(canvas);
| |
− | //Registers the "tick" event listener.
| |
− | fnStartAnimation = function() {
| |
− | stage.addChild(exportRoot);
| |
− | createjs.Ticker.setFPS(lib.properties.fps);
| |
− | createjs.Ticker.addEventListener("tick", stage);
| |
− | }
| |
− | //Code to support hidpi screens and responsive scaling.
| |
− | function makeResponsive(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 || 1, 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 = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
| |
− | canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
| |
− | stage.scaleX = pRatio*sRatio;
| |
− | stage.scaleY = pRatio*sRatio;
| |
− | lastW = iw; lastH = ih; lastS = sRatio;
| |
− | stage.tickOnUpdate = false;
| |
− | stage.update();
| |
− | stage.tickOnUpdate = true;
| |
− | }
| |
− | }
| |
− | makeResponsive(true,'both',false,1);
| |
− | AdobeAn.compositionLoaded(lib.properties.id);
| |
− | fnStartAnimation();
| |
− | }
| |
− | </script>
| |
− | </body>
| |
− |
| |
− |
| |
− | </div>
| |
| | | |
| <div class="container"> | | <div class="container"> |