layabox动画第一次编写

最新推荐文章于 2022-08-10 11:28:35 发布
最新推荐文章于 2022-08-10 11:28:35 发布
阅读量519 收藏
点赞数
分类专栏： 游戏H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41056807/article/details/107041958
版权

动画 叠蛋糕

module hf{
    export class FoldCakesAct extends BaseAct{
        private ui:ui.act.FoldCakes.FoldCakesActUI;

        private _anim: AnimationSKe;

        private _aid:number = 180;
        private _data: any;
        private _animPath: string = "assets/skeleton/act/foldCakes/zhounianqing.sk";
        private isPlaying:boolean;
        private index:number;
        private canGetIndex:number = -1;//领取的索引
        private num:number =-1;//当前
        constructor(aid:number){
            super(new ui.act.FoldCakes.FoldCakesActUI);
            this.ui = this.skin as ui.act.FoldCakes.FoldCakesActUI;
            this.aid = aid;
            this.ui.goChongzhiBtn.on(Laya.Event.CLICK, this, this.goCHongzhi);
            this.ui.foldBtn.on(Laya.Event.CLICK, this, this.onFoldCake);
            this._anim = new AnimationSKe(this._animPath);
            // this._anim.x = 57;
            // this._anim.y = 400;
            this._anim.x = 102;
            this._anim.y = 466;
            this._anim._height =329;
            this._anim.scaleX=0.8;
            this._anim.stop();
            this.ui.addChild(this._anim);
            this.ui.addChild(this.ui.tableBg);
            this.ui.addChild(this.ui.foldBtn);
            this._anim.play(0, false);
            XHR().Post({"file":"petpk","cmd":"activity", "aid":this._aid,"subcmd":"query"}, this, this.OnDataRet);
            this.ui.giftList.scrollBar.visible = false;//隐藏滚动条
            this.ui.giftList.renderHandler = new Handler(this, this.onListRender, null, false);
            this.ui.giftList.array = [];
            this.UpdateUI();
            
        }
        
        private OnDataRet(value:any)
        {
            if(value.result == 0)
            {
                this._data = value;
                this.UpdateUI();
                this.playMakeAnim();
                Facade.callCommand(new SyncChangeCmd(value, false, true));
            }
            else
            {   
                WeakTips.show(value["msg"]);
            }
        }
        private UpdateUI()
        {
            if(this._data == null)
            {
                return;
            }
            this.ui.costTxt.text = this._data.act_charge+" / 259200";
            this.ui.giftList.array = this._data.act_packet_list;
            this.canGetIndex = -1;
            var sum:number =0;
            this.num = 0;
            for(var i=0;i<this._data.act_packet_list.length;i++)
            {
                if(this._data.act_charge>=this._data.act_packet_list[i].limit)//&&this._data.act_packet_list[i].status == 1
                {
                    if(this._data.act_packet_list[i].status == 1)
                    {
                        this.canGetIndex = this.canGetIndex==-1?i:this.canGetIndex;
                    }
                    else
                    {
                        this.num++;
                    }
                    
                }
                sum+=this._data.act_packet_list[i].status;
            }
            if(sum==0)//没有充值/领取过
            {
                this.ui.foldBtn.gray = true;
            }
            else
            {
                this.ui.foldBtn.gray = false;
            }
            // this.playMakeAnim();
            //跳转到最新的没有领取的地方
            // this.callLater(this.signLatest,[this._data.act_packet_list]);
        }
        private signLatest(ary:any):void{
           var point=0;
           for(var i=0;i<ary.length;i++){
               if(!ary[i]){
                   point=i;
                   break;
               }
           }
           var point1=point;
           for(var i=0;this._data.act_packet_list&&i<this._data.act_packet_list.length;i++){
               if(!this._data.act_packet_list[i]){
                   point1=i;
                   break;
               }
           }
           point = Math.min(point, point1);
           this.ui.giftList.tweenTo(point);
        }
        private onListRender(item:FoldCakesChongzhiItem, index:number): void
        {
            item.doRender(this.ui.giftList.array[index], index, this.aid,this._data.act_charge);
        }
        private goCHongzhi():void
        {
            Facade.callCommand(new OpenVipBoxCommand(1));
        }
        private onFoldCake(): void
        {
             if(this.canGetIndex==-1) return;
            //  XHR().Post({"cmd":"activity","file":"petpk","aid":this._aid,"subcmd":"act_get","index":this.canGetIndex}, this, this.makeHandler);
             XHR().Post({"cmd":"activity","file":"petpk","aid":this._aid,"subcmd":"act_get"}, this, this.makeHandler);
        }

        private makeResult: any;
        private makeHandler(value:any): void
        {
            if(value.result == 0)
            {
                this._data = value;
                this.UpdateUI();
                this.playMakeAnim();
                // Facade.callCommand(new SyncChangeCmd(value, false, true));
                Facade.callCommand(new SyncChangeCmd(value));
            }
            else
            {
                WeakTips.show(value.msg);
            }
        }
        //播放制造动画
        private playMakeAnim(): void
        {
            this.isPlaying = true;
            let animNames:Array<string> = ["","dangao01","dangao02","dangao03","dangao04","dangao05","dangao06","dangao07","dangao08"];
            this._anim.visible = true;
            // this.canGetIndex = index;
            
            this.UpdateUI();
            if(this.num ==0)
            {
                this._anim.visible=false;
            }
            if(this.num < 5)
            {
                this._anim.play(animNames[this.num],  false, false, 0);
            }
            else
            {
                this._anim.play(animNames[(this.num-4)%4+4],  false, false, 0);
            }
        }
        
        public destroy(): void 
        {
            this.ui.foldBtn.off(Laya.Event.CLICK, this, this.onFoldCake);
            Laya.loader.clearRes("assets/skeleton/act/foldCakes/zhounianqing.sk");
            this._anim.destroy();
            this._anim = null;
            super.destroy();
            
        }
    }
    export class FoldCakesChongzhiItem extends ui.act.FoldCakes.FoldCakesChongzhiItemUI
    {
        private _subData: any;
        private _aid:number;
        private _index:number;
        private _act_charge:number;
         constructor()
        {
            super();
        }
        public doRender(subData:any, index:number,  aid:number,act_charge:number): void
        {
            this._subData = subData;
            this.giftCostTxt.text =subData["limit"];
            this._act_charge =act_charge;
            var len = this._subData.items.items.length;
            if(len > 1)//礼包包含多个物品，用默认icon1,,,,,,icon是一个物品的skin
            {
                this.icon.visible =false;
                this.icon1.visible=true;
                this.icon1.on(Laya.Event.CLICK, this, this.clickTips);
            }
            else if(len ==1)
            {
                this.icon.visible =true;
                this.icon1.visible = false;
                CommonGift.showCommonGift(subData['items'], this.icon, 60, 5, "ui/comp/goodsbg2.png");
            }
            // if(subData["limit"]==1980)
            // {
            //     this.icon.visible =true;
            //     this.icon1.visible = false;
            //     CommonGift.showCommonGift(subData['items'], this.icon, 60, 5, "ui/comp/goodsbg2.png");
            // }
            if(this._act_charge  >= subData["limit"] && subData["status"]==0)//已领取
            {
                this.flag.visible = true;
                this.black.visible = true;
            }
            else
            {
                this.flag.visible = false;
                this.black.visible = false;
            }
            if(this._act_charge  < subData["limit"])
            {
                this.black.visible = true;
            }
        }
        private clickTips() 
        {
            var tipsData = {};
            //转换坐标点为全局坐标点   
            var pos: laya.maths.Point;
             pos = this.icon1.localToGlobal(new laya.maths.Point(0, 0));
            var strMsg: string = "";
            for (var i: number = 0; i < this._subData["items"]["items"].length; i++) {
                strMsg += this._subData["items"]["items"][i]["name"] + "x" + (this._subData["items"]["items"][i]["num"] ? this._subData["items"]["items"][i]["num"] : (this._subData["items"]["items"][i]["hours"] / 24 + "天"));
                if (i != this._subData["items"]["items"].length - 1) {
                    strMsg += "\n";
                }
            }
            tipsData["name"] ="礼包物品包含：";
            tipsData["desc"] = strMsg;
            Tips.show(tipsData, pos);
        }
        private ShowGiftTips(value:any):void
        {
            if (value.result == 0)
            {
                var syncCmd = new SyncChangeCmd(value,false,true);
                Facade.callCommand(syncCmd);
            }
            else
            {
                WeakTips.show(value.msg);
            }
        }
    }
}

在这里插入图片描述
在这里插入图片描述

this._anim.x = 102;
this._anim.y = 466;//动画的坐标
this._anim._height =329;
this._anim.scaleX=0.8;//动画的尺寸缩放
this._anim.stop();
this.ui.addChild(this._anim);//把动画布局到ui视图上，这里就是把动画放到图层上
this.ui.addChild(this.ui.tableBg);//因为之前的桌面bg和领取按钮的优先级高于动画，所以在加载动画之后重新把这两个组件布局到ui视图管理上
this.ui.addChild(this.ui.foldBtn);
this._anim.play(0, false);//播放动画

实现效果，这里是静态图片不是GIF没法看动画完整效果
在这里插入图片描述

layabox使用动画资源 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200630144007620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTA1NjgwNw==,size_16,color_FFFFFF,t_70) ①导入动画资源，首先找到资源的位置

在这里插入图片描述
在这里插入图片描述
②导入之后会生成sk文件和新的png，然后如果png大可以拿到TinyPng网站进行压缩，否则会出现资源加载的问题。如卡顿。
③然后把生成的资源放到指定位置中进行存储，在编辑器中找到该动画的指定位置，就能进行正常使用了。

在这里插入图片描述
④使用规则要参考json中animation的展示
在这里插入图片描述
let animNames:Array<string>这个数组中存放的是动画名称， 这个动画的播放是4个一循环.，所以计算是在4个以内正常播放，超过四个进行计算即可显示！

 let animNames:Array<string> = ["","dangao01","dangao02","dangao03","dangao04","dangao05","dangao06","dangao07","dangao08"];
this._anim.visible = true;
// this.canGetIndex = index;

this.UpdateUI();
if(this.num ==0)
{
    this._anim.visible=false;
}
if(this.num < 5)
{
    this._anim.play(animNames[this.num],  false, false, 0);
}
else
{
    this._anim.play(animNames[(this.num-4)%4+4],  false, false, 0);
}
宝拉不想努力了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Laya 动画控制整个工程
08-16
LayaAir 使用IDE制作动画并播放 源代码和资源 希望大家下载并给与评论 TypeScript 语言开发
LayaBox---Animation---时间轴动画
学海无涯
08-08 491
如不需要手动控制，直接将属性面板的autoPlay设置为true即可。⚠️注意：比如上图 要做的事按钮的缩放动画，记得将锚点改到中心点。
layabox使用Animation创作一个简单的动画
max_tank的博客
04-03 6404
在使用layabox引擎来创作一个动画的时候通常要执行以下几个步骤1、引入图集2、创建动画模板createFrames 将动画进行缓存3、创建Animation实例 4、将实例放入容器中5、使用play方法开始播放动画最后当然是要引用这个类 以及放置好 动画出现的位置最后 当当当当当 让我们看看效果。。。。...
LayaBox---多状态---时间轴动画
学海无涯
08-10 1268
LayaBox---多状态---时间轴动画。
LayaAir-图集动画
张营的技术博客
05-07 2169
1.准备图集资源 在laya/assets/目录下添加图片资源，在IDE编辑器打开编辑模式，点击左下角刷新资源树，点击工具栏-&gt;发布，或按F12,发布成功后就可以使用图集资源。在res/atlas 中会生成3个文件，.rec文件 .arlas文件 .png文件。 2.加载图集动画 （1）loadAtlas() //初始化舞台 Laya.init(1334, 750,L...
FairyGUI-layabox:LayaAir的灵活UI框架
04-24
2.1这两个版本layair1.x 用于LayaAir1.x版本目录结构source fairygui的源码demo 例子工程,可用Laya IDE直接打开UIProject UI 工程,可以FairyGUI编辑器打开获取fairygui库如果你只是想添加或者更新fairygui库到你的...
layabox2.0命令行在vscode中编译打包问题
10-14
主要介绍了layabox2.0命令行在vscode中编译打包问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Layabox_as 导出安卓并互相调用domo
07-04
Layabox_as 导出安卓并互相调用domo 使用layaide导出Android_studio后即可在Android_studio中导出apk
LayaBox写的飞机大战小例子
04-12
LayaBox as3写的飞机大战小例子,只写了部分，剩余部分自己扩展。
LayaMiniGameFrame:LayaBox小游戏框架，简化开发流程。停止更新
05-09
简化了LayaBox的工作流程，让各个工具使用更加方便。 参与贡献 辥觻瓭: YaYaLuoYa: 主要功能 - 简化LayaBox开发流程 - 在untiy中搭建场景并导出场景配置文件，根据配置文件自动构建场景， - 导出unti预制体文件 - ...
layacmd:LayaAir命令行工具
05-18
@ -1,271 +0,0 @@ layacmd [TOC] layacmd是layaair的命令行工具，可以使用layacmd不打开IDE的情况下对layaair项目进行编译发布等操作。它包含以下功能，这些功能都对应一个子命令。 功能 子命令 编译 compile 发布 publish 导出UI ui 资源版本控制 resourceVersion 使用guetzli压缩jpg guetzli 打开静态文件服务器 open 安装 $ npm install layacmd -g CLI layacmd的命令类似git命令，它的形式是： $ layacmd [command] [args] 比如编译项目： $ layacmd compile 或者查看帮助信息： $ layacmd --help 不仅layacmd本身，所有的子命令都有版本信息和帮助信息，查看子命令帮助信息： $ layacm
layaAir工具
06-25
layaAir工具，layaAir工具，layaAir工具，中文版，破解
Laya的动画制作，整图动画，序列图动画，时间轴动画，龙骨动画
gamedaybyday
09-10 1571
参考： Laya动画基础 Egret帧动画工具类 序列图动画 白鹭的序列图动画，使用TexureMerger合图，然后使用MovieClip类播放。 Laya的话，使用图集打包工具合图，然后使用Animation类播放。 一个泡泡爆炸的序列图 laya右上角选择工具，图集打包。 选择动画的父文件夹，后缀选择atlas，点击确定。 ...
layabox 序列帧
LuckyJoey的博客
02-13 1132
for(let i = 0;i<1000;i++){ let anim:Laya.Animation = new Laya.Animation(); anim.loadAtlas("res/atlas/anim.atlas",Laya.Handler.create(this,this.anim,[anim])); } private anim(ani:Laya.Anima...
LayaAir 图集动画1—图集制作
蚩尤后裔-汪茂雄
12-16 2565
目录 图集制作·理论介绍 LayaAirIDE 制作图集 IDE 图集打包工具打包图集 资源管理器内自动打包图集 图集文件介绍 图集动画预览 图集制作·理论介绍 官网参考地址：https://ldc.layabox.com/doc/?language=zh&amp;nav=zh-js-2-2-0 1、图集(Atlas)是游戏开发中常见的一种美术资源，通过工具将多张图片合并成一张大...
LAYA 骨骼动画
远行的博客
04-15 1523
LayaAir引擎中模板是一种特别的概念，表示一种数据结构，这种数据结构可以被复用。骨骼动画就使用到了模板，对于同一个动画来说，可以只创建一个动画模板，然后实例多个播放的实例，这样内存中就只有一份的动画数据，但是却可以在舞台上显示多个动画。 创建骨骼动画代码 private var sk:Skeleton; private function showSki():void{ var t:...
Laya的骨骼换装
gamedaybyday
04-16 904
参考： 骨骼动画-换装 骨骼动画进阶 分享：Dragonbones/Spine的换肤操作 Laya 2.5.0 一从DragonBones骨骼动画转成Laya可用骨骼动画 打开DragonBones软件，打开示例项目剑客-骨骼嵌套。 （DragonBones登录失败的话，因为服务器迁移，这个登录没有部署。需要去下载5.6.3版本，这个版本无需登录） 导出数据类型js...
[Laya实战]layaair2-Cmd安装流程和用法(layaair2.5.0版本)
学生董格
07-01 2255
laya2 Layaair2-Cmd安装流程和用法1.问题:Layaair2-Cmd总是安装不上(本文用的layaair2.5.0版本)?2.解决方案:3.vscode配置tasks.json文件:4.关联安装包: 1.问题:Layaair2-Cmd总是安装不上(本文用的layaair2.5.0版本)? http://ask.layabox.com/article/8 https://www.npmjs.com/package/layaair2-cmd 2.解决方案: 1.安装nodejs10.*的版
[Laya实战]Cmd Bat脚本入门篇(Laya案例编写,内含zip unzip压缩解压等) Win环境[开箱可用]
学生董格
05-25 765
laya发布微信小程序后,会有一些东西是我们上传代码用不到的,但是laya还是会生成的东西 例如 1.res资源一般会用网络资源替换请求 2.json文件是个空的,或者某些js引用需要删除等 需求: 每次手动删除比较繁琐容易忘,所以特别想有一个自动化脚本工具 解决方案: Cmd命令默认支持.bat脚本windows环境 而且还有相关的zip,unzipexe足够用了 大部分cmd相关知识百度都有,我只列举几个常用的: 获取用户输入 set /p version=Pl...
LayaBox 分包
最新发布
07-27
LayaBox 是一个用于 HTML5 游戏开发的引擎，它提供了分包功能来优化游戏的加载和运行效率。分包可以将游戏资源按照一定的规则划分为多个包，然后按需加载这些包，减少首次加载的时间和网络传输的数据量。 在 Laya...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值