HMRouter动画
2025-03-26 20:10:14
133次阅读
0个评论
HMRouter动画
全局路由动画 全局动画可以通过在HMNavigation中进行配置,也可以通过HMRouterMgr中进行注册。注意:在进行路由跳转的时候将animator设置为false时,动画不生效。在同时使用HMRouterMgr注册和和HMNavigation进行声明的时候,只对HMNaviagtion进行生效。 1、通过HMNavigation的参数进行配置路由动画。需要完成一个IHMAnimator的实例化。在实例化过程中进行动画弹出方向、缩放以及透明度进行相关配置。同时这个动画特效是和effect类似,进场和出场是一个相反的过程。
//动画效果从底部向上弹出, 透明度为0.6, 缩放0.5
export const GlobalPageAnimation: IHMAnimator.Effect = new IHMAnimator.Effect({
direction: IHMAnimator.Direction.BOTTOM_TO_TOP,
opacity: { opacity: 0.6 },
scale: {
x: 0.5,
y: 0.5,
centerX: "50%",
centerY: "50%"
},
})
//
HMNavigation({
navigationId: 'mainNavigation',
homePageUrl: 'HomeContent',
options: {
//相关配置
standardAnimator: GlobalPageAnimation,
modifier: this.modifier
}
})
2、通过HMRouterMgr进行注册,首先需要定义一个类来继承IHMAniamtor,然后在实现effect方法,来完成出场和入场动画。此方法是可以对出场和入场动画进行单独定义的。通过控制页面的起始和最终位置、透明度、缩放来控制。之后在通过HMRouterMgr.registerGlobalAnimator的方法完成注册。
//声明动画
@HMAnimator({ animatorName: "globalAnimation"})
export class GlobalAnimation implements IHMAnimator {
effect(enterHandle: HMAnimatorHandle, exitHandle: HMAnimatorHandle): void {
/*
* 入场动画, finish会决定最后页面的位置和透明度
* */
enterHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = "-100%"
translateOption.y = "-100%"
scaleOption.x = 0.5
scaleOption.y = 0.5
opacity.opacity = 0.5
})
enterHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = "0%"
translateOption.y = "0"
scaleOption.x = 1
scaleOption.y = 1
opacity.opacity = 1
})
enterHandle.curve = Curve.Linear
enterHandle.duration = 1000
/*
* 出场动画, finish会决定最后页面的位置和透明度
* */
exitHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = "0%"
translateOption.y = "0%"
scaleOption.x = 1
scaleOption.y = 1
opacity.opacity = 0.2
})
exitHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = "100%"
translateOption.y = "100%"
opacity.opacity = 0.5
scaleOption.x = 0.5
scaleOption.y = 0.5
})
exitHandle.curve = Curve.Linear
exitHandle.duration = 1000
}
}
//注册动画
HMRouterMgr.registerGlobalAnimator("mainNavigation","standard",new GlobalAnimation())
单个页面自定义动画 在同时存在单个页面的自定义动画和全局动画时候,全局动画不生效。 单个页面定义页面转场动画,首先需要实现一个动画类来继承IHMAnimator,实现effect,方法和上面的一致。在注册的时候,可以通过注解的方式加在需要使用的页面上面@HMRouer({pageUrl:'', animator:"~"}),也可以在路由跳转的时候注入HMRouter.push({url:"```````", animator:"```````````"})
import {
HMAnimator,
HMAnimatorHandle,
IHMAnimator,
OpacityOption,
ScaleOption,
TranslateOption
} from '@hadss/hmrouter';
//实现页面的渐隐渐显的路由动画
@HMAnimator({ animatorName: "LazyForeachAnimator" })
export class LazyForeachAnimator implements IHMAnimator {
effect(enterHandle: HMAnimatorHandle, exitHandle: HMAnimatorHandle): void {
enterHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
scaleOption.x = 0.5;
scaleOption.y = 0.5;
scaleOption.centerX = "50%";
scaleOption.centerY = "50%";
opacity.opacity = 0.5;
})
enterHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
scaleOption.x = 1;
scaleOption.y = 1;
opacity.opacity = 1;
})
enterHandle.duration = 500;
enterHandle.curve = Curve.Linear;
exitHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
scaleOption.x = 1;
scaleOption.y = 1;
scaleOption.centerX = "50%";
scaleOption.centerY = "50%";
opacity.opacity = 1;
})
exitHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
scaleOption.x = 0.5;
scaleOption.y = 0.5;
scaleOption.centerX = "50%";
scaleOption.centerY = "50%";
opacity.opacity = 0.5;
})
exitHandle.duration = 500;
exitHandle.curve = Curve.Linear;
}
}
//页面动画注入
@HMRouter({ pageUrl: 'Lazyforeachdemo',animator: "LazyForeachAnimator" })
//通过路由的方式进行动画注入
HMRouterMgr.push({
navigationId: 'mainNavigation',
animator: new LazyForeachAnimator(),
pageUrl: 'Lazyforeachdemo'
})
弹窗动画 弹窗动画和自定义页面动画相同,都是通过实现IHMAnimator。
import {
HMAnimator,
HMAnimatorHandle,
IHMAnimator,
OpacityOption,
ScaleOption,
TranslateOption
} from '@hadss/hmrouter';
@HMAnimator({ animatorName: "DialogAnimator" })
export class DialogAnimator implements IHMAnimator {
effect(enterHandle: HMAnimatorHandle, exitHandle: HMAnimatorHandle): void {
enterHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = 0
translateOption.y = '100%'
})
enterHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.y = 0
})
enterHandle.duration = 500
enterHandle.curve = Curve.Linear
exitHandle.start((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.x = 0
translateOption.y = 0
})
exitHandle.finish((translateOption: TranslateOption, scaleOption: ScaleOption, opacity: OpacityOption) => {
translateOption.y = '100%'
})
exitHandle.duration = 500
exitHandle.curve = Curve.Linear
}
}
//实现动画注入
@HMRouter({
pageUrl: "TestDialogDemo",
dialog: true,
singleton: true,
animator: "DialogAnimator",
lifecycle: "TestDialogLifecycle"
})
00
- 0回答
- 0粉丝
- 0关注
相关话题
- 【HarmonyOS】HMRouter使用详解(二)
- 【HarmonyOS】HMRouter使用详解(四)路由拦截
- 【HarmonyOS】HMRouter使用详解(一)环境配置
- 【HarmonyOS】HMRouter使用详解(三)生命周期
- 小白必看 HarmonyOS Next HMRouter 轻松上手秘籍
- [HarmonyOS]解决HMRouter路由地址无法抽取的问题
- OpenHarmony 动画大全01-属性动画
- OpenHarmony 动画大全03-帧动画
- OpenHarmony 动画大全02-显式动画
- 鸿蒙开发学习:动画
- 122.HarmonyOS NEXT 数字滚动动画详解(二):动画实现机制
- 鸿蒙开发:了解帧动画
- (七)ArkTS 动画效果实现
- 鸿蒙开发:简单了解属性动画
- 鸿蒙开发:了解显式动画animateTo