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 {
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) {
margin-left: 1rem;
width: 12.9rem;
......@@ -271,6 +286,50 @@ input::-webkit-input-placeholder {
-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 {
0% {
transform: translateY(0);
......
Public/static/js/common.js
......@@ -188,9 +188,9 @@ let countDownCtx;
let posterCanvas;
let posterCtx;
//星星canvas
let starCanvas;
let starCtx;
// //星星canvas
// let starCanvas;
// let starCtx;
//home next
let homeNext = true;
......@@ -217,10 +217,10 @@ let canvasinfo = initCanvas('.countdown-canvas', 'countDownCanvas', 257, 257, tr
countDownCanvas = canvasinfo[0];
countDownCtx = canvasinfo[1];
//星星canvas定义
canvasinfo = initCanvas('.star-canvas', 'starCanvas', 640, 1238, true);
starCanvas = canvasinfo[0];
starCtx = canvasinfo[1];
// //星星canvas定义
// canvasinfo = initCanvas('.star-canvas', 'starCanvas', 640, 1238, true);
// starCanvas = canvasinfo[0];
// starCtx = canvasinfo[1];
let stars = [],
square = new Square(starCanvas.width / 2, starCanvas.height / 2),
......@@ -355,14 +355,14 @@ function initPage() {
let height = 61.9 + ((displacement + 10) / fontSize);
$('.wrap-inner,.page,.bg,.personal-wrap').css('height', height + 'rem');
}
calculationStep(target.startX, target.endX, target.startY, target.endY);
(function drawFrame() {
window.requestAnimationFrame(drawFrame, starCanvas);
ctx.fillStyle = 'rgba(255, 255, 255, 0)';
ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
animateRect(square, target);
moveStars();
}());
// calculationStep(target.startX, target.endX, target.startY, target.endY);
// (function drawFrame() {
// window.requestAnimationFrame(drawFrame, starCanvas);
// ctx.fillStyle = 'rgba(255, 255, 255, 0)';
// ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
// animateRect(square, target);
// moveStars();
// }());
}
function showPage1() {
......@@ -787,9 +787,13 @@ function addFlag(e) {
checkFlagListStatus = true;
firstChooseFlag = false;
}
target.startX = e.pageX;
target.startY = e.pageY;
calculationStep(target.startX, target.endX, target.startY, target.endY);
// target.startX = e.pageX;
// target.startY = e.pageY;
// 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');
let text = $(this).find('.flag-text').text();
......@@ -1069,118 +1073,118 @@ function getManBase64(canvas) {
function Star(x, y, rotation) {
this.x = x;
this.y = y;
this.length = 15;
this.scaleX = .1;
this.scaleY = .1;
this.rotation = rotation;
this.vx = 0;
this.vy = 0;
this.alpha = 1;
}
Star.prototype.draw = function (ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(24, 0);
ctx.lineTo(24, 24);
ctx.lineTo(0, 24);
ctx.closePath();
ctx.scale(0.4, 0.4);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.fillStyle = "#f9d073";
ctx.beginPath();
ctx.moveTo(12, 0.89);
ctx.lineTo(15.609, 8.204);
ctx.lineTo(23.682, 9.377);
ctx.lineTo(17.842, 15.071);
ctx.lineTo(19.22, 23.11);
ctx.lineTo(12, 19.315);
ctx.lineTo(4.78, 23.11);
ctx.lineTo(6.159, 15.071);
ctx.lineTo(0.318, 9.377);
ctx.lineTo(8.39, 8.204);
ctx.lineTo(12, 0.89);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
};
function Square(x, y) {
this.x = x;
this.y = y;
}
function calculationStep(startX, endX, startY, endY) {
nowX = startX;
nowY = startY;
stepX = step;
stepY = step;
differenceX = Math.abs(endX - startX);
differenceY = Math.abs(endY - startY);
var max = Math.max(differenceX, differenceY);
let minstep = 0;
if (max == differenceY) {
minstep = differenceY / differenceX;
stepY = minstep * step;
} else {
minstep = differenceX / differenceY;
stepX = minstep * step;
}
if (endX - startX < 0) {
stepX = -stepX;
}
if (endY - startY < 0) {
stepY = -stepY;
}
}
function animateRect(square, target) {
var star, counter = 0;
if ((target.startX > target.endX && nowX >= target.endX) ||
(target.startX < target.endX && nowX <= target.endX)) {
nowX += stepX;
}
if ((target.startY > target.endY && nowY >= target.endY) ||
(target.startY < target.endY && nowY <= target.endY)) {
nowY += stepY;
} else {
return false;
}
square.x = nowX;
square.y = nowY;
stars.push(new Star(square.x, square.y, Math.random() * 360));
}
function moveStars() {
for (var i = 0; i < stars.length; i++) {
var star = stars[i];
if (star.scaleX <= 1) {
star.scaleX += .05;
star.scaleY += .05;
}
if (star.alpha >= .05) {
star.alpha -= .015;
} else if (star.alpha < .1) {
stars.splice(stars[i], 1);
}
star.x += star.vx;
star.y += star.vy;
star.draw(ctx);
}
}
\ No newline at end of file
// function Star(x, y, rotation) {
// this.x = x;
// this.y = y;
// this.length = 15;
// this.scaleX = .1;
// this.scaleY = .1;
// this.rotation = rotation;
// this.vx = 0;
// this.vy = 0;
// this.alpha = 1;
// }
// Star.prototype.draw = function (ctx) {
// ctx.save();
// ctx.globalAlpha = this.alpha;
// ctx.translate(this.x, this.y);
// ctx.rotate(this.rotation * Math.PI / 180);
// ctx.beginPath();
// ctx.moveTo(0, 0);
// ctx.lineTo(24, 0);
// ctx.lineTo(24, 24);
// ctx.lineTo(0, 24);
// ctx.closePath();
// ctx.scale(0.4, 0.4);
// ctx.strokeStyle = 'rgba(0,0,0,0)';
// ctx.lineCap = 'butt';
// ctx.lineJoin = 'miter';
// ctx.miterLimit = 4;
// ctx.save();
// ctx.fillStyle = "#f9d073";
// ctx.beginPath();
// ctx.moveTo(12, 0.89);
// ctx.lineTo(15.609, 8.204);
// ctx.lineTo(23.682, 9.377);
// ctx.lineTo(17.842, 15.071);
// ctx.lineTo(19.22, 23.11);
// ctx.lineTo(12, 19.315);
// ctx.lineTo(4.78, 23.11);
// ctx.lineTo(6.159, 15.071);
// ctx.lineTo(0.318, 9.377);
// ctx.lineTo(8.39, 8.204);
// ctx.lineTo(12, 0.89);
// ctx.closePath();
// ctx.fill();
// ctx.stroke();
// ctx.restore();
// ctx.restore();
// };
// function Square(x, y) {
// this.x = x;
// this.y = y;
// }
// function calculationStep(startX, endX, startY, endY) {
// nowX = startX;
// nowY = startY;
// stepX = step;
// stepY = step;
// differenceX = Math.abs(endX - startX);
// differenceY = Math.abs(endY - startY);
// var max = Math.max(differenceX, differenceY);
// let minstep = 0;
// if (max == differenceY) {
// minstep = differenceY / differenceX;
// stepY = minstep * step;
// } else {
// minstep = differenceX / differenceY;
// stepX = minstep * step;
// }
// if (endX - startX < 0) {
// stepX = -stepX;
// }
// if (endY - startY < 0) {
// stepY = -stepY;
// }
// }
// function animateRect(square, target) {
// var star, counter = 0;
// if ((target.startX > target.endX && nowX >= target.endX) ||
// (target.startX < target.endX && nowX <= target.endX)) {
// nowX += stepX;
// }
// if ((target.startY > target.endY && nowY >= target.endY) ||
// (target.startY < target.endY && nowY <= target.endY)) {
// nowY += stepY;
// } else {
// return false;
// }
// square.x = nowX;
// square.y = nowY;
// stars.push(new Star(square.x, square.y, Math.random() * 360));
// }
// function moveStars() {
// for (var i = 0; i < stars.length; i++) {
// var star = stars[i];
// if (star.scaleX <= 1) {
// star.scaleX += .05;
// star.scaleY += .05;
// }
// if (star.alpha >= .05) {
// star.alpha -= .015;
// } else if (star.alpha < .1) {
// stars.splice(stars[i], 1);
// }
// star.x += star.vx;
// star.y += star.vy;
// star.draw(ctx);
// }
// }
\ 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