KANGFU_GAME
/
start-page
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

refactor: 修改动态启动页

master
Min5203 3 years ago
parent
20c59e8250
commit
bc056b56e5
8 changed files with 486 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .eslintignore
  2. 3
      package.json
  3. BIN
      public/images/_preloader.gif
  4. BIN
      public/images/start_page_atlas_1.png
  5. 19
      public/libs/1.0.0/createjs.min.js
  6. 80
      public/start-page.html
  7. 376
      public/start-page.js
  8. 12
      src/views/Index.vue

1
.eslintignore
View File

@ -8,3 +8,4 @@ postcss.config.js
.eslintrc.js
vite.config.js
*/Middle.vue
public

3
package.json
View File

@ -57,8 +57,7 @@
},
"lint-staged": {
"src/**/*.{js,ts,jsx,json,css,vue}": [
"eslint --fix",
"git add"
"eslint --fix"
],
"*.js": "eslint --cache --fix"
},

BIN
public/images/_preloader.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/images/start_page_atlas_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

19
public/libs/1.0.0/createjs.min.js
View File

File diff suppressed because one or more lines are too long

80
public/start-page.html
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>start-page</title>
<!-- write your code here -->
<style>
#animation_container, #_preload_div_ {
position:absolute;
margin:auto;
left:0;right:0;
top:0;bottom:0;
}
</style>
<script src="libs/1.0.0/createjs.min.js"></script>
<script src="start-page.js"></script>
<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("E6AAA43C27C8FB4C8B0B04676F9FCE16");
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} )
}
var preloaderDiv = document.getElementById("_preload_div_");
preloaderDiv.style.display = 'none';
canvas.style.display = 'block';
exportRoot = new lib.startpage();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.framerate = lib.properties.fps;
createjs.Ticker.addEventListener("tick", stage);
}
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true,'both',true,1,[canvas,preloaderDiv,anim_container,dom_overlay_container]);
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(255, 255, 255, 1.00); width:1280px; height:720px">
<canvas id="canvas" width="1280" height="720" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1280px; height:720px; position: absolute; left: 0px; top: 0px; display: none;">
</div>
</div>
<div id='_preload_div_' style='position:absolute; top:0; left:0; display: inline-block; height:720px; width: 1280px; text-align: center;'> <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=images/_preloader.gif style='vertical-align: middle; max-height: 100%'/></div>
</body>
</html>

376
public/start-page.js
View File

@ -0,0 +1,376 @@
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:"start_page_atlas_1", frames: [[0,0,1280,720],[1856,1000,147,167],[1803,856,215,142],[1803,241,219,196],[1368,0,433,503],[1368,505,433,503],[1282,1010,285,292],[0,1444,1366,332],[1856,637,171,217],[1803,0,215,239],[0,722,1280,720],[1803,439,219,196],[1856,1169,121,92],[1282,1304,202,104],[1569,1010,285,292]]}
];
(lib.AnMovieClip = function(){
this.actionFrames = [];
this.ignorePause = false;
this.gotoAndPlay = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel);
}
this.play = function(){
cjs.MovieClip.prototype.play.call(this);
}
this.gotoAndStop = function(positionOrLabel){
cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel);
}
this.stop = function(){
cjs.MovieClip.prototype.stop.call(this);
}
}).prototype = p = new cjs.MovieClip();
// symbols:
(lib.未一体化标题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();
(lib.未标形象得到题1png复制 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(1);
}).prototype = p = new cjs.Sprite();
(lib.未标形象题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(2);
}).prototype = p = new cjs.Sprite();
(lib.未标形形色色题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(3);
}).prototype = p = new cjs.Sprite();
(lib.未标cc题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(4);
}).prototype = p = new cjs.Sprite();
(lib.未标得到的题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(5);
}).prototype = p = new cjs.Sprite();
(lib.未标题次挖出1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(6);
}).prototype = p = new cjs.Sprite();
(lib.未标题草1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(7);
}).prototype = p = new cjs.Sprite();
(lib.未标题事实上1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(8);
}).prototype = p = new cjs.Sprite();
(lib.未cc标题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(9);
}).prototype = p = new cjs.Sprite();
(lib.未长长的标题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(10);
}).prototype = p = new cjs.Sprite();
(lib.未相信我题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(11);
}).prototype = p = new cjs.Sprite();
(lib.未组织标题1 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(12);
}).prototype = p = new cjs.Sprite();
(lib.logo = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(13);
}).prototype = p = new cjs.Sprite();
(lib.人 = function() {
this.initialize(ss["start_page_atlas_1"]);
this.gotoAndStop(14);
}).prototype = p = new cjs.Sprite();
(lib.补间2 = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);
// 图层_1
this.instance = new lib.未标形象得到题1png复制();
this.instance.setTransform(703.75,12.8,0.9999,0.9999,0,21.2986,-158.7014);
this.instance_1 = new lib.未cc标题1();
this.instance_1.setTransform(865.3,26.25,1,1,0,27.7401,-152.2599);
this.instance_2 = new lib.未标形形色色题1();
this.instance_2.setTransform(269.2,-103.4,1,1,0.9819);
this.instance_3 = new lib.未标形象得到题1png复制();
this.instance_3.setTransform(-865.25,219.9,0.9999,0.9999,-36.2977);
this.instance_4 = new lib.未相信我题1();
this.instance_4.setTransform(-480.8,16.15,1,1,-22.7743);
this.instance_5 = new lib.未cc标题1();
this.instance_5.setTransform(-768.65,72.15,1,1,-27.7401);
this.instance_6 = new lib.未标形象题1();
this.instance_6.setTransform(36.8,-73.35,1,1,-1.448);
this.instance_7 = new lib.未标题事实上1();
this.instance_7.setTransform(-85.35,-124.6,1,1,-7.7966);
this.instance_8 = new lib.未标得到的题1();
this.instance_8.setTransform(-432,-259,1,1,-12.7414);
this.instance_9 = new lib.未标cc题1();
this.instance_9.setTransform(-653.3,-254.05,1,1,-12.7414);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_9},{t:this.instance_8},{t:this.instance_7},{t:this.instance_6},{t:this.instance_5},{t:this.instance_4},{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1));
this._renderFirstFrame();
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-865.2,-354.5,1730.5,709);
// stage content:
(lib.startpage = function(mode,startPosition,loop,reversed) {
if (loop == null) { loop = true; }
if (reversed == null) { reversed = false; }
var props = new Object();
props.mode = mode;
props.startPosition = startPosition;
props.labels = {};
props.loop = loop;
props.reversed = reversed;
cjs.MovieClip.apply(this,[props]);
// logo
this.instance = new lib.logo();
this.instance.setTransform(27,22);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(500));
// 文字
this.instance_1 = new lib.未长长的标题1();
this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(500));
// 人
this.instance_2 = new lib.人();
this.instance_2.setTransform(155,393);
this.timeline.addTween(cjs.Tween.get(this.instance_2).wait(500));
// 人2
this.instance_3 = new lib.未标题次挖出1();
this.instance_3.setTransform(852,450);
this.timeline.addTween(cjs.Tween.get(this.instance_3).wait(500));
// 鸟
this.instance_4 = new lib.未组织标题1();
this.instance_4.setTransform(62,304);
this.timeline.addTween(cjs.Tween.get(this.instance_4).wait(500));
// 地面
this.instance_5 = new lib.未标题草1();
this.instance_5.setTransform(-48,484);
this.timeline.addTween(cjs.Tween.get(this.instance_5).wait(500));
// 图层_8
this.instance_6 = new lib.补间2("synched",0);
this.instance_6.setTransform(662.95,1985.95,1,1,13.2241,0,0,118,1489.7);
this.timeline.addTween(cjs.Tween.get(this.instance_6).to({regX:118.1,rotation:9.1205,x:663.15,y:1986},126).to({regX:118,rotation:-3.0246,x:663},373).wait(1));
// 背景
this.instance_7 = new lib.未一体化标题1();
this.timeline.addTween(cjs.Tween.get(this.instance_7).wait(500));
this._renderFirstFrame();
}).prototype = p = new lib.AnMovieClip();
p.nominalBounds = new cjs.Rectangle(254.2,360,1471,552.7);
// library properties:
lib.properties = {
id: 'E6AAA43C27C8FB4C8B0B04676F9FCE16',
width: 1280,
height: 720,
fps: 30,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/start_page_atlas_1.png", id:"start_page_atlas_1"}
],
preloads: []
};
// bootstrap callback support:
(lib.Stage = function(canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}
an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['E6AAA43C27C8FB4C8B0B04676F9FCE16'] = {
getStage: function() { return exportRoot.stage; },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};
an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}
an.getComposition = function(id) {
return an.compositions[id];
}
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
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);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
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;
}
}
an.handleSoundStreamOnTick = function(event) {
if(!event.paused){
var stageChild = stage.getChildAt(0);
if(!stageChild.paused || stageChild.ignorePause){
stageChild.syncStreamSounds();
}
}
}
an.handleFilterCache = function(event) {
if(!event.paused){
var target = event.target;
if(target){
if(target.filterCacheList){
for(var index = 0; index < target.filterCacheList.length ; index++){
var cacheInst = target.filterCacheList[index];
if((cacheInst.startFrame <= target.currentFrame) && (target.currentFrame <= cacheInst.endFrame)){
cacheInst.instance.cache(cacheInst.x, cacheInst.y, cacheInst.w, cacheInst.h);
}
}
}
}
}
}
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;

12
src/views/Index.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="container">
<iFrame :src="`${base}start-page.html`" class="bg-iframe" border="none"></iFrame>
<div class="btn-container">
<div class="btn btn-in" @click="$router.push({ name: 'Train' })" @mouseover="hover" @mouseout="hoverEnd"></div>
<div class="btn btn-out" @click="handleQuit" @mouseover="hover" @mouseout="hoverEnd"></div>
@ -8,6 +9,7 @@
</template>
<script setup>
const base = import.meta.env.BASE_URL;
function hover() {
const audioActive = document.getElementById('audio-active');
audioActive.play();
@ -27,15 +29,19 @@ function handleQuit() {
</script>
<style scoped>
.container {
.bg-iframe {
width: 1280rem;
height: 720rem;
}
.container {
width: 1275rem;
height: 720rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
background: url(/page1/bg.jpg) no-repeat center center;
background-size: 1280rem 720rem;
/* background: url(/page1/bg.jpg) no-repeat center center; */
/* background-size: 1280rem 720rem; */
}
.btn-container {
position: absolute;

Write Preview
Loading…
Cancel
Save