GSAP - GSAP属性:gsap.ticker

1.类型:Object

gsap.ticker就像GSAP引擎的心跳——它在每个requestAnimationFrame事件上更新globalTimeline,因此它与浏览器的渲染周期完美同步。你可以在每次更新后添加自己的监听器来运行自定义逻辑(这对游戏开发者来说很棒)。添加任意数量的监听器。

2.基本示例

//添加监听
gsap.ticker.add(myFunction);

//监听器回调函数
function myFunction() {
  //在核心引擎更新后的每个tick执行
}
//删除监听器…
gsap.ticker.remove(myFunction);

3.回调参数

下面的参数传递给每个监听器函数:
(1)time : Number类型,从计时器开始的总时间(以秒为单位)。ticker的开始时间可能被lagSmoothing提前。
(2)deltaTime : Number类型 - 从上一个ticker开始经过的毫秒数。注意:你可以使用gsap.ticker.deltaRatio()来获得一个基于特定目标对象的FPS的比率。
(3)frame : Number类型 - 帧(刻度)数,在每一个刻度上递增。

所以你的监听器函数可以设置为使用那些传递给它的参数,像这样:

function myFunction(time, deltaTime, frame) {
  //使用time, deltaTime和frame
}

4.add()的高级选项

在gsap.ticker.add()中有两个可选参数:
(1)once : Boolean类型 - 回调函数只会触发一次,然后被自动删除。
(2)prioritize : Boolean类型 - 回调将被添加到队列的顶部而不是底部,这意味着它将在当前队列中的任何监听器之前触发。如果你想让你的回调在GSAP的全局时间轴之前触发,这是很好的办法。

// 在全局时间轴更新之前,在下一次requestAnimationFrame调用一次myCallback。
gsap.ticker.add(myCallback, true, true);

注:这些高级选项是在GSAP 3.10.0中添加的

5.当浏览器标签被隐藏时进行节流

当用户切换到浏览器中的另一个选项卡时,为了节省电池电量和减少CPU的负载,ticker的更新速度会显著降低(这是因为浏览器本身限制了requestAnimationFrame事件调度),通常情况下,requestAnimationFrame事件每秒大约发生60次,但这取决于浏览器,也取决于系统性能,一些现代设备的更新频率为120hz(每秒120次)。如果requestAnimationFrame不被支持,计时器会自动退回到使用常规的setTimeout()循环。

6.Ticker的属性

  • time:Number类型 - 总时间(秒)自从ticker开始。ticker的开始时间可能会被lagSmoothing提前。
  • frame:Number类型 - 帧(刻度)的数字,它在每个刻度上递增。

7.gsap.ticker.fps()

为了限制一个特定的帧速率,你可以像这样使用fps()方法:

//将帧数控制在每秒30帧
gsap.ticker.fps(30);

因为它不可能让浏览器加速本机requestAnimationFrame事件(通常是60帧/秒),你不能做一些像gspap .ticker.fps(100)(好吧,你可以,但它仍然会以大约60帧/秒运行)。但是,你也可以使用gsapp.ticker.fps(30)来让计时器在必要时跳过节拍,以便让你尽可能接近30fps(或者你设置的低于本机频率的任何fps)。

8.gsap.ticker.deltaRatio()(在3.5.0中添加)

gsap.ticker.deltaRatio()方法以基于特定目标对象的FPS的比率返回自上次tick以来所经过的时间。例如,如果你执行gsapp.ticker.deltaRatio(60),但是从最后一次tick开始的运行时间实际上更像是以30fps运行(可能事情陷入了困境),它将返回2,这样你就可以轻松地设置动态调整帧率变化的循环,如:

gsap.ticker.add(function() {
  obj.x += 3 * gsap.ticker.deltaRatio(60); //即使帧率波动,变化率也将始终保持一致
});

默认的fps参数是60,所以你甚至不需要传入一个,除非你使用的不是60fps。例如,如果你想获得基于30fps运行的比率,你可以执行gsap.ticker.deltaRatio(30)

gsap.ticker.deltaRatio的demo

9.gsap.ticker.lagSmoothing()

  • gsap.ticker.lagsmoothing()方法作为GSAP的延迟平滑的getter和setter。
  • 当CPU陷入困境,呈现之间有延迟时,会发生什么? 例如,假设一个2秒的补间应该立即开始,但是CPU在第一次渲染该补间之前忙了一整秒。大多数其他动画引擎(包括一些浏览器中的CSS动画)都将开始时间向前滑动以进行补偿,但这种方法有一个主要的缺点:它牺牲了同步并可能破坏延迟,因此当你试图整齐地错开动画时,它们会成群结队地涌出。那肯定不好。
  • GSAP一直使用严格的定时模型来优先考虑完美的同步,这意味着在上面的例子中,在初始的1秒延迟之后,补间会呈现为完成了一半。基本上,每个动画引擎都必须以某种方式支付延迟税——要么保持严格的时间和同步,要么滑动启动时间,失去同步。
  • gsap.tick.lagsmoothing()为你提供了最好的两个世界,因为当CPU陷入困境时,它会在下一个tick上调整核心计时机制,这会影响所有动画,因此一切都保持完美同步。您可以设置阈值(以毫秒为单位),以便当延迟超过该阈值时,引擎将调整内部时钟,使其像adjusttedlag一样运行。即使在gsap上调用静态方法,这个调整也会影响gsap中的所有内容(tweens、timeline和delayedCalls,因为它们都是由gsap核心的单一计时机制驱动的)。
  • 例如,如果阈值是500,adjusttedlag是33(这些是默认值),那么调整只会发生在两个tick之间超过500ms的时候,在这种情况下,它会表现得好像只经过了33ms。因此,如果CPU停滞了整整2秒(哎呀!),你的动画将在下一次渲染时移动33ms的时间,而不是跳跃整整2秒。注意:这对设备的性能或真实帧率没有影响——这只会影响当浏览器掉帧时GSAP的反应。
  • 默认情况下,该功能已经激活,使用500ms的阈值和33ms的adjuststedlag,但如果你想更改设置,你可以这样做:
//仅当2个tick之间间隔1000ms或以上时进行补偿,
//然后让它看起来只经过了16毫秒:
gsap.ticker.lagSmoothing(1000, 16);
  • 为什么不把值设得非常低,比如都设为10? 因为这样做不会有太多的喘息空间,它会自然地让你的补间看起来像它们运行得更慢(因为从技术上讲,如果几乎每次渲染的时间都被往前推,它们就会变得更慢)。还要注意,如果你有任何delayedCalls,这些也会受到影响。这是一件好事——它可以确保你可以依靠这些与引擎的其他部分完美同步,但如果浏览器在巨大的压力下,每秒只渲染几帧,看起来就好像时间真的变慢了,2秒的补间(或delayedCall)实际上可能需要8秒才能完成。
  • 在大多数现实场景中,默认值500和33是理想的,因为它们可以防止浏览器/CPU的重大故障,同时允许帧速率的微小变化,而不会不必要地降低速度。
  • 如果你想禁用延迟平滑,你可以简单地将它设置为0,比如gsapp.ticker.lagsmoothing(0),这与将阈值设置为一个超级大的值相同,这样它就永远不会生效。

gsap.ticker.lagSmoothing的demo

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,492评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,048评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,927评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,293评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,309评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,024评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,638评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,546评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,073评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,998评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,678评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2 358

推荐阅读更多精彩内容