游戏飘金币动画实现

1,240 阅读1分钟

写在前面

当金币掉落后,需要实现一个飘到个人信息金币余额区域的效果。这里把代码贴出来,希望有用!

  /**
     * 临时保存玩家赢取金豆飞的图标,飞完之后清空
     */
    protected playerWinIcons: eui.Image[] = [];

    /**
     * 飘金币动画
     */
    public enemyDeadCoinAnimator(coin:egret.Point,thisobj:any,delay?: number, distance?: number)
    {   
        let destination:egret.Point = HomePanel.coinPosition;
        let j: number = 3 ;
        let i: number = 0 ;
        let degree: number = Math.PI * 2 / j;
        let r: number = 45 / Math.sin(degree / 2);
        let offsetX: number = 100;
        let offsetY: number = 50;
        let tween: egret.Tween;
        
        while(i<j)
        {
            let img: eui.Image = ResourceNameUtils.createCoinIcon();
            let img_source:string;
            img.source =`common_1_png`;
            let ry: number = Math.floor(Math.sin(degree * i / 2) * r * Math.random());

            img.x = coin.x;
            img.y = coin.y + offsetY + ry;
            img.visible = false;
            thisobj.addChild(img);
            this.playerWinIcons.push(img);

            tween = egret.Tween.get(img);
            tween.wait((i + 1) * 10 + delay);
            tween.call(this.winIconFlyStart, this, [img]);

            let paralleX: number = img.x + offsetX / 2 - Math.floor(Math.random() * offsetX);
            tween.to({ x: paralleX, y: img.y - distance }, 500, egret.Ease.backOut);
            tween.wait(i * 20);
            tween.to({ x: destination.x, y: destination.y }, 500, egret.Ease.cubicInOut);

            tween.call(this.recycleImg, this, [img]);

            i++;

            if(i == j)
            {
                tween.call(this.recycleEnd, this);
            }
        }

        return tween;
    }
    /**
     * 金币开始从上面飞到玩家头像上面
     * @param icon
     */
    protected winIconFlyStart(icon: eui.Image ): void
    {
        icon.visible = true;
    }

     private recycleImg(img: eui.Image): void
    {
        if (img.parent)
        {
            img.parent.removeChild(img);
        
        }

        if (this.playerWinIcons)
        {
            let index: number = this.playerWinIcons.indexOf(img);

            if (index > -1)
            {
                this.playerWinIcons.splice(index, 1);
            }
        }   
    }

     private recycleEnd(): void
    {
        if(this.parent)
        {
            this.parent.removeChild(this);

            PoolManager.getInstance().push(this);
        }
    }

总结

这也是参考前辈才写出来的,动画之前接触的比较少,也就看过点canvas的学习视频,用起来比较生疏。 如果有更好更易懂的实现方法请多指教!