tween

src/ball.ts

@@ -13,6 +13,9 @@ const assets = {
 };
 import { createMovieClip } from "./util";
 
+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);
@@ -21,7 +24,6 @@ export const addBall = async (stage: FYGE.Stage) => {
   const shootLine = FYGE.Sprite.fromUrl(assets.shootLine);
   const handSvga = await createMovieClip(assets.handSvga);
 
-
   const initBall = () => {
     ball.x = 325;
     ball.y = 850;
@@ -30,8 +32,9 @@ export const addBall = async (stage: FYGE.Stage) => {
     ball.height = 100;
 
     stage.addChild(ball);
-    ball.addEventListener(FYGE.MouseEvent.CLICK, onBallClick);
+    ball.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onBallDown);
   };
+
   const initShootLine = () => {
     shootLine.x = 375;
     shootLine.y = 400;
@@ -55,7 +58,7 @@ export const addBall = async (stage: FYGE.Stage) => {
     stage.addChild(basket);
   };
 
-  // 篮板
+  // 篮网
   const initBasketNet = () => {
     basketNet.x = 328;
     basketNet.y = 350;
@@ -69,12 +72,7 @@ export const addBall = async (stage: FYGE.Stage) => {
     handSvga.y = 700;
     handSvga.width = 100;
     handSvga.height = 93;
-    const movieclip = stage.addChild(handSvga);
-  };
-
-  const endBall = () => {
-    shootLine.visible = true;
-    handSvga.visible = true;
+    stage.addChild(handSvga);
   };
 
   initPlayBg();
@@ -84,18 +82,87 @@ export const addBall = async (stage: FYGE.Stage) => {
   initShootLine();
   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;
     handSvga.visible = false;
-    const tw = FYGE.Tween.get(ball);
-    tw.to(
+    currentPoint = { x: event.stageX, y: event.stageY };
+  }
+
+
+
+  function onBallNormal() {
+    const ballTween = FYGE.Tween.get(ball);
+
+    ballTween
+      .to(
         { x: ball.x + 35, y: 200, scaleX: 0.25, scaleY: 0.25 },
         500,
-      FYGE.Ease.quadOut
+        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
       )
-      .wait(100)
-      .call(() => {})
-      .to({ y: 680 }, 500, FYGE.Ease.quadIn)
-      .call(() => {});
+      .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

+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

+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

-import { addBall } from "./ball";
-var canvas: any = document.getElementById("canvas")
-canvas.width = document.body.clientWidth * 1
-canvas.height = document.body.clientHeight * 1
+import { addBall } from "./ballMove";
+var canvas: any = document.getElementById("canvas");
+canvas.width = document.body.clientWidth * 1;
+canvas.height = document.body.clientHeight * 1;
 var stage = new FYGE.Stage(
   canvas,
   750,
@@ -11,12 +11,12 @@ var stage = new FYGE.Stage(
   FYGE.RENDERER_TYPE.CANVAS,
   false,
   false
-)
+);
 
 var mouseEvent = stage.onMouseEvent.bind(stage);
 canvas.addEventListener("touchstart", mouseEvent, false);
-canvas.addEventListener('touchmove', mouseEvent, false);
-canvas.addEventListener('touchend', mouseEvent, false);
+canvas.addEventListener("touchmove", mouseEvent, false);
+canvas.addEventListener("touchend", mouseEvent, false);
 
 stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
 
@@ -25,7 +25,7 @@ function onInitStage() {
 }
 
 (function loop() {
-    FYGE.Tween.flush()
+  FYGE.Tween.flush();
   stage.flush();
   requestAnimationFrame(loop);
 })();

src/svgaSpeed.ts

+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

@@ -29,10 +29,25 @@ export const addTween = (stage: FYGE.Stage) => {
       })
       .wait(100);
   };
-  addTweenObjBtn();
+  // addTweenObjBtn();
   const renderText = (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 = () => {
     let shp = new FYGE.Shape();
@@ -40,9 +55,13 @@ export const addTween = (stage: FYGE.Stage) => {
     shp.drawRect(50, 0, 200, 400);
     shp.endFill();
     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
-    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
     // tw.set({ y: 200 }).to({ y: shp.stage.stageHeight }, 1000, FYGE.Ease.quartIn);
     // 缓入缓出 标准曲线
@@ -51,5 +70,5 @@ export const addTween = (stage: FYGE.Stage) => {
     //   .to({ rotation: 40 }, 3000, FYGE.Ease.quartInOut)
     //   .to({ rotation: -40 }, 3000, FYGE.Ease.quartInOut);
   };
-  // addAnimation();
+  addAnimation();
 };

src/util.ts

@@ -77,3 +77,9 @@ export function getSvgaImage(svga: FYGE.MovieClip, imageKey: string) {
   if (!find) throw new Error(`没有找到imageKey=${imageKey}的图片`);
   return find;
 }
+
+// 随机数
+export function randomNum(numLength) {
+  const randomNum = Math.floor(Math.random() * numLength);
+  return randomNum;
+}