opacity animation性能注意事项

Animating an Opacity widget directly causes the widget (and possibly its subtree) to rebuild each frame, which is not very efficient. Consider using an AnimatedOpacity or a FadeTransition instead.
在animation中使用Opacity widget直接导致widget(可能还有它的子树)每一帧都rebuild,这效率很低。 建议改用 AnimatedOpacity 或 FadeTransition。

Transparent image - 透明image

If only a single Image or Color needs to be composited with an opacity between 0.0 and 1.0, it’s much faster to directly use them without Opacity widgets.
如果只需要将单个Image或Color 展示在 0.0 和 1.0 之间的透明度,则直接使用它们(到自身的透明度)会比使用Opacity widget 快得多。

For example, Container(color: Color.fromRGBO(255, 0, 0, 0.5)) is much faster than Opacity(opacity: 0.5, child: Container(color: Colors.red)).
例如,Container(color: Color.fromRGBO(255, 0, 0, 0.5)) 比 Opacity(opacity: 0.5, child: Container(color: Colors.red)) 快得多。

The following example draws an Image with 0.5 opacity without using Opacity:
以下示例在不使用 Opacity 的情况下绘制透明度为 0.5 的Image:

Image.network(
  'https://raw.githubusercontent.com/flutter/assets-for-api-docs/master/packages/diagrams/assets/blend_mode_destination.jpeg',
  color: const Color.fromRGBO(255, 255, 255, 0.5),
  colorBlendMode: BlendMode.modulate
)

Directly drawing an Image or Color with opacity is faster than using Opacity on top of them because Opacity could apply the opacity to a group of widgets and therefore a costly offscreen buffer will be used. Drawing content into the offscreen buffer may also trigger render target switches and such switching is particularly slow in older GPUs.
绘制直接设置自身透明度的image或Color比在它们的父节点上使用Opacity widget更快,因为Opacity widget可以运用于应用于一组widget,因此将使用开销大的offscreen buffer。 将内容绘制到offscreen buffer也可能触发渲染目标切换,并且这种切换在较旧的 GPU 中特别慢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值