Skip to content

G
game-stydy
Commit 2bf68b74 authored by 谌继荃's avatar 谌继荃
Browse files
Options

tween

parent d55cc8b9
Hide whitespace changes
Inline Side-by-side
Showing with 466 additions and 44 deletions
src/ball.ts
View file @ 2bf68b74
...@@ -13,6 +13,9 @@ const assets = { ...@@ -13,6 +13,9 @@ const assets = {
}; };
import { createMovieClip } from "./util"; import { createMovieClip } from "./util";
const loopFlag = true;
let currentPoint;
export const addBall = async (stage: FYGE.Stage) => { export const addBall = async (stage: FYGE.Stage) => {
const ball = FYGE.Sprite.fromUrl(assets.ball); const ball = FYGE.Sprite.fromUrl(assets.ball);
const playBg = FYGE.Sprite.fromUrl(assets.playBg); const playBg = FYGE.Sprite.fromUrl(assets.playBg);
...@@ -21,7 +24,6 @@ export const addBall = async (stage: FYGE.Stage) => { ...@@ -21,7 +24,6 @@ export const addBall = async (stage: FYGE.Stage) => {
const shootLine = FYGE.Sprite.fromUrl(assets.shootLine); const shootLine = FYGE.Sprite.fromUrl(assets.shootLine);
const handSvga = await createMovieClip(assets.handSvga); const handSvga = await createMovieClip(assets.handSvga);
const initBall = () => { const initBall = () => {
ball.x = 325; ball.x = 325;
ball.y = 850; ball.y = 850;
...@@ -30,8 +32,9 @@ export const addBall = async (stage: FYGE.Stage) => { ...@@ -30,8 +32,9 @@ export const addBall = async (stage: FYGE.Stage) => {
ball.height = 100; ball.height = 100;
stage.addChild(ball); stage.addChild(ball);
ball.addEventListener(FYGE.MouseEvent.CLICK, onBallClick); ball.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onBallDown);
}; };
const initShootLine = () => { const initShootLine = () => {
shootLine.x = 375; shootLine.x = 375;
shootLine.y = 400; shootLine.y = 400;
...@@ -55,7 +58,7 @@ export const addBall = async (stage: FYGE.Stage) => { ...@@ -55,7 +58,7 @@ export const addBall = async (stage: FYGE.Stage) => {
stage.addChild(basket); stage.addChild(basket);
}; };
// 篮板 // 篮网
const initBasketNet = () => { const initBasketNet = () => {
basketNet.x = 328; basketNet.x = 328;
basketNet.y = 350; basketNet.y = 350;
...@@ -69,12 +72,7 @@ export const addBall = async (stage: FYGE.Stage) => { ...@@ -69,12 +72,7 @@ export const addBall = async (stage: FYGE.Stage) => {
handSvga.y = 700; handSvga.y = 700;
handSvga.width = 100; handSvga.width = 100;
handSvga.height = 93; handSvga.height = 93;
const movieclip = stage.addChild(handSvga); stage.addChild(handSvga);
};
const endBall = () => {
shootLine.visible = true;
handSvga.visible = true;
}; };
initPlayBg(); initPlayBg();
...@@ -84,18 +82,87 @@ export const addBall = async (stage: FYGE.Stage) => { ...@@ -84,18 +82,87 @@ export const addBall = async (stage: FYGE.Stage) => {
initShootLine(); initShootLine();
initHandSvga(); initHandSvga();
function onBallClick() { // 鼠标抬起
stage.addEventListener(FYGE.MouseEvent.MOUSE_UP, onBallUp, this);
function onBallUp(event: FYGE.MouseEvent) {
console.log(event.stageX, event.stageY, currentPoint);
if (!currentPoint) return false;
if (event.stageY >= 946 || !currentPoint) return false;
//鼠标抬起到中间的偏移量
let mouseOffsetX = event.stageX - 375;
console.log("mouseOffsetX", mouseOffsetX);
if (mouseOffsetX > 100) {
console.log("右边");
onBallOther("right");
} else if (mouseOffsetX < -100) {
console.log("左边");
onBallOther("left");
} else {
console.log("中间");
onBallNormal();
}
}
// 鼠标按下
function onBallDown(event: FYGE.MouseEvent) {
shootLine.visible = false; shootLine.visible = false;
handSvga.visible = false; handSvga.visible = false;
const tw = FYGE.Tween.get(ball); currentPoint = { x: event.stageX, y: event.stageY };
tw.to( }
{ x: ball.x + 35, y: 200, scaleX: 0.25, scaleY: 0.25 },
500,
FYGE.Ease.quadOut
) function onBallNormal() {
.wait(100) const ballTween = FYGE.Tween.get(ball);
.call(() => {})
.to({ y: 680 }, 500, FYGE.Ease.quadIn) ballTween
.call(() => {}); .to(
{ x: ball.x + 35, y: 200, scaleX: 0.25, scaleY: 0.25 },
500,
FYGE.Ease.quadInOut
)
.to({ y: 650 }, 500, FYGE.Ease.quadIn)
.to({ y: 550 }, 200, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 605 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 625 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
}
function onBallOther(type: string) {
const ballTween = FYGE.Tween.get(ball);
ballTween
.to(
{
x: type === "right" ? ball.x + 80 : ball.x - 25,
y: 280,
scaleX: 0.25,
scaleY: 0.25,
},
500,
FYGE.Ease.quadInOut
)
.to(
{
x: type === "right" ? ball.x + 35 : ball.x + 30,
y: 350,
},
500,
FYGE.Ease.quadIn
)
.to({ y: 650 }, 500, FYGE.Ease.quadIn)
.to({ y: 550 }, 200, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 605 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 625 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
} }
}; };
src/ballMove.ts 0 → 100644
View file @ 2bf68b74
const assets = {
handSvga:
"//yun.duiba.com.cn/aurora/assets/dbfd52bd39d2c67e64853c6293685f104adcc5fd.svga",
ball: "//yun.duiba.com.cn/aurora/assets/230dcad556eee819b4ebe9dcbc5708ef7fa7d697.png",
basket:
"//yun.duiba.com.cn/aurora/assets/3231132b4ad652fd713ed297ff1b6ab894245e31.png",
basketNet:
"//yun.duiba.com.cn/aurora/assets/68c8c61408de20390bd2f7b7a358b62c9987567a.png",
playBg:
"//yun.duiba.com.cn/aurora/assets/c4c76b34a661f095e5838946a8950b4762820cdd.jpeg",
shootLine:
"//yun.duiba.com.cn/aurora/assets/e473f0c235ba529ec58371db4c022c63401f00d0.png",
};
import { createMovieClip } from "./util";
let basketNetTween: any = "";
const loopFlag = true;
let currentPoint;
export const addBall = async (stage: FYGE.Stage) => {
const ball = FYGE.Sprite.fromUrl(assets.ball);
const playBg = FYGE.Sprite.fromUrl(assets.playBg);
const basket = FYGE.Sprite.fromUrl(assets.basket);
const basketNet = FYGE.Sprite.fromUrl(assets.basketNet);
const shootLine = FYGE.Sprite.fromUrl(assets.shootLine);
const handSvga = await createMovieClip(assets.handSvga);
const initBall = () => {
ball.x = 325;
ball.y = 850;
ball.width = 100;
ball.height = 100;
stage.addChild(ball);
ball.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onBallDown);
};
const initShootLine = () => {
shootLine.x = 375;
shootLine.y = 400;
shootLine.width = 42;
shootLine.height = 478;
stage.addChild(shootLine);
};
const initPlayBg = () => {
playBg.y = -270;
playBg.width = 750;
playBg.height = 1624;
stage.addChild(playBg);
};
// 篮筐
const initBasket = () => {
basket.x = 210;
basket.y = 135;
basket.width = 311;
basket.height = 600;
stage.addChild(basket);
};
// 篮网
const initBasketNet = () => {
basketNet.x = 328;
basketNet.y = 350;
basketNet.width = 100;
basketNet.height = 93;
stage.addChild(basketNet);
};
const initHandSvga = async () => {
handSvga.x = 458;
handSvga.y = 700;
handSvga.width = 100;
handSvga.height = 93;
stage.addChild(handSvga);
};
initPlayBg();
initBasket();
initBasketNet();
initBall();
initShootLine();
initHandSvga();
// 鼠标抬起
stage.addEventListener(FYGE.MouseEvent.MOUSE_UP, onBallUp, this);
function onBallUp(event: FYGE.MouseEvent) {
console.log(event.stageX, event.stageY, currentPoint);
if (!currentPoint) return false;
if (event.stageY >= 946 || !currentPoint) return false;
onBallNormal();
}
// 鼠标按下
function onBallDown(event: FYGE.MouseEvent) {
shootLine.visible = false;
handSvga.visible = false;
currentPoint = { x: event.stageX, y: event.stageY };
}
// 篮网移动
function basketNetMove() {
basketNetTween = FYGE.Tween.get(basketNet, { loop: loopFlag });
basketNetTween
.to({ x: 420 }, 500, FYGE.Ease.quadOut)
.to({ x: 275 }, 500, FYGE.Ease.quadOut);
}
basketNetMove();
function onBallNormal() {
const tw = FYGE.Tween.get(ball);
tw.to(
{ x: ball.x + 35, y: 200, scaleX: 0.25, scaleY: 0.25 },
500,
FYGE.Ease.quadInOut
)
.to({ y: 300 }, 500, FYGE.Ease.quadInOut)
.call(() => {
console.log("basketNetTween", basketNetTween.paused);
FYGE.Tween.get(basketNet).pause(basketNetTween);
console.log("basketNet--x", basketNet.x);
})
// 拿到暂停后的篮网x
.to({ x: basketNet.x + 30, y: 350 }, 500, FYGE.Ease.quadIn)
.to({ y: 650 }, 500, FYGE.Ease.quadIn)
.to({ y: 550 }, 200, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 605 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn)
.to({ y: 625 }, 100, FYGE.Ease.quartOut)
.to({ y: 650 }, 50, FYGE.Ease.quadIn);
}
};
src/blindBox.ts 0 → 100644
View file @ 2bf68b74
const SVGA_DATA = {
boxBot:
"//yun.duiba.com.cn/aurora/assets/2dcf3c143ed68cd983a032ccd0c6d3554911c7ee.svga",
boxMid:
"//yun.duiba.com.cn/aurora/assets/e44b7ce6520858b3e2b7063458819f25d202323b.svga",
boxTop:
"//yun.duiba.com.cn/aurora/assets/acc4eabc4a02a41da52b5661c9fdc58c3a68f5d1.svga",
scoreboard:
"//yun.duiba.com.cn/aurora/assets/4e2eddf79e11093aa60c85dbb02a6bb9f4fa3cf1.svga",
tips: "//yun.duiba.com.cn/aurora/assets/f45f455b9d87f27650a577be25801d2c8345c45b.svga",
ripple:
"//yun.duiba.com.cn/aurora/assets/a3e8107524caec2d92b3996f6d166aadcf50b07f.svga",
};
const IMG_DATA = {
boxBg:
"//yun.duiba.com.cn/aurora/assets/8924aa76f7c10be83021c3e53f90e9cd26f99234.png",
coin1:
"//yun.duiba.com.cn/aurora/assets/51a6bcc6dea3de23a794eee8ec4f78b7b28f67c8.png",
coin2:
"//yun.duiba.com.cn/aurora/assets/e935016b585aba3d4707ff9ce4b6a507f234f1b8.png",
coin3:
"//yun.duiba.com.cn/aurora/assets/d7e98a64113c3d09d6e11d456ed9cac66fca5edc.png",
};
// 随机数
let originNum: number = -1;
let startFlag = false;
import { createMovieClip, playOnce3, randomNum } from "./util";
export const addBlindBox = async (gameContainer: FYGE.Container) => {
const boxBg = FYGE.Sprite.fromUrl(IMG_DATA.boxBg);
const shp = new FYGE.Graphics();
const coin1 = FYGE.Sprite.fromUrl(IMG_DATA.coin1);
const coin2 = FYGE.Sprite.fromUrl(IMG_DATA.coin2);
const coin3 = FYGE.Sprite.fromUrl(IMG_DATA.coin3);
const initStartBtn = () => {
shp.beginFill(0x800080);
shp.drawCircle(375, 1100, 100);
shp.endFill();
gameContainer.addChild(shp);
shp.addEventListener(FYGE.MouseEvent.CLICK, onStartBtnClick);
};
const initBoxBg = () => {
boxBg.y = -206;
boxBg.width = 750;
boxBg.height = 1624;
gameContainer.addChild(boxBg);
};
const initRandomNum = () => {
if (originNum === -1) {
originNum = randomNum(3);
} else {
const nowNum0 = randomNum(3);
// 和上一次数字相同，递归下
if (nowNum0 == originNum) {
initRandomNum();
} else {
originNum = nowNum0;
}
}
};
const initCoins = () => {
coin1.x = 230;
coin1.y = 700;
coin2.x = 370;
coin2.y = 700;
coin3.x = 450;
coin3.y = 700;
gameContainer.addChild(coin1);
gameContainer.addChild(coin2);
gameContainer.addChild(coin3);
};
initBoxBg();
initStartBtn();
initCoins();
function coin1Move() {
const tw = FYGE.Tween.get(coin1);
tw.to({ y: 400 }, 500, FYGE.Ease.quadOut).to(
{ y: 700 },
500,
FYGE.Ease.quadOut
);
}
function coin2Move() {
const tw = FYGE.Tween.get(coin2);
tw.to({ y: 400 }, 500, FYGE.Ease.quadOut).to(
{ y: 700 },
500,
FYGE.Ease.quadOut
);
}
function coin3Move() {
const tw = FYGE.Tween.get(coin3);
tw.to({ y: 400 }, 500, FYGE.Ease.quadOut).to(
{ y: 700 },
500,
FYGE.Ease.quadOut
);
}
function onStartBtnClick() {
if (!startFlag) return;
console.log("onStartBtnClick");
actions[5].visible = true;
actions[5].gotoAndPlay(1);
[0, 1, 2].forEach((item, ind) => {
actions[ind].gotoAndPlay(1);
playOnce3(actions[ind]);
});
playOnce3(actions[5]).then(() => {
actions[5].visible = false;
});
initRandomNum();
console.log("originNum", originNum);
if (originNum === 0) {
coin1Move();
} else if (originNum === 1) {
coin2Move();
} else if (originNum === 2) {
coin3Move();
}
}
console.log("资源加载中,请稍后....");
const actions = await Promise.all(
Object.keys(SVGA_DATA).map((actionId) =>
createMovieClip(SVGA_DATA[actionId])
)
);
console.log("资源加载完成,可以显示了");
actions.forEach((action, index) => {
gameContainer.addChild(action);
if (index < 3) {
actions[index].x = 0;
actions[index].y = 540;
// actions[index].visible = false;
actions[index].stop();
} else if (index === 3) {
actions[index].x = 0;
actions[index].y = -150;
playOnce3(actions[index]);
} else if (index === 4) {
actions[index].x = 0;
actions[index].y = 440;
playOnce3(actions[index]).then(() => {
actions[index].parent &&
actions[index].parent.removeChild(actions[index]);
startFlag = true;
});
} else {
actions[index].x = 215;
actions[index].y = 940;
actions[index].visible = false;
actions[index].stop();
}
});
};
src/main.ts
View file @ 2bf68b74
import { addBall } from "./ball"; import { addBall } from "./ballMove";
var canvas: any = document.getElementById("canvas") var canvas: any = document.getElementById("canvas");
canvas.width = document.body.clientWidth * 1 canvas.width = document.body.clientWidth * 1;
canvas.height = document.body.clientHeight * 1 canvas.height = document.body.clientHeight * 1;
var stage = new FYGE.Stage( var stage = new FYGE.Stage(
canvas, canvas,
750, 750,
1624, 1624,
canvas.width, canvas.width,
canvas.height, canvas.height,
FYGE.RENDERER_TYPE.CANVAS, FYGE.RENDERER_TYPE.CANVAS,
false, false,
false false
) );
var mouseEvent = stage.onMouseEvent.bind(stage); var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false); canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false); canvas.addEventListener("touchmove", mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false); canvas.addEventListener("touchend", mouseEvent, false);
stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this); stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
function onInitStage() { function onInitStage() {
addBall(stage); addBall(stage);
} }
(function loop() { (function loop() {
FYGE.Tween.flush() FYGE.Tween.flush();
stage.flush(); stage.flush();
requestAnimationFrame(loop); requestAnimationFrame(loop);
})(); })();
\ No newline at end of file
src/svgaSpeed.ts 0 → 100644
View file @ 2bf68b74
import { createMovieClip } from "./util";
export const changespeedDemo = async (gameContainer: FYGE.Container) => {
const jump = await createMovieClip(
"//yun.duiba.com.cn/aurora/assets/dd2fa41dc91642a08c79a1ee38f80e1f8c319075.svga"
);
gameContainer.addChild(jump);
jump.gotoAndStop(1);
let currentFrame = 1;
const MULTI = 4; // 设置倍数
function onEnterFrame() {
currentFrame = currentFrame + MULTI;
jump.gotoAndStop(currentFrame);
if (currentFrame > jump.totalFrames) currentFrame = 1;
}
jump.addEventListener(FYGE.Event.ENTER_FRAME, onEnterFrame);
};
src/tween.ts
View file @ 2bf68b74
...@@ -29,10 +29,25 @@ export const addTween = (stage: FYGE.Stage) => { ...@@ -29,10 +29,25 @@ export const addTween = (stage: FYGE.Stage) => {
}) })
.wait(100); .wait(100);
}; };
addTweenObjBtn(); // addTweenObjBtn();
const renderText = (index) => { const renderText = (index) => {
console.log("index", index); console.log("index", index);
}; };
const renderB = () => {
/// 代码段 B
var obj = { x: 0 };
var funcChange = function (): void {
console.log(this.x);
};
FYGE.Tween.get(obj, { onChange: funcChange, onChangeObj: obj }).to(
{ x: 600 },
1000,
FYGE.Ease.backInOut
);
};
// renderB();
// //
const addAnimation = () => { const addAnimation = () => {
let shp = new FYGE.Shape(); let shp = new FYGE.Shape();
...@@ -40,9 +55,13 @@ export const addTween = (stage: FYGE.Stage) => { ...@@ -40,9 +55,13 @@ export const addTween = (stage: FYGE.Stage) => {
shp.drawRect(50, 0, 200, 400); shp.drawRect(50, 0, 200, 400);
shp.endFill(); shp.endFill();
stage.addChild(shp); stage.addChild(shp);
const tw = FYGE.Tween.get(shp, { loop: true });
var funcChange = function (): void {
console.log(this.y);
};
const tw = FYGE.Tween.get(shp, { onChange: funcChange, onChangeObj: shp });
// 缓出 减速 FYGE.Ease.quadOut // 缓出 减速 FYGE.Ease.quadOut
tw.set({ y: -200 }).to({ y: 200 }, 1000, FYGE.Ease.quartOut); tw.set({ y: -200 }).to({ y: 200 }, 1000, FYGE.Ease.quadOut);
// 缓入 加速 FYGE.Ease.quartIn // 缓入 加速 FYGE.Ease.quartIn
// tw.set({ y: 200 }).to({ y: shp.stage.stageHeight }, 1000, FYGE.Ease.quartIn); // tw.set({ y: 200 }).to({ y: shp.stage.stageHeight }, 1000, FYGE.Ease.quartIn);
// 缓入缓出 标准曲线 // 缓入缓出 标准曲线
...@@ -51,5 +70,5 @@ export const addTween = (stage: FYGE.Stage) => { ...@@ -51,5 +70,5 @@ export const addTween = (stage: FYGE.Stage) => {
// .to({ rotation: 40 }, 3000, FYGE.Ease.quartInOut) // .to({ rotation: 40 }, 3000, FYGE.Ease.quartInOut)
// .to({ rotation: -40 }, 3000, FYGE.Ease.quartInOut); // .to({ rotation: -40 }, 3000, FYGE.Ease.quartInOut);
}; };
// addAnimation(); addAnimation();
}; };
src/util.ts
View file @ 2bf68b74
...@@ -77,3 +77,9 @@ export function getSvgaImage(svga: FYGE.MovieClip, imageKey: string) { ...@@ -77,3 +77,9 @@ export function getSvgaImage(svga: FYGE.MovieClip, imageKey: string) {
if (!find) throw new Error(`没有找到imageKey=${imageKey}的图片`); if (!find) throw new Error(`没有找到imageKey=${imageKey}的图片`);
return find; return find;
} }
// 随机数
export function randomNum(numLength) {
const randomNum = Math.floor(Math.random() * numLength);
return randomNum;
}
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