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"
})

代码地址：https://gitee.com/li-haojia-Rory/harmony_case.git