概述
转场动画是指对将要出现或消失的组件做动画,对始终出现的组件做动画应使用 属性动画 。转场动画主要为了让开发者从繁重的消失节点管理中解放出来,如果用属性动画做组件转场,开发者需要在动画结束回调中删除组件节点。同时,由于动画结束前已经删除的组件节点可能会重新出现,还需要在结束回调中增加对节点状态的判断。
转场动画分为基础转场和高级模板化转场,有如下几类:
- 出现/消失转场 :对新增、消失的控件实现动画效果,是通用的基础转场效果。
- 导航转场 :页面的路由转场方式,对应一个界面消失,另外一个界面出现的动画效果,如设置应用一级菜单切换到二级界面。
- 模态转场 :新的界面覆盖在旧的界面之上的动画,旧的界面不消失,新的界面出现,如弹框就是典型的模态转场动画。
- 共享元素转场 :共享元素转场是一种界面切换时对相同或者相似的元素做的一种位置和大小匹配的过渡动画效果。
- 页面转场动画(不推荐) :页面的路由转场方式,可以通过在pageTransition函数中自定义页面入场和页面退场的转场动效。为了实现更好的转场效果,推荐使用 导航转场 和 模态转场 。
- 旋转屏动画增强:在原旋转屏动画基础上,可配置渐隐和渐现的转场效果。
出现/消失转场
transition 是基础的组件转场接口,用于实现一个组件出现或者消失时的动画效果。可以通过 TransitionEffect 的组合使用,定义出各式效果。
表1 转场效果接口
转场效果 | 说明 | 动画 |
---|---|---|
IDENTITY | 禁用转场效果。 | 无。 |
OPACITY | 默认的转场效果,透明度转场。 | 出现时透明度从0到1,消失时透明度从1到0。 |
SLIDE | 滑动转场效果。 | 出现时从窗口左侧滑入,消失时从窗口右侧滑出。 |
translate | 通过设置组件平移创建转场效果。 | 出现时为translate接口设置的值到默认值0,消失时为默认值0到translate接口设置的值。 |
rotate | 通过设置组件旋转创建转场效果。 | 出现时为rotate接口设置的值到默认值0,消失时为默认值0到rotate接口设置的值。 |
opacity | 通过设置透明度参数创建转场效果。 | 出现时为opacity设置的值到默认透明度1,消失时为默认透明度1到opacity设置的值。 |
move | 通过 TransitionEdge 创建从窗口哪条边缘出来的效果。 | 出现时从TransitionEdge方向滑入,消失时滑出到TransitionEdge方向。 |
asymmetric | 通过此方法组合非对称的出现消失转场效果。 1.appear:出现转场的效果。 2.disappear:消失转场的效果。 |
出现时采用appear设置的TransitionEffect出现效果,消失时采用disappear设置的TransitionEffect消失效果。 |
combine | 组合其他TransitionEffect。 | 组合其他TransitionEffect,一起生效。 |
animation | 定义转场效果的动画参数: 1.如果不定义会跟随animateTo的动画参数。 2.不支持通过控件的animation接口配置动画参数。< |