HarmonyOS 复用转场动画示例3问题

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#%E7%A4%BA%E4%BE%8B3

以上链接为页面Navgition转场动画示例,在复用以上代码时出现bug。PageOne到PageTwo正常,PageTwo回到PageOne会发生动画异常。

// PageOne.ets
import {
  AnimateCallback,
  BuilderNameConstants,
  buildRouterModel,
  CustomTransition,
  RouterModule,
  RouterNameConstants
} from '@ohos/routermodule';
import { buildDestinationRouterModel } from '@ohos/routermodule/src/main/ets/model/RouterModel';

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

@Component
export struct PageOne {
  pageInfos: NavPathStack = new NavPathStack();
  @State translateX: string = '0';
  pageId: string = '';
  rectWidth: number = 0;
  interactive: boolean = false;

  registerCallback() {
    CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => {
      if (isPush) {
        this.translateX = '100%';
      } else {
        this.translateX = '0';
      }
    }, (isPush: boolean, isExit: boolean) => {
      if (isPush) {
        this.translateX = '0';
      } else {
        this.translateX = '100%';
      }
    }, (isPush: boolean, isExit: boolean) => {
      this.translateX = '0';
    }, (operation: NavigationOperation) => {
      if (operation == NavigationOperation.PUSH) {
        this.translateX = '100%';
        animateTo({
          duration: 1000,
          onFinish: () => {
            this.translateX = '0';
          }
        }, () => {
          this.translateX = '0';
        })
      } else {
        this.translateX = '0';
        animateTo({
          duration: 1000,
          onFinish: () => {
            this.translateX = '0';
          }
        }, () => {
          this.translateX = '100%';
        })
      }
    }, 200);
  }

  build() {
    NavDestination() {
      Column() {
        Button(`setInteractive`)
          .onClick(() => {
            CustomTransition.getInstance().interactive = !CustomTransition.getInstance().interactive;
            this.interactive = CustomTransition.getInstance().interactive;
          })

        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            //将name指定的NavDestination页面信息入栈,传递的数据为param
            buildDestinationRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_PageTwo, new Object({
              origin: 'Entry'
            }));
          })
      }
      .size({ width: '100%', height: '100%' })
    }
    .title('pageOne')
    .onDisAppear(() => {
      CustomTransition.getInstance().unRegisterNavParam(this.pageId);
    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
      if (context.navDestinationId) {
        this.pageId = context.navDestinationId;
        this.registerCallback();
      }
    })
    .translate({ x: this.translateX })
    .backgroundColor('#F1F3F5')
    .gesture(PanGesture()
      .onActionStart((event: GestureEvent) => {
        this.rectWidth = event.target.area.width as number;
        if (event.offsetX < 0) {
          buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_PageTwo, new Object({
            origin: 'Entry'
          }));
          // this.pageInfos.pushPath({ name: 'pageTwo', param: CustomTransition.getInstance().getAnimationId() });
          // this.pageInfos.pushPath({name: BuilderNameConstants.HARA_PageTwo, param:  CustomTransition.getInstance().getAnimationId()});
        } else {
          this.pageInfos.pop();
        }
      })
      .onActionUpdate((event: GestureEvent) => {
        let rate = event.fingerList[0].localX / this.rectWidth;
        CustomTransition.getInstance().updateProgress(rate);
      })
      .onActionEnd((event: GestureEvent) => {
        let rate: number = event.fingerList[0].localX / this.rectWidth;
        CustomTransition.getInstance().finishInteractiveAnimation(rate);
      }))
  }
}

@Builder
export function builderPageOne(object: Object) {
  PageOne()
}

const builderName = BuilderNameConstants.HARA_PageOne;
if (!RouterModule.getBuilder(builderName)) {
  const builder: WrappedBuilder<[object]> = wrapBuilder(builderPageOne);
  RouterModule.registerBuilder(builderName, builder);
}
// PageTwo.ets
import {
  AnimateCallback,
  BuilderNameConstants,
  buildRouterModel,
  CustomTransition,
  RouterModule,
  RouterNameConstants
} from '@ohos/routermodule';

@Builder
export function PageTwoBuilder(name: string, param: Object) {
  PageTwo({ param: param as number })
}

@Component
export struct PageTwo {
  pageInfos: NavPathStack = new NavPathStack();
  @State translateX: string = '0';
  pageId: string = '';
  rectWidth: number = 0;
  param: number = 0;

  registerCallback() {
    CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => {
      if (isPush) {
        this.translateX = '100%'
      } else {
        this.translateX = '0';
      }
    }, (isPush: boolean, isExit: boolean) => {
      if (isPush) {
        this.translateX = '0';
      } else {
        this.translateX = '100%'
      }
    }, (isPush: boolean, isExit: boolean) => {
      this.translateX = '0';
    }, (operation: NavigationOperation) => {
      if (operation == NavigationOperation.PUSH) {
        this.translateX = '100%';
        animateTo({
          duration: 500, onFinish: () => {
            this.translateX = '0';
          }
        }, () => {
          this.translateX = '0'
        })
      } else {
        this.translateX = '0';
        animateTo({
          duration: 500, onFinish: () => {
            this.translateX = "0"
          }
        }, () => {
          this.translateX = '100%';
        })
      }
    }, 2000)
  }

  build() {
    NavDestination() {
      Column() {
        Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            //将name指定的NavDestination页面信息入栈,传递的数据为param
            buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_PageOne, new Object({
              origin: 'Entry'
            }));
          })
      }
      .size({ width: '100%', height: '100%' })
    }
    .title('pageTwo')
    .gesture(PanGesture()
      .onActionStart((event: GestureEvent) => {
        this.rectWidth = event.target.area.width as number;
        if (event.offsetX < 0) {
          buildRouterModel(RouterNameConstants.ENTRY_HAP, BuilderNameConstants.HARA_PageOne, new Object({
            origin: 'Entry'
          }));
        } else {
          this.pageInfos.pop();
        }
      })
      .onActionUpdate((event: GestureEvent) => {
        let rate = event.fingerList[0].localX / this.rectWidth;
        CustomTransition.getInstance().updateProgress(rate);
      })
      .onActionEnd((event: GestureEvent) => {
        let rate = event.fingerList[0].localX / this.rectWidth;
        CustomTransition.getInstance().finishInteractiveAnimation(rate);
      }))
    .onAppear(() => {
      this.registerCallback();
    })
    .onDisAppear(() => {
      CustomTransition.getInstance().unRegisterNavParam(this.pageId);
    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack;
      if (context.navDestinationId) {
        this.pageId = context.navDestinationId;
        this.registerCallback();
      }
    })
    .translate({ x: this.translateX })
    .backgroundColor(Color.Yellow)
  }
}

@Builder
export function builderPageTwo(object: Object) {
  PageTwo()
}

const builderName = BuilderNameConstants.HARA_PageTwo;
if (!RouterModule.getBuilder(builderName)) {
  const builder: WrappedBuilder<[object]> = wrapBuilder(builderPageTwo);
  RouterModule.registerBuilder(builderName, builder);
}
HarmonyOS
2025-01-09 16:06:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

转场动画示例示例中点击setInteractive即可实现正常转场,即设置PageOne.ets中全局变量interactive: boolean = true;CustomTransition类中interactive: boolean = true。

分享
微博
QQ
微信
回复
2025-01-09 19:19:51
相关问题
HarmonyOS SideBarContainer 转场动画
197浏览 • 1回复 待解决
HarmonyOS 咨询共享元素动态转场示例
864浏览 • 1回复 待解决
HarmonyOS 3DES加解密示例
465浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
384浏览 • 1回复 待解决
如何实现动画转场效果
1268浏览 • 1回复 待解决
HarmonyOS Refresh和页面转场动画demo
316浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
737浏览 • 1回复 待解决
HarmonyOS navigation导航转场动画怎么写
440浏览 • 1回复 待解决
HarmonyOS 无感转场动画推荐方案
450浏览 • 1回复 待解决
如何全局设置页面转场动画
900浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
738浏览 • 1回复 待解决
HarmonyOS 音频波形动画示例
301浏览 • 1回复 待解决
HarmonyOS 组件复用问题
841浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
2302浏览 • 1回复 待解决
转场动画,谁有好的方案吗?
857浏览 • 1回复 待解决
请问如何去掉ability的转场动画
11541浏览 • 2回复 待解决
HarmonyOS Navigation转场动画的一些思路
373浏览 • 1回复 待解决