OpenHarmony开发实战：转场动画的使用（ArkTS，2024年最新面试复盘怎么做

最新推荐文章于 2024-09-16 11:30:43 发布

Django知识点

最新推荐文章于 2024-09-16 11:30:43 发布

阅读量1k

点赞数 20

分类专栏： 2024年程序员学习文章标签：面试前端 javascript

本文链接：https://blog.csdn.net/m0_61943758/article/details/137576410

版权

2024年程序员学习专栏收录该内容

270 篇文章 1 订阅

订阅专栏

在FullCustomTransition.ets的Column组件中添加TransitionElement组件，并且定义pageTransition方法。给Stack组件添加opacity、scale、rotate属性，定义变量animValue用来控制Stack组件的动效，在PageTransitionEnter和PageTransitionExit组件中动态改变myProgress的值。

// FullCustomTransition.ets
@Entry
@Component
struct FullCustomTransition {
@State animValue: number = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE;

build() {
Column() {
TransitionElement()
}
.opacity(this.animValue)
.scale({ x: this.animValue, y: this.animValue })
.rotate({
z: FULL_CUSTOM_TRANSITION_ROTATE_Z,
angle: FULL_CUSTOM_TRANSITION_ANGLE * this.animValue
})
}

/**

页面转场通过全局pageTransition方法进行配置转场参数
进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0 - 1)
进场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0 - 1)
*/
pageTransition() {
PageTransitionEnter({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
.onEnter((type?: RouteType, progress?: number) => {
if (!progress) {
return;
}
this.animValue = progress;
});
PageTransitionExit({ duration: TRANSITION_ANIMATION_DURATION, curve: Curve.Smooth })
.onExit((type?: RouteType, progress?: number) => {
if (!progress) {
return;
}
this.animValue = FULL_CUSTOM_TRANSITION_DEFAULT_ANIM_VALUE - progress;
});
}
}

组件内转场

本节实现组件内转场动效，通过一个按钮来控制组件的添加和移除，呈现容器组件子组件添加和移除时的动效。效果如图所示：

组件转场主要通过transition属性方法配置转场参数，在组件添加和移除时会执行过渡动效，需要配合animateTo才能生效。动效时长、曲线、延时跟随animateTo中的配置。

在ComponentTransition.ets文件中，新建Image子组件，并添加两个transition属性，分别用于定义组件的添加动效和移除动效。

// ComponentTransition.ets
Image($r(‘app.media.bg_element’))
.TransitionEleStyles()
.transition({
type: TransitionType.Insert,
scale: COMPONENT_TRANSITION_SCALE,
opacity: COMPONENT_TRANSITION_OPACITY
})
.transition({
type: TransitionType.Delete,
rotate: COMPONENT_TRANSITION_ROTATE,
opacity: COMPONENT_TRANSITION_OPACITY
})

在ComponentTransition代码中，定义一个isShow变量，用于控制Image子组件的添加和移除，在Button组件的onClick事件中添加animateTo方法，来使Image子组件子组件动效生效。

// ComponentTransition.ets
@State isShow: boolean = false;

Button( $r('app.string.Component_transition_toggle')) .height(DimensionUtil.getVp($ r(‘app.float.element_trans_btn_height’)))
.width(DimensionUtil.getVp( $r('app.float.element_trans_btn_width'))) .fontColor(Color.White) .backgroundColor($ r(‘app.color.light_blue’))
.onClick(() => {
animateTo({ duration: TRANSITION_ANIMATION_DURATION }, () => {
this.isShow = !this.isShow;
})
})

共享元素转场

效果如图所示：

共享元素转场通过给组件设置sharedTransition属性来实现，两个页面的组件配置为同一个id，则转场过程中会执行共享元素转场。sharedTransition可以设置动效的时长、动画曲线和延时，实现步骤如下：

在ShareItem.ets中给Image组件设置sharedTransition属性，组件转场id设置为“SHARE_TRANSITION_ID”。

// ShareItem.ets
Image( $r('app.media.bg_transition')) .width(FULL_LENGTH) .height(DimensionUtil.getVp($ r(‘app.float.share_item_element_height’)))
.borderRadius(DimensionUtil.getVp( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotssionUtil.getVp($ r(‘app.float.share_item_element_margin_bottom’)) })
.sharedTransition(SHARE_TRANSITION_ID, {
duration: TRANSITION_ANIMATION_DURATION,
curve: Curve.Smooth,
delay: SHARE_ITEM_ANIMATION_DELAY
})
.onClick(() => {
router.pushUrl({ url: SHARE_PAGE_URL })
.catch((err: Error) => {
hilog.error(DOMAIN, PREFIX, FORMAT, err);
});
})

在SharePage.ets中给Image组件设置sharedTransition属性，组件转场id设置为“SHARE_TRANSITION_ID”。

// SharePage.ets
@Entry
@Component
struct SharePage {
build() {
Column() {
TransitionElement({ imgFit: ImageFit.Cover })
.sharedTransition(SHARE_TRANSITION_ID, {
duration: SHARE_ITEM_DURATION,
curve: Curve.Smooth,
delay: SHARE_ITEM_ANIMATION_DELAY
})
}
}
}

说明： 两个页面的组件配置为同一个id，则转场过程中会执行共享元素转场，配置为空字符串时不会有共享元素转场效果。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）**技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****