type
status
date
slug
summary
tags
category
icon
password
<ins/>
在 Flutter 中,vsync 是用于控制动画帧同步的一种机制,确保动画的刷新频率与屏幕的刷新率保持一致,避免不必要的计算和电量浪费。vsync 的核心目的是同步动画帧的渲染,通常用于优化动画性能。

vsync 的作用

当我们创建动画(例如使用 AnimationController)时,Flutter 会尝试在每一帧中渲染动画。vsync 的作用就是控制动画的刷新频率,与屏幕的刷新周期同步。它能够在屏幕每次准备好刷新时通知 Flutter 引擎,从而启动新的一帧动画更新。这样做可以:
  1. 避免性能浪费:防止在屏幕不需要更新的情况下去渲染新的动画帧,从而节省资源。
  1. 保证动画流畅:同步屏幕刷新率和动画帧率,避免动画出现卡顿或跳帧的现象。

如何使用 vsync

在使用 AnimationController 时,vsync 是必需的参数。通常可以通过 SingleTickerProviderStateMixinTickerProviderStateMixin 提供 vsync,让当前 State 对象成为一个 TickerProvider,从而控制动画帧的同步。

使用 SingleTickerProviderStateMixin

当一个 State 对象中只需要一个 AnimationController 时,可以使用 SingleTickerProviderStateMixin 来提供 vsync

使用 TickerProviderStateMixin

如果 State 对象中需要多个 AnimationController,可以使用 TickerProviderStateMixin,这样每个 AnimationController 都可以有自己独立的 Ticker,更适合多动画场景。

vsync 的背后机制

vsync 是通过 Ticker 来实现的,Ticker 是一个用来触发动画的计时器,每次屏幕刷新时都会通知 Ticker 进行下一帧的动画更新。这种机制确保动画与屏幕刷新率同步,提升了性能和用户体验。
<ins/>