变换¶
在路由的过程中,MRouter支持设置页面的变换效果,通过RouteBuild里的transform进行设置。
transform接收一个Transform对象,可通过buildTransform函数构造获得。Transform
存在四个参数,分别是:enter,exit,popExit,wrap。
过渡动画¶
enter,exit,popExit都是描述页面过渡动画的。
enter是新页面进入的动画效果
exit旧页面退出的动画效果
popExit则是新页面退出的动画效果。其中popExit时可缺省的,缺省的时候将会使用enter的反效果
旧页面的进入动画效果是不可设置的。
import com.erolc.mrouter.route.transform.slideInHorizontally
import com.erolc.mrouter.route.transform.slideOutHorizontally
fun normal() = buildTransform {
enter = slideInHorizontally { it }
exit = slideOutHorizontally { -it / 7 }
wrap = NormalTransformWrap()
}
可以看出使用的slideInHorizontally
等函数是库实现的,但效果和系统的没有区别,需要了解这些效果的区别可查看:EnterTransition 和 ExitTransition 示例
页面内过渡动画¶
在页面内,也是可以根据打开页面的状态给页面元素设置过渡动画的,你只需要按照一下步骤来就可以了:
1,在页面中通过rememberTransformState获取页面变换状态。
2,使用transition的animate方法进行动画。
val transition = rememberTransformState()
val padding by transition.animateDp {
it.between(resume = 300.dp, exit = 30.dp)
}
需要注意的是,
between方法总共有4个参数,分别是resume,exit,enter,pause,分别代表页面的四种状态:显示,退出,进入和暂停。
wrap¶
TransformWrap是变换包裹层,这里有三个主要的方法:
PageContent:代表当前页面。
Wrap:包裹层实现,主要是结合PageContent设置一些所有页面通用且额外的控件或Modifier,比如**手势**。
prevPageModifier:前一个页面的Modifier。可设置一次变换过程中前一个页面参与变化的部分。比如modal
变换时,前一个页面的页面角需要发生圆角变化。
在实现
Wrap时,必须使用PageContent函数