Skip to content

php / chinaamc-2020flag

Go to a project
Commit 4437ea7c by doszhang
Options

dos

parent 3392d073
Showing with 197 additions and 134 deletions
Public/static/css/index.css
...@@ -144,6 +144,21 @@ input::-webkit-input-placeholder { ...@@ -144,6 +144,21 @@ input::-webkit-input-placeholder {
position: relative; position: relative;
} }
.flag-page .flag-block .star1,
.flag-page .flag-block .star2 {
opacity: 0;
}
.flag-page .flag-block .star1.animate {
animation: star1 2.5s ease forwards;
-webkit-animation: star1 2.5s ease forwards;
}
.flag-page .flag-block .star2.animate {
animation: star2 1.875s 0.625s ease forwards;
-webkit-animation: star2 1.875s 0.625s ease forwards;
}
.flag-page .flag-block:nth-child(even) { .flag-page .flag-block:nth-child(even) {
margin-left: 1rem; margin-left: 1rem;
width: 12.9rem; width: 12.9rem;
...@@ -271,6 +286,50 @@ input::-webkit-input-placeholder { ...@@ -271,6 +286,50 @@ input::-webkit-input-placeholder {
-webkit-animation: flagadd 1s ease-in both; -webkit-animation: flagadd 1s ease-in both;
} }
@keyframes star1 {
0% {
opacity: 0;
transform: translateY(0);
}
25% {
opacity: 1;
transform: translateY(0);
}
75% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
@keyframes star2 {
0% {
opacity: 0;
transform: translateY(0);
}
33% {
opacity: 1;
transform: translateY(0);
}
66% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
@keyframes flagadd { @keyframes flagadd {
0% { 0% {
transform: translateY(0); transform: translateY(0);
......
Public/static/js/common.js
...@@ -188,9 +188,9 @@ let countDownCtx; ...@@ -188,9 +188,9 @@ let countDownCtx;
let posterCanvas; let posterCanvas;
let posterCtx; let posterCtx;
//星星canvas // //星星canvas
let starCanvas; // let starCanvas;
let starCtx; // let starCtx;
//home next //home next
let homeNext = true; let homeNext = true;
...@@ -217,10 +217,10 @@ let canvasinfo = initCanvas('.countdown-canvas', 'countDownCanvas', 257, 257, tr ...@@ -217,10 +217,10 @@ let canvasinfo = initCanvas('.countdown-canvas', 'countDownCanvas', 257, 257, tr
countDownCanvas = canvasinfo[0]; countDownCanvas = canvasinfo[0];
countDownCtx = canvasinfo[1]; countDownCtx = canvasinfo[1];
//星星canvas定义 // //星星canvas定义
canvasinfo = initCanvas('.star-canvas', 'starCanvas', 640, 1238, true); // canvasinfo = initCanvas('.star-canvas', 'starCanvas', 640, 1238, true);
starCanvas = canvasinfo[0]; // starCanvas = canvasinfo[0];
starCtx = canvasinfo[1]; // starCtx = canvasinfo[1];
let stars = [], let stars = [],
square = new Square(starCanvas.width / 2, starCanvas.height / 2), square = new Square(starCanvas.width / 2, starCanvas.height / 2),
...@@ -355,14 +355,14 @@ function initPage() { ...@@ -355,14 +355,14 @@ function initPage() {
let height = 61.9 + ((displacement + 10) / fontSize); let height = 61.9 + ((displacement + 10) / fontSize);
$('.wrap-inner,.page,.bg,.personal-wrap').css('height', height + 'rem'); $('.wrap-inner,.page,.bg,.personal-wrap').css('height', height + 'rem');
} }
calculationStep(target.startX, target.endX, target.startY, target.endY); // calculationStep(target.startX, target.endX, target.startY, target.endY);
(function drawFrame() { // (function drawFrame() {
window.requestAnimationFrame(drawFrame, starCanvas); // window.requestAnimationFrame(drawFrame, starCanvas);
ctx.fillStyle = 'rgba(255, 255, 255, 0)'; // ctx.fillStyle = 'rgba(255, 255, 255, 0)';
ctx.clearRect(0, 0, starCanvas.width, starCanvas.height); // ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
animateRect(square, target); // animateRect(square, target);
moveStars(); // moveStars();
}()); // }());
} }
function showPage1() { function showPage1() {
...@@ -787,9 +787,13 @@ function addFlag(e) { ...@@ -787,9 +787,13 @@ function addFlag(e) {
checkFlagListStatus = true; checkFlagListStatus = true;
firstChooseFlag = false; firstChooseFlag = false;
} }
target.startX = e.pageX; // target.startX = e.pageX;
target.startY = e.pageY; // target.startY = e.pageY;
calculationStep(target.startX, target.endX, target.startY, target.endY); // calculationStep(target.startX, target.endX, target.startY, target.endY);
$('.flag-page .flag-block .star1,.flag-page .flag-block .star2').addClass('animate');
setTimeout(function () {
$('.flag-page .flag-block .star1,.flag-page .flag-block .star2').removeClass('animate');
}, 2500);
$('.flag-choose-tip').removeClass('active'); $('.flag-choose-tip').removeClass('active');
let text = $(this).find('.flag-text').text(); let text = $(this).find('.flag-text').text();
...@@ -1069,118 +1073,118 @@ function getManBase64(canvas) { ...@@ -1069,118 +1073,118 @@ function getManBase64(canvas) {
function Star(x, y, rotation) { // function Star(x, y, rotation) {
this.x = x; // this.x = x;
this.y = y; // this.y = y;
this.length = 15; // this.length = 15;
this.scaleX = .1; // this.scaleX = .1;
this.scaleY = .1; // this.scaleY = .1;
this.rotation = rotation; // this.rotation = rotation;
this.vx = 0; // this.vx = 0;
this.vy = 0; // this.vy = 0;
this.alpha = 1; // this.alpha = 1;
} // }
Star.prototype.draw = function (ctx) { // Star.prototype.draw = function (ctx) {
ctx.save(); // ctx.save();
ctx.globalAlpha = this.alpha; // ctx.globalAlpha = this.alpha;
ctx.translate(this.x, this.y); // ctx.translate(this.x, this.y);
ctx.rotate(this.rotation * Math.PI / 180); // ctx.rotate(this.rotation * Math.PI / 180);
ctx.beginPath(); // ctx.beginPath();
ctx.moveTo(0, 0); // ctx.moveTo(0, 0);
ctx.lineTo(24, 0); // ctx.lineTo(24, 0);
ctx.lineTo(24, 24); // ctx.lineTo(24, 24);
ctx.lineTo(0, 24); // ctx.lineTo(0, 24);
ctx.closePath(); // ctx.closePath();
ctx.scale(0.4, 0.4); // ctx.scale(0.4, 0.4);
ctx.strokeStyle = 'rgba(0,0,0,0)'; // ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt'; // ctx.lineCap = 'butt';
ctx.lineJoin = 'miter'; // ctx.lineJoin = 'miter';
ctx.miterLimit = 4; // ctx.miterLimit = 4;
ctx.save(); // ctx.save();
ctx.fillStyle = "#f9d073"; // ctx.fillStyle = "#f9d073";
ctx.beginPath(); // ctx.beginPath();
ctx.moveTo(12, 0.89); // ctx.moveTo(12, 0.89);
ctx.lineTo(15.609, 8.204); // ctx.lineTo(15.609, 8.204);
ctx.lineTo(23.682, 9.377); // ctx.lineTo(23.682, 9.377);
ctx.lineTo(17.842, 15.071); // ctx.lineTo(17.842, 15.071);
ctx.lineTo(19.22, 23.11); // ctx.lineTo(19.22, 23.11);
ctx.lineTo(12, 19.315); // ctx.lineTo(12, 19.315);
ctx.lineTo(4.78, 23.11); // ctx.lineTo(4.78, 23.11);
ctx.lineTo(6.159, 15.071); // ctx.lineTo(6.159, 15.071);
ctx.lineTo(0.318, 9.377); // ctx.lineTo(0.318, 9.377);
ctx.lineTo(8.39, 8.204); // ctx.lineTo(8.39, 8.204);
ctx.lineTo(12, 0.89); // ctx.lineTo(12, 0.89);
ctx.closePath(); // ctx.closePath();
ctx.fill(); // ctx.fill();
ctx.stroke(); // ctx.stroke();
ctx.restore(); // ctx.restore();
ctx.restore(); // ctx.restore();
}; // };
function Square(x, y) { // function Square(x, y) {
this.x = x; // this.x = x;
this.y = y; // this.y = y;
} // }
function calculationStep(startX, endX, startY, endY) { // function calculationStep(startX, endX, startY, endY) {
nowX = startX; // nowX = startX;
nowY = startY; // nowY = startY;
stepX = step; // stepX = step;
stepY = step; // stepY = step;
differenceX = Math.abs(endX - startX); // differenceX = Math.abs(endX - startX);
differenceY = Math.abs(endY - startY); // differenceY = Math.abs(endY - startY);
var max = Math.max(differenceX, differenceY); // var max = Math.max(differenceX, differenceY);
let minstep = 0; // let minstep = 0;
if (max == differenceY) { // if (max == differenceY) {
minstep = differenceY / differenceX; // minstep = differenceY / differenceX;
stepY = minstep * step; // stepY = minstep * step;
} else { // } else {
minstep = differenceX / differenceY; // minstep = differenceX / differenceY;
stepX = minstep * step; // stepX = minstep * step;
} // }
if (endX - startX < 0) { // if (endX - startX < 0) {
stepX = -stepX; // stepX = -stepX;
} // }
if (endY - startY < 0) { // if (endY - startY < 0) {
stepY = -stepY; // stepY = -stepY;
} // }
} // }
function animateRect(square, target) { // function animateRect(square, target) {
var star, counter = 0; // var star, counter = 0;
if ((target.startX > target.endX && nowX >= target.endX) || // if ((target.startX > target.endX && nowX >= target.endX) ||
(target.startX < target.endX && nowX <= target.endX)) { // (target.startX < target.endX && nowX <= target.endX)) {
nowX += stepX; // nowX += stepX;
} // }
if ((target.startY > target.endY && nowY >= target.endY) || // if ((target.startY > target.endY && nowY >= target.endY) ||
(target.startY < target.endY && nowY <= target.endY)) { // (target.startY < target.endY && nowY <= target.endY)) {
nowY += stepY; // nowY += stepY;
} else { // } else {
return false; // return false;
} // }
square.x = nowX; // square.x = nowX;
square.y = nowY; // square.y = nowY;
stars.push(new Star(square.x, square.y, Math.random() * 360)); // stars.push(new Star(square.x, square.y, Math.random() * 360));
} // }
function moveStars() { // function moveStars() {
for (var i = 0; i < stars.length; i++) { // for (var i = 0; i < stars.length; i++) {
var star = stars[i]; // var star = stars[i];
if (star.scaleX <= 1) { // if (star.scaleX <= 1) {
star.scaleX += .05; // star.scaleX += .05;
star.scaleY += .05; // star.scaleY += .05;
} // }
if (star.alpha >= .05) { // if (star.alpha >= .05) {
star.alpha -= .015; // star.alpha -= .015;
} else if (star.alpha < .1) { // } else if (star.alpha < .1) {
stars.splice(stars[i], 1); // stars.splice(stars[i], 1);
} // }
star.x += star.vx; // star.x += star.vx;
star.y += star.vy; // star.y += star.vy;
star.draw(ctx); // star.draw(ctx);
} // }
} // }
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment