跳转至

变换

在路由的过程中,MRouter支持设置页面的变换效果,通过RouteBuild里的transform进行设置。
transform接收一个Transform对象,可通过buildTransform函数构造获得。Transform 存在四个参数,分别是:enter,exit,popExit,wrap。

过渡动画

enterexitpopExit都是描述页面过渡动画的。
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方法,开箱即用。
需要注意的是,between方法总共有4个参数,分别是resume,exit,enter,pause,分别代表页面的四种状态:显示,退出,进入和暂停。

wrap

TransformWrap是变换包裹层,这里有三个主要的方法:

PageContent:代表当前页面。
Wrap:包裹层实现,主要是结合PageContent设置一些所有页面通用且额外的控件或Modifier,比如**手势**。
prevPageModifier:前一个页面的Modifier。可设置一次变换过程中前一个页面参与变化的部分。比如modal 变换时,前一个页面的页面角需要发生圆角变化。

在实现Wrap时,必须使用PageContent函数