ArkUI 动画的两个层次:属性动画和转场动画别混用
【摘要】 想让界面「丝滑」,先得知道动画是在哪一层发生的。属性动画改的是组件状态,转场动画管的是组件进出,用错了会出现跳变。
想让界面「丝滑」,先得知道动画是在哪一层发生的。属性动画改的是组件状态,转场动画管的是组件进出,用错了会出现跳变。
属性动画用 animateTo 包裹状态变更,它会把首尾两帧之间的插值交给系统算。关键是状态变更必须发生在 animateTo 的闭包里,写在闭包外面只会得到一瞬间的跳变——这是最常见的写法错误。
转场动画用 transition 配合 if 条件渲染,控制组件出现和消失的方式。它有个必要前提:组件必须在 if/else 分支里,否则没有「进入」「退出」的概念。配合 animateTo 使用时要显式传 duration 和 curve。
性能上优先用 transform 类属性(translate、scale、rotate),它们能走渲染线程,不触发重新布局;改 width、margin 这类会引发测量和布局的属性,掉帧风险高得多。能用 GPU 合成层的就别用布局动画。
最后一点:动画时长别超过 300ms。超过这个量级用户会感觉「卡」而不是「流畅」,尤其是列表项和按钮反馈这类高频交互。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)