Layabox-TimeLine使用

news2024/10/21 21:32:26

结构

TimeLine用来制作动画,它直接继承EventDispatcher类,在_update播放动画的过程中实际上使用了Tween的方法来管理每个阶段的缓动。

相关代码如下:       

 var tTween: Tween;

        if (this._tweenDataList.length != 0 && this._index < this._tweenDataList.length) {

            var tTweenData: tweenData = this._tweenDataList[this._index];

            if (tCurrTime >= tTweenData.startTime) {

                this._index++;

                //创建TWEEN

                if (tTweenData.type == 0) {

                    this._gidIndex++;

                    tTween = Pool.getItemByClass("tween", Tween);

                    tTween._create(tTweenData.target, tTweenData.data, tTweenData.duration, tTweenData.ease, Handler.create(this, this._animComplete, [this._gidIndex]), 0, false, tTweenData.isTo, true, false);

                    tTween.setStartTime(tCurrTime);

                    tTween.gid = this._gidIndex;

                    this._tweenDic[this._gidIndex] = tTween;

                    tTween._updateEase(tCurrTime);

                } else {

                    this.event(Event.LABEL, tTweenData.data);

                }

            }

        }

这意味着他是实现更复杂缓动动画的一种方式。

创建

TimeLine提供了from和to静态方法直接创建新的对象,参数和Tween类似但增加了offset参数,可相对于上一个对象增加延迟时间执行。

let timeLine = Laya.TimeLine.from(this.scene, {x: 100}, 100, Laya.Ease.linearNone, 10);

let timeLine = Laya.TimeLine.to(this.scene, {x: 100}, 100, Laya.Ease.linearNone, 10);

同时我们也可通过new的方式创建

let timeLine = new Laya.TimeLine();

这两种方式没有本质区别,只是第一种在new完之后紧接着增加了from和to方法。

使用

和Tween相同的可以使用from和to方法增加缓动过程,还可以增加多个流程,各个流程的对象可以是不同的。     

   let timeLine = Laya.TimeLine.from(this.scene, { x: 100 }, 100, Laya.Ease.linearNone, 10)

            .to(this.tab, { x: 100 }, 100, Laya.Ease.linearNone, 10);

除此之外可以在流程中增加标签事件,值得一提的是这个标签事件参数提供了offset时间来针对上个流程,但并未提供duration参数,这会使得流程继续往下执行。

let timeLine = Laya.TimeLine.from(this.scene, { x: 100 }, 100, Laya.Ease.linearNone, 10)

            .addLabel("aLabel", 100)

            .addLabel("aLabel2", 100)

            .to(this.tab, { x: 100 }, 100, Laya.Ease.linearNone, 10);

运行、暂停与继续       

 timeLine.play();

        timeLine.gotoLabel("aLabel"); // 跳到某个标签

        timeLine.gotoTime(100); // 跳到某个时间,单位ms

        timeLine.pause();

        timeLine.resume();

        let total = timeLine.total; // 获取总帧数

还可以通过设置scale来调整播放速度,数字越大速度越快

        timeLine.scale = 0.1 // 0.1倍速

        timeLine.scale = 2; // 2倍速

监听事件

注册监听标签事件:当执行到某个标签时会触发Label类型的事件,可以通过参数标签名来区分不同的标签事件    

    timeLine.on(Laya.Event.LABEL, this, (e: string) => {

            switch (e) {

                case "aLabel":

                    break;

                case "aLabel2":

                    break;

            }

        });

监听播放完成事件,当play完之后就会触发该事件

        timeLine.on(Laya.Event.COMPLETE, this, () => {

            console.log("complete: 播放完");

        });

回收和删除

使用reset方法可以清楚所有缓动过程,这时候开发者可以使用对象池或其他引用将该对象管理起来,循环使用。

timeLine.reset();

使用destroy方法,在内部除了会调用reset方法,还会把timeLine中所有内部引用置空,之后便是等待gc清除。

timeLine.destroy();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2220301.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Javascript算法——二分查找

1.数组 1.1二分查找 1.搜索索引 开闭matters&#xff01;&#xff01;&#xff01;[left,right]与[left,right) /*** param {number[]} nums* param {number} target* return {number}*/ var search function(nums, target) {let left0;let rightnums.length-1;//[left,rig…

⌈ 传知代码 ⌋ 无监督动画中关节动画的运动表示

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

PP-ChatOCRv3—文档场景信息抽取v3产线使用教程

文档场景信息抽取v3产线使用教程 1. 文档场景信息抽取v3产线介绍 文档场景信息抽取v3&#xff08;PP-ChatOCRv3&#xff09;是飞桨特色的文档和图像智能分析解决方案&#xff0c;结合了 LLM 和 OCR 技术&#xff0c;一站式解决版面分析、生僻字、多页 pdf、表格、印章识别等常…

Spring连接数据库:Mybatis

MyBatis是一款优秀的框架 在数据库中创建表 1.创建项目mybatis 2.在proxml文件中导入必要配置并进行编译 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33<…

电能表预付费系统-标准传输规范(STS)(15)

6.3.7 CRC: CyclicRedundancyCheck (循环冗余校验) The CRC is a checksum field used to verify the integrity of the data transferred for all tokens, except for Class 0 with SubClass 4 to 7, which uses CRC_C (see 6.3.22). The checksum is derived using the foll…

网络基础知识:交换机关键知识解析

了解交换机的关键知识对网络工程师至关重要。 以下是交换机的基础知识解析&#xff0c;包括其基本概念、工作原理和关键技术点&#xff1a; 01-交换机的基本概念 交换机是一种网络设备&#xff0c;用于在局域网&#xff08;LAN&#xff09;中连接多个设备&#xff0c;如计算机…

如何恢复U盘里格式化数据?别慌,有带图详细步骤!

U盘&#xff0c;这个小巧的存储神器&#xff0c;我们几乎天天都在用。但有时候&#xff0c;一不小心手滑&#xff0c;U盘就被格式化了&#xff0c;里面的东西好像全没了&#xff0c;别急&#xff0c;其实数据恢复没那么难。这篇文章就来告诉你&#xff0c;怎么把格式化的U盘里的…

NVR录像机汇聚管理EasyNVR多品牌NVR管理工具/设备云台接入及控制详解

在当今快速发展的信息化时代&#xff0c;视频监控系统已成为企业管理和安全防范的重要工具。随着技术的不断进步&#xff0c;多品牌NVR&#xff08;网络视频录像机&#xff09;管理工具如海康NVR管理平台/工具EasyNVR多个NVR同时管理凭借其强大的兼容性和智能化管理功能&#x…

【LInux】Shell脚本编写基本语法

文章目录 一、前期准备1、查看本机bash2、编辑脚本 二、 判断结构1、if结构2、if/else结构3、if/elif/else结构4、case结构 三、循环结构1、for循环2、while循环3、until循环 四、谢谢观看&#xff01; 一、前期准备 1、查看本机bash which bash之后编写脚本时&#xff0c;第…

数据同步工具Sqoop原理及场景优化

目录 0 数据同步策略 1 数据同步工具 ​编辑 2 Sqoop同步数据原理分析 2.1 原理分析 2.2 Sqoop基本使用分析 3 切片逻辑 3.1 MR切片逻辑 3.2 Hive CombineInputformat切片逻辑 3.3 实验1:Map任务并行度分析1 3.4 实验2: Map任务并行度分析2 3.5 实验3:Map任务并行…

C++ 类的基础用法与详细说明:简单易懂的入门指南

什么是类&#xff1f; C类_百度百科 类是C中一种用于封装数据和功能的基本结构。你可以将类视为一种自定义的数据类型&#xff0c;它可以包含数据&#xff08;成员变量&#xff09;和操作这些数据的函数&#xff08;成员函数&#xff09;。 创建一个简单的类 让我们通过一个…

Java爬虫:获取商品评论数据的高效工具

在电子商务的激烈竞争中&#xff0c;商品评论作为消费者购买决策的重要参考&#xff0c;对于商家来说具有极高的价值。它不仅能够帮助商家了解消费者的需求和反馈&#xff0c;还能作为改进产品和服务的依据。Java爬虫技术&#xff0c;以其稳健性和高效性&#xff0c;成为了获取…

Vue2的依赖注入(跨级通信)基本使用

provide(提供) &#xff0c;inject(注入) 祖先级组件用provide传递数据,它的所有后代都可以通过inject取到数据 使用演示&#xff1a; //祖先组件 <template><div>父组件传的值&#xff1a;{{num}} </div> </template><script> //导入子组件 i…

SourceMonitor,免费代码统计工具,覆盖率,圈复杂度,代码行

SourceMonitor是一款免费的代码度量工具&#xff0c;包含代码行&#xff0c;覆盖率&#xff08;无条件覆盖率&#xff09;&#xff0c;圈复杂度&#xff0c;函数调用深度等指标的测量。 用以下软件安装包&#xff0c;低版本的初始化工程会闪退&#xff0c;工具下载路径&#xf…

Python(numpy库)

numpy基础 NumPy 的全称是“ Numeric Python”&#xff0c;它是 Python 的第三方扩展包&#xff0c;主要用来计算、处理一维或多维数组 ndarray NumPy 定义了一个 n 维数组对象&#xff0c;简称 ndarray 对象&#xff0c;它是一个一系列相同类型元素组成的数组集合。数组中的…

h5页面与小程序页面互相跳转

小程序跳转h5页面 一个home页 /pages/home/home 一个含有点击事件的元素&#xff1a;<button type"primary" bind:tap"toWebView">点击跳转h5页面</button>toWebView(){ wx.navigateTo({ url: /pages/webview/webview }) } 一个webView页 /pa…

springboot二手交易平台

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…

电脑上的顽固软件卸载不干净?试试这几款卸载工具,简单几步解决

相信大家日常的工作或学习生活中&#xff0c;都需要使用电脑&#xff0c;而为了完成工作&#xff0c;都会在电脑上安装一些工具。有时候不需要这些工具了&#xff0c;想要卸载时&#xff0c;发现有些软件太顽固了&#xff0c;卸载不掉&#xff0c;或者是卸载不干净。如果您也遇…

uniapp-uniapp + vue3 + pinia 搭建uniapp模板

使用技术 ⚡️uni-app, Vue3, Vite, pnpm &#x1f4e6; 组件自动化引入 &#x1f34d; 使用 Pinia 的状态管理 &#x1f3a8; tailwindcss - 高性能且极具灵活性的即时原子化 CSS 引擎 &#x1f603; 各种图标集为你所用 &#x1f525; 使用 新的 <script setup> …

Excel功能区变灰是什么原因造成?怎么解决?

Microsoft Excel是广泛使用的电子表格软件&#xff0c;但有时用户可能会遇到功能区变灰的问题&#xff0c;这可能导致功能无法使用&#xff0c;影响工作效率和用户体验。本文将深入探讨Excel功能区灰色的原因及解决方案&#xff0c;帮助读者快速解决这一问题。 一、Excel功能区…