|
|
| Line 1,305: |
Line 1,305: |
| | <!---- Content ----> | | <!---- Content ----> |
| | <!-----------------------------------------------------------------------------------------------------------------------------------------> | | <!-----------------------------------------------------------------------------------------------------------------------------------------> |
| − |
| |
| − | <div id="pageCover">
| |
| − |
| |
| − | <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | $(document).ready(function($){
| |
| − | var $root = $('html, body');
| |
| − | $('a[href^="#"]').click(function() {
| |
| − | var href = $.attr(this, 'href');
| |
| − | $root.animate({
| |
| − | scrollTop: $(href).offset().top
| |
| − | }, 1000, function () {
| |
| − | window.location.hash = href;
| |
| − | });
| |
| − | return false;
| |
| − | });
| |
| − | })
| |
| − | </script>
| |
| − |
| |
| − | <svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice" style="z-index: -100;">
| |
| − | <defs>
| |
| − | <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
| |
| − | <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
| |
| − | </linearGradient>
| |
| − | <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
| |
| − | <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
| |
| − | <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
| |
| − | </linearGradient>
| |
| − | </defs>
| |
| − | <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
| |
| − | <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
| |
| − | </svg>
| |
| − | <div id="demoCover"><img id="coverPic" src="https://static.igem.org/mediawiki/2019/d/d9/T--Fudan-TSI--coverDesign.gif"></div>
| |
| − | </div>
| |
| − | <style>
| |
| − | #pageCover{
| |
| − | width:100%;
| |
| − | margin:0;
| |
| − | padding-top:80px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | width:100vw;
| |
| − | height:80vh;
| |
| − | position:absolute;
| |
| − | background-color:rgba(8,39,58,0.5);
| |
| − | top:70px;
| |
| − | left:0;
| |
| − | text-align:center;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:550px;
| |
| − | margin:20vh auto;
| |
| − | }
| |
| − | #demo{
| |
| − | width:100vw;
| |
| − | height:70vh;
| |
| − | position:relative;
| |
| − | }
| |
| − | #demo svg {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | position: fixed;
| |
| − | }
| |
| − | #demo svg g {
| |
| − | mix-blend-mode: lighten;
| |
| − | }
| |
| − | #demo svg polygon {
| |
| − | stroke: none;
| |
| − | fill: white;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width:1100px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | height:30vh;
| |
| − | }
| |
| − | #demo{
| |
| − | height:30vh;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:500px;
| |
| − | margin:7vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:992px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:500px;
| |
| − | margin:6vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:768px){
| |
| − | #pageCover{
| |
| − | padding-top:55px;
| |
| − | }
| |
| − | #demoCover{
| |
| − | top:55px;
| |
| − | }
| |
| − | #coverPic{
| |
| − | width:400px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (max-width:500px){
| |
| − | #coverPic{
| |
| − | width:200px;
| |
| − | margin:8vh auto;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | //////////////////////////////
| |
| − | // Demo Functions
| |
| − | //////////////////////////////
| |
| − | function bkgFunction(showStats) {
| |
| − | // stats
| |
| − | if (showStats) {
| |
| − | var stats = new Stats();
| |
| − | stats.domElement.style.position = 'absolute';
| |
| − | stats.domElement.style.left = '0';
| |
| − | stats.domElement.style.top = '0';
| |
| − | document.body.appendChild(stats.domElement);
| |
| − | requestAnimationFrame(function updateStats(){
| |
| − | stats.update();
| |
| − | requestAnimationFrame(updateStats);
| |
| − | });
| |
| − | }
| |
| − | // init
| |
| − | var svg = document.getElementById('demo');
| |
| − | tesselation.setup(svg);
| |
| − | gradients.setup();
| |
| − | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000;
| |
| − | function playNextTransition() {
| |
| − | tesselation.next(transitionDuration);
| |
| − | gradients.next(transitionDuration);
| |
| − | };
| |
| − | function tick(time) {
| |
| − | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
| |
| − | lastTransitionAt = time;
| |
| − | playNextTransition();
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | window.requestAnimationFrame(tick);
| |
| − | }
| |
| − | //////////////////////////////
| |
| − | // Delaunay Triangulation
| |
| − | //////////////////////////////
| |
| − | var calcDelaunayTriangulation = (function() {
| |
| − | var EPSILON = 1.0 / 1048576.0;
| |
| − | function getSuperT(vertices) {
| |
| − | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
| |
| − | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
| |
| − | i, xDiff, yDiff, maxDiff, xCenter, yCenter;
| |
| − | for(i = vertices.length; i--; ) {
| |
| − | if(vertices[i][0] < xMin) xMin = vertices[i][0];
| |
| − | if(vertices[i][0] > xMax) xMax = vertices[i][0];
| |
| − | if(vertices[i][1] < yMin) yMin = vertices[i][1];
| |
| − | if(vertices[i][1] > yMax) yMax = vertices[i][1];
| |
| − | }
| |
| − | xDiff = xMax - xMin;
| |
| − | yDiff = yMax - yMin;
| |
| − | maxDiff = Math.max(xDiff, yDiff);
| |
| − | xCenter = xMin + xDiff * 0.5;
| |
| − | yCenter = yMin + yDiff * 0.5;
| |
| − | return [
| |
| − | [xCenter - 20 * maxDiff, yCenter - maxDiff],
| |
| − | [xCenter, yCenter + 20 * maxDiff],
| |
| − | [xCenter + 20 * maxDiff, yCenter - maxDiff]
| |
| − | ];
| |
| − | }
| |
| − | function circumcircle(vertices, i, j, k) {
| |
| − | var xI = vertices[i][0], yI = vertices[i][1],
| |
| − | xJ = vertices[j][0], yJ = vertices[j][1],
| |
| − | xK = vertices[k][0], yK = vertices[k][1],
| |
| − | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
| |
| − | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
| |
| − | // bail condition
| |
| − | if(yDiffIJ < EPSILON){
| |
| − | if (yDiffJK < EPSILON){
| |
| − | throw new Error("Can't get circumcircle since all 3 points are y-aligned");
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // calc circumcircle center x/y, radius
| |
| − | m1 = -((xJ - xI) / (yJ - yI));
| |
| − | m2 = -((xK - xJ) / (yK - yJ));
| |
| − | xMidIJ = (xI + xJ) / 2.0;
| |
| − | xMidJK = (xJ + xK) / 2.0;
| |
| − | yMidIJ = (yI + yJ) / 2.0;
| |
| − | yMidJK = (yJ + yK) / 2.0;
| |
| − | xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
| |
| − | (yDiffJK < EPSILON) ? xMidJK :
| |
| − | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
| |
| − | yCenter = (yDiffIJ > yDiffJK) ?
| |
| − | m1 * (xCenter - xMidIJ) + yMidIJ :
| |
| − | m2 * (xCenter - xMidJK) + yMidJK;
| |
| − | xDiff = xJ - xCenter;
| |
| − | yDiff = yJ - yCenter;
| |
| − | // return
| |
| − | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
| |
| − | }
| |
| − | function dedupeEdges(edges) {
| |
| − | var i, j, a, b, m, n;
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j]; a = edges[--j];
| |
| − | for(i = j; i; ) {
| |
| − | n = edges[--i]; m = edges[--i];
| |
| − | if(a === m){
| |
| − | if (b===n){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | if(a === n){
| |
| − | if (b===m){
| |
| − | edges.splice(j, 2); edges.splice(i, 2);
| |
| − | break;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | return function(vertices) {
| |
| − | var n = vertices.length,
| |
| − | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
| |
| − | // bail if too few / too many verts
| |
| − | if(n < 3 || n > 2000)
| |
| − | return [];
| |
| − | // copy verts and sort indices by x-position
| |
| − | vertices = vertices.slice(0);
| |
| − | indices = new Array(n);
| |
| − | for(i = n; i--; )
| |
| − | indices[i] = i;
| |
| − | indices.sort(function(i, j) {
| |
| − | return vertices[j][0] - vertices[i][0];
| |
| − | });
| |
| − | // supertriangle
| |
| − | st = getSuperT(vertices);
| |
| − | vertices.push(st[0], st[1], st[2]);
| |
| − | // init candidates/locked tris list
| |
| − | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
| |
| − | locked = [];
| |
| − | edges = [];
| |
| − | // scan left to right
| |
| − | for(i = indices.length; i--; edges.length = 0) {
| |
| − | c = indices[i];
| |
| − | // check candidates tris against point
| |
| − | for(j = candidates.length; j--; ) {
| |
| − | // lock tri if point to right of circumcirc
| |
| − | dx = vertices[c][0] - candidates[j].x;
| |
| − | if (dx > 0.0){
| |
| − | if(dx * dx > candidates[j].r){
| |
| − | locked.push(candidates[j]);
| |
| − | candidates.splice(j, 1);
| |
| − | continue;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // point outside circumcirc = leave candidates
| |
| − | dy = vertices[c][1] - candidates[j].y;
| |
| − | if(dx * dx + dy * dy - candidates[j].r > EPSILON)
| |
| − | continue;
| |
| − | // point inside circumcirc = break apart, save edges
| |
| − | edges.push(
| |
| − | candidates[j].i, candidates[j].j,
| |
| − | candidates[j].j, candidates[j].k,
| |
| − | candidates[j].k, candidates[j].i
| |
| − | );
| |
| − | candidates.splice(j, 1);
| |
| − | }
| |
| − | // new candidates from broken edges
| |
| − | dedupeEdges(edges);
| |
| − | for(j = edges.length; j; ) {
| |
| − | b = edges[--j];
| |
| − | a = edges[--j];
| |
| − | candidates.push(circumcircle(vertices, a, b, c));
| |
| − | }
| |
| − | }
| |
| − | // close candidates tris, remove tris touching supertri verts
| |
| − | for(i = candidates.length; i--; )
| |
| − | locked.push(candidates[i]);
| |
| − | candidates.length = 0;
| |
| − | for(i = locked.length; i--; )
| |
| − | if(locked[i].i < n){
| |
| − | if(locked[i].j < n){
| |
| − | if(locked[i].k < n){
| |
| − | candidates.push(locked[i].i, locked[i].j, locked[i].k);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // done
| |
| − | return candidates;
| |
| − | };
| |
| − | })();
| |
| − | var tesselation = (function() {
| |
| − | var svg, svgW, svgH, prevGroup;
| |
| − | function createRandomTesselation() {
| |
| − | var wW = window.innerWidth;
| |
| − | var wH = window.innerHeight;
| |
| − | var gridSpacing = 250, scatterAmount = 0.75;
| |
| − | var gridSize, i, x, y;
| |
| − | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
| |
| − | gridSize = gridSpacing * svgW / wW;
| |
| − | } else { // window taller than svg = use height for gridSize
| |
| − | gridSize = gridSpacing * svgH / wH;
| |
| − | }
| |
| − | var vertices = [];
| |
| − | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
| |
| − | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
| |
| − | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
| |
| − | vertices.push(
| |
| − | [
| |
| − | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
| |
| − | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
| |
| − | ]
| |
| − | );
| |
| − | }
| |
| − | }
| |
| − | var triangles = calcDelaunayTriangulation(vertices);
| |
| − | var group = document.createElementNS('http://www.w3.org/2000/svg','g');
| |
| − | var polygon;
| |
| − | for(i = triangles.length; i; ) {
| |
| − | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
| |
| − | polygon.setAttribute('points',
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
| |
| − | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
| |
| − | );
| |
| − | group.appendChild(polygon);
| |
| − | }
| |
| − | return group;
| |
| − | }
| |
| − | return {
| |
| − | setup: function(svgElement) {
| |
| − | svg = svgElement;
| |
| − | var vb = svg.getAttribute('viewBox').split(/\D/g);
| |
| − | svgW = vb[2];
| |
| − | svgH = vb[3];
| |
| − | },
| |
| − | next: function(t) {
| |
| − | var toRemove, i, n;
| |
| − | t /= 1000;
| |
| − | if(prevGroup){
| |
| − | if(prevGroup.children){
| |
| − | if(prevGroup.children.length){
| |
| − | toRemove = prevGroup;
| |
| − | n = toRemove.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
| |
| − | }
| |
| − | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var g = createRandomTesselation();
| |
| − | n = g.children.length;
| |
| − | for (i = n; i--; ) {
| |
| − | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
| |
| − | }
| |
| − | svg.appendChild(g);
| |
| − | prevGroup = g;
| |
| − | }
| |
| − | }
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Gradients
| |
| − | //////////////////////////////
| |
| − | var gradients = (function() {
| |
| − | var grad1, grad2, showingGrad1;
| |
| − | // using colors from IBM Design Colors this time
| |
| − | var colors = [ // 14 colors - use 3-5 span
| |
| − | '#3c6df0', // ultramarine50
| |
| − | '#12a3b4', // aqua40
| |
| − | '#00a78f', // teal40
| |
| − | '#00aa5e', // green40
| |
| − | '#81b532', // lime30
| |
| − | '#e3bc13', // yellow20
| |
| − | '#ffb000', // gold20
| |
| − | '#fe8500', // orange30
| |
| − | '#fe6100', // peach40
| |
| − | '#e62325', // red50
| |
| − | '#dc267f', // magenta50
| |
| − | '#c22dd5', // purple50
| |
| − | '#9753e1', // violet50
| |
| − | '#5a3ec8' // indigo60
| |
| − | ];
| |
| − | function assignRandomColors(gradObj) {
| |
| − | var rA = Math.floor(colors.length * Math.random());
| |
| − | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
| |
| − | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
| |
| − | gradObj.stopA.setAttribute('stop-color', colors[rA]);
| |
| − | gradObj.stopB.setAttribute('stop-color', colors[rB]);
| |
| − | }
| |
| − | return {
| |
| − | setup: function() {
| |
| − | showingGrad1 = false;
| |
| − | grad1 = {
| |
| − | stopA: document.getElementById('stop1a'),
| |
| − | stopB: document.getElementById('stop1b'),
| |
| − | rect: document.getElementById('rect1')
| |
| − | };
| |
| − | grad2 = {
| |
| − | stopA: document.getElementById('stop2a'),
| |
| − | stopB: document.getElementById('stop2b'),
| |
| − | rect: document.getElementById('rect2')
| |
| − | };
| |
| − | grad1.rect.style.opacity = 0;
| |
| − | grad2.rect.style.opacity = 0;
| |
| − | },
| |
| − | next: function(t) {
| |
| − | t /= 1000;
| |
| − | var show, hide;
| |
| − | if (showingGrad1) {
| |
| − | hide = grad1;
| |
| − | show = grad2;
| |
| − | } else {
| |
| − | hide = grad2;
| |
| − | show = grad1;
| |
| − | }
| |
| − | showingGrad1 = !showingGrad1;
| |
| − | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
| |
| − | assignRandomColors(show);
| |
| − | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
| |
| − | }
| |
| − | };
| |
| − | })();
| |
| − | //////////////////////////////
| |
| − | // Start
| |
| − | //////////////////////////////
| |
| − | bkgFunction();
| |
| − | </script>
| |
| | | | |
| | <div id="projectIntro"> | | <div id="projectIntro"> |
| | | | |
| − | <style> | + | <body onload="init();" style="margin:0px;"> |
| − | #animation_container {
| + | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/createjs.js&action=raw&ctype=text/javascript"></script> |
| − | position:absolute;
| + | |
| − | margin:auto;
| + | |
| − | left:0;right:0;
| + | |
| − | top:0;bottom:0;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <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> | | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/AnimationProject&action=raw&ctype=text/javascript"></script> |
| − | <script>
| + | |
| − | var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
| + | <div id="animation_container" style="background-color:rgba(8, 39, 58, 1.00); width:800px; height:450px"> |
| − | function init() {
| + | <canvas id="canvas" width="800" height="450" style="position: absolute; display: block; background-color:rgba(8, 39, 58, 1.00);"></canvas> |
| − | canvas = document.getElementById("canvas");
| + | <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:800px; height:450px; position: absolute; left: 0px; top: 0px; display: block;"> |
| − | anim_container = document.getElementById("animation_container");
| + | </div> |
| − | dom_overlay_container = document.getElementById("dom_overlay_container");
| + | </div> |
| − | var comp=AdobeAn.getComposition("59A1DD61F7F294448CE610842DD5118B");
| + | <div id="teamLogo"><img id="mobileCover" src="https://static.igem.org/mediawiki/2019/f/f9/T--Fudan-TSI--800-450.gif"></div> |
| − | var lib=comp.getLibrary();
| + | </body> |
| − | 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>
| + | |
| − | <!-- write your code here -->
| + | |
| − | </head>
| + | |
| − | <body onload="init();" style="margin:0px;">
| + | |
| − | <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>
| + | |
| − | </body> | + | |
| | | | |
| | | | |
