HarmonyOS 复用转场动画示例3问题
以上链接为页面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
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS SideBarContainer 转场动画
197浏览 • 1回复 待解决
HarmonyOS Navigation转场动画geometryTransition
276浏览 • 1回复 待解决
HarmonyOS 组件内转场动画,如何用条件控制是否进行转场动画
391浏览 • 1回复 待解决
HarmonyOS 咨询共享元素动态转场示例
864浏览 • 1回复 待解决
HarmonyOS Navigation转场动画能否只对单个页面使用自定义转场动画
462浏览 • 1回复 待解决
HarmonyOS 共享元素动态转场动画在根节点页面无法完成动画转场
218浏览 • 1回复 待解决
HarmonyOS 3DES加解密示例
465浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
384浏览 • 1回复 待解决
如何实现动画转场效果
1268浏览 • 1回复 待解决
使用转场动画时,如何在消失转场动画完成时执行其他操作
2458浏览 • 1回复 待解决
HarmonyOS Refresh和页面转场动画demo
316浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
737浏览 • 1回复 待解决
HarmonyOS navigation导航转场动画怎么写
440浏览 • 1回复 待解决
HarmonyOS 无感转场动画推荐方案
450浏览 • 1回复 待解决
HarmonyOS 如何感知转场动画执行完毕?
293浏览 • 1回复 待解决
如何全局设置页面转场动画
900浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
738浏览 • 1回复 待解决
HarmonyOS 音频波形动画的示例
301浏览 • 1回复 待解决
HarmonyOS Component设置透明和无转场动画
516浏览 • 1回复 待解决
HarmonyOS 组件复用问题
841浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
2302浏览 • 1回复 待解决
HarmonyOS 浮层动画、present 页面转场动画等UI方案咨询
604浏览 • 1回复 待解决
转场动画,谁有好的方案吗?
857浏览 • 1回复 待解决
请问如何去掉ability的转场动画?
11541浏览 • 2回复 待解决
HarmonyOS Navigation转场动画的一些思路
373浏览 • 1回复 待解决
转场动画示例示例中点击setInteractive即可实现正常转场,即设置PageOne.ets中全局变量interactive: boolean = true;CustomTransition类中interactive: boolean = true。