Commit 9d62b45b authored by limingzhe's avatar limingzhe

first

parent 058295b3
......@@ -12,6 +12,7 @@
<div class="item-box">
<span>item-{{i+1}}</span>
<app-upload-image-with-preview
style="width: 100%"
[picUrl]="it.pic_url"
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import {NzMessageService} from 'ng-zorro-antd';
......@@ -14,7 +15,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
KEY = 'hw_000';
KEY = 'dfzx_12';
......@@ -35,7 +36,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
constructor(private appRef: ApplicationRef) {
constructor(private appRef: ApplicationRef,
private message: NzMessageService) {
}
......@@ -166,6 +168,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
addPic() {
if (this.picArr.length >= 15) {
this.message.error('最多添加15个');
return;
}
this.picArr.push({
pic_url: '',
audio_url: '',
......
......@@ -1495,6 +1495,38 @@ export function showPopParticle(img, pos, parent) {
}
export function bezierMove(item, p0, p1, p2, time, callback = null, easing = null) {
const obj = {factor: 0};
const tween = new TWEEN.Tween(obj).to({factor: 1}, time * 1000);
if (callback) {
tween.onComplete(() => {
callback();
});
}
if (easing) {
tween.easing(easing);
}
tween.onUpdate( (obj, p) => {
// 起点P0 控制点P1 终点P2
// (1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2
const t = obj.factor;
item.x = (1 - t) * (1 - t) * p0.x + 2 * t * (1 - t) * p1.x + t * t * p2.x;
item.y = (1 - t) * (1 - t) * p0.y + 2 * t * (1 - t) * p1.y + t * t * p2.y;
});
tween.start();
}
export function shake(item, time = 0.5, callback = null, rate = 1) {
......
......@@ -6,7 +6,7 @@ import {
moveItem,
rotateItem,
removeItemFromArr,
ShapeRect,
ShapeRect, randomSortByArr, scaleItem, bezierMove,
} from './Unit';
import {res, resAudio} from './resources';
......@@ -79,16 +79,26 @@ export class PlayComponent implements OnInit, OnDestroy {
canTouch = true;
KEY = 'hw_000';
KEY = 'dfzx_12';
// -----
picArr;
starArr;
curItem;
pageLabel;
leftBtn;
rightBtn;
bgLayer;
curPageIndex;
flashlight;
selectArr;
selectArrIndex;
mask;
itemArr;
nextBtn;
randomNum = 4;
......@@ -160,9 +170,9 @@ export class PlayComponent implements OnInit, OnDestroy {
const picArr = [];
for (let i = 0; i < 2; i++) {
for (let i = 0; i < 10; i++) {
picArr.push({
'pic_url': 'assets/play/default/pic.jpg',
'pic_url': 'assets/play/default/pic.png',
'audio_url': 'assets/play/default/audio.mp3'
});
}
......@@ -222,6 +232,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.picIndex = 0;
// this.picArr = randomSortByArr(this.picArr);
}
......@@ -303,7 +315,8 @@ export class PlayComponent implements OnInit, OnDestroy {
};
addOneAudio('click', this.rawAudios.get('click'), 0.3);
addOneAudio('leave', this.rawAudios.get('leave'), 0.3);
addOneAudio('select', this.rawAudios.get('select'), 0.3);
// addOneAudio('angry', this.rawAudios.get('angry'), 1);
// addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1);
......@@ -447,14 +460,65 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBg();
this.initPic();
this.initBottomRight();
this.initMask();
this.initFlashlight();
this.refreshPageLabel();
this.initStar();
// this.initBottomRight();
//
//
// this.refreshPageLabel();
}
initStar() {
this.starArr = [];
this.showStarAnima();
}
showStarAnima() {
const star = new MySprite();
star.init(this.images.get('star'));
star.setScaleXY(0);
const randomS = (0.2 + Math.random() * 0.8) * this.mapScale;
const randomT = 0.2 + Math.random() * 0.2;
const randomX = this.canvasWidth * Math.random();
const randomY = this.canvasHeight * Math.random();
star.x = randomX;
star.y = randomY;
this.starArr.push(star);
scaleItem(star, randomS, randomT, () => {
const randomDelay = 0.5 * Math.random() * 1;
setTimeout( () => {
scaleItem(star, 0, randomT, () => {
removeItemFromArr(this.starArr, star);
}, TWEEN.Easing.Quadratic.In);
}, randomDelay * 1000);
}, TWEEN.Easing.Quadratic.Out);
setTimeout(() => {
this.showStarAnima();
}, 300 * Math.random());
}
initBottomRight() {
const px = this.canvasWidth - 100 * this.mapScale;
......@@ -532,6 +596,40 @@ export class PlayComponent implements OnInit, OnDestroy {
initPic() {
let itemW = 200 * this.mapScale;
const edge = 50 * this.mapScale;
const disW = (this.canvasWidth - itemW * 5 - edge * 2) / 4;
const offX = edge + itemW / 2;
const bottomH = 100 * this.mapScale;
let disH = (this.canvasHeight - bottomH - itemW * 3 - edge) / 2;
const offY = this.canvasHeight - (bottomH + itemW / 2);
if (disH < 0) {
disH = 0;
itemW = (this.canvasHeight - bottomH) / 3;
}
console.log('disH: ', disH);
let posArr = [];
for (let i = 0; i < 15; i++) {
const x = offX + (itemW + disW) * (i % 5);
const y = offY - (itemW + disH) * Math.floor(i / 5);
posArr.push({x: x, y: y});
// this.bgLayer.addChild(pic);
}
posArr = randomSortByArr(posArr);
this.itemArr = [];
for (let i = 0; i < this.picArr.length; i++) {
......@@ -539,43 +637,99 @@ export class PlayComponent implements OnInit, OnDestroy {
const pic = new MySprite();
pic.init(this.images.get(data.pic_url));
// pic.x = this.canvasWidth / 2;
// pic.y = this.canvasHeight / 2;
pic.x = posArr[i].x;
pic.y = posArr[i].y;
pic['data'] = data;
console.log(`x: ${pic.x}, y: ${pic.y}`);
const maxW = this.canvasWidth * 0.9;
const maxH = this.canvasHeight * 0.9;
const sx = maxW / pic.width;
const sy = maxH / pic.height;
const sx = itemW / pic.width;
const sy = itemW / pic.height;
const s = Math.min(sx, sy);
pic.setScaleXY(s);
// pic.setRadius(50 * this.mapScale);
this.itemArr.push(pic);
this.renderArr.push(pic);
}
}
const picBg = new ShapeRect();
picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY);
picBg.x = this.canvasWidth / 2 + this.canvasWidth * i;
picBg.y = this.canvasHeight / 2;
picBg.init();
picBg.fillColor = '#ffffff';
// picBg.setRadius(50 * this.mapScale);
picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)');
// picBg.alpha = 0;
// this.renderArr.push(picBg);
// this.renderArr.push(picShadow);
picBg.addChild(pic);
initMask() {
this.bgLayer.addChild(picBg);
const mask = new MySprite();
mask.init(this.images.get('mask'));
mask.setScaleXY(this.mapScale);
mask.x = mask.width / 2 * mask.scaleX;
mask.y = mask.height / 2 * mask.scaleY;
this.mask = mask;
this.renderArr.push(mask);
}
initFlashlight() {
const flashlight = new MySprite();
flashlight.init(this.images.get('flashlight'));
flashlight.setScaleXY(this.mapScale);
flashlight.x = this.canvasWidth - flashlight.width / 2 * flashlight.scaleX;
flashlight.y = this.canvasHeight - flashlight.height / 2 * flashlight.scaleY;
this.renderArr.push(flashlight);
this.flashlight = flashlight;
const start = new MySprite();
start.init(this.images.get('start'));
flashlight.addChild(start);
const moveUp = () => {
moveItem(start, 0, -50, 2, () => {
moveDown();
}, TWEEN.Easing.Quadratic.InOut);
};
const moveDown = () => {
moveItem(start, 0, 0, 2, () => {
moveUp();
}, TWEEN.Easing.Quadratic.InOut);
};
moveUp();
const nextBtn = new MySprite();
nextBtn.init(this.images.get('next'));
nextBtn.setScaleXY(this.mapScale);
nextBtn.x = this.canvasWidth + nextBtn.width / 2 * nextBtn.scaleX;
nextBtn.y = this.canvasHeight - nextBtn.height / 2 * nextBtn.scaleY;
this.renderArr.push(nextBtn);
this.nextBtn = nextBtn;
nextBtn['baseX'] = nextBtn.x;
nextBtn['baseY'] = nextBtn.y;
nextBtn['targetX'] = nextBtn.x - nextBtn.width * nextBtn.scaleX;
nextBtn['targetY'] = nextBtn.y;
}
showNextBtn() {
moveItem(this.nextBtn, this.nextBtn['targetX'], this.nextBtn['targetY'], 0.5, () => {
this.canTouch = true;
}, TWEEN.Easing.Quadratic.InOut);
}
hideNextBtn() {
moveItem(this.nextBtn, this.nextBtn['baseX'], this.nextBtn['baseY'], 0.3, () => {
}, TWEEN.Easing.Quadratic.Out);
}
......@@ -623,16 +777,20 @@ export class PlayComponent implements OnInit, OnDestroy {
}
if (this.checkClickTarget(this.leftBtn)) {
this.lastPageClick();
if (this.checkClickTarget(this.flashlight)) {
this.clickFlashlight();
return;
}
if (this.checkClickTarget(this.rightBtn)) {
this.nextPageClick();
if (this.checkClickTarget(this.nextBtn)) {
this.nextBtnClick();
return;
}
if (this.checkClickTarget(this.curItem)) {
this.clickCurItem();
return;
}
}
......@@ -651,6 +809,127 @@ export class PlayComponent implements OnInit, OnDestroy {
}
clickCurItem() {
console.log(' in clickCurItem');
const item = this.curItem;
const audio = this.audioObj[ item.data.audio_url ];
if (audio) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
}
nextBtnClick() {
this.canTouch = false;
this.hideNextBtn();
this.selectItem();
}
clickFlashlight() {
this.canTouch = false;
const targetY = this.canvasHeight + this.flashlight.height / 2 * this.flashlight.scaleY;
moveItem(this.flashlight, this.flashlight.x, targetY, 0.3, () => {
this.selectItem();
});
this.playAudio('leave');
}
selectItem() {
const curItem = this.itemArr[this.picIndex];
this.curItem = curItem;
let tmpArr = this.itemArr.concat();
removeItemFromArr(tmpArr, curItem);
tmpArr = randomSortByArr(tmpArr);
while(tmpArr.length < this.randomNum) {
tmpArr = tmpArr.concat((tmpArr) );
}
this.selectArr = tmpArr;
this.selectArrIndex = 0;
this.showSelectAnima();
this.picIndex ++;
if (this.picIndex >= this.itemArr.length) {
this.picIndex = 0;
}
this.playAudio('select', true);
}
showSelectAnima() {
if (this.selectArrIndex >= this.randomNum) {
this.showSelectAnimaEnd();
return;
}
const item = this.selectArr[this.selectArrIndex];
// const random = ( 20 + Math.random() * 250) * this.mapScale;
// let randomX = random;
// let randomY = random;
// if (Math.random() < 0.5) {
// randomX *= -1;
// }
// if (Math.random() < 0.5) {
// randomY *= -1;
// }
const p1 = {x: this.mask.x, y: this.mask.y};
const p2 = {x: Math.random() * this.canvasWidth, y: Math.random() * this.canvasHeight};
const p3 = {x: item.x, y: item.y};
bezierMove(this.mask, p1, p2, p3, 0.6, () => {
this.showSelectAnima();
}, TWEEN.Easing.Quadratic.InOut);
// moveItem(this.mask, item.x, item.y, 0.37, () => {
// this.showSelectAnima();
// }, TWEEN.Easing.Quadratic.InOut);
this.selectArrIndex ++;
}
showSelectAnimaEnd() {
const curItem = this.curItem;
moveItem(this.mask, curItem.x, curItem.y, 0.5, () => {
// this.showSelectAnima();
this.showNextBtn();
}, TWEEN.Easing.Quadratic.InOut);
}
nextPageClick() {
console.log(' in leftBtnClick');
......@@ -721,6 +1000,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.updateArr(this.renderArr);
this.updateArr(this.starArr);
}
......
......@@ -5,6 +5,16 @@ const res = [
['btn_right', "assets/play/btn_right.png"],
['text_bg', "assets/play/text_bg.png"],
['mask', "assets/play/mask.png"],
['flashlight', "assets/play/flashlight.png"],
['start', "assets/play/start.png"],
['next', "assets/play/next.png"],
['star', "assets/play/star.png"],
['pic', "assets/play/default/pic.png"],
];
......@@ -13,7 +23,8 @@ const res = [
const resAudio = [
// ['click', "assets/play/music/click.mp3"],
['leave', "assets/play/music/leave.mp3"],
['select', "assets/play/music/select.mp3"],
......
src/assets/play/bg.jpg

25.8 KB | W: | H:

src/assets/play/bg.jpg

803 KB | W: | H:

src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
src/assets/play/bg.jpg
  • 2-up
  • Swipe
  • Onion skin
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 to comment