鸿蒙NEXT开发实战往期必看文章:
HarmonyOS NEXT应用开发案例实践总结合(持续更新......)
HarmonyOS NEXT应用开发性能优化实践总结(持续更新......)
一分钟了解”纯血版!鸿蒙HarmonyOS Next应用开发!
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)
使用属性动画
ArkUI开发框架在NDK接口主要提供属性动画,实现组件出现/消失转场。同时,可以通过Node-API桥接ArkTS侧帧动画能力,实现Native侧的动画效果。
说明:
需要从ArkTS侧获取this.getUIContext(),传入到Native侧。
在Native侧通过OH_ArkUI_GetContextFromNapiValue方法获取context。
需要执行的动画属性变化必须写在ArkUI_ContextCallback中callback中。
需要执行的动画属性,必须在执行动画之前设置过。
提供全局animateTo显式动画接口,来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态。
-
在.ets文件中获取UIContext,把this.getUIContext()当做参数输出到Native方法中。
// createNativeNode是Native侧暴露的方法 nativeNode.createNativeNode("xcomponentId", this.getUIContext()); ts
-
解析UIContext转换C中的context对象。
// 获取ets测传入的context ArkUI_ContextHandle context = nullptr; // 通过code 判断是否获取成功 auto code = OH_ArkUI_GetContextFromNapiValue(env, args[1], &context);
-
获取ArkUI_NativeAnimateAPI_1 对象。
// 获取ArkUI_NativeAnimateAPI接口 ArkUI_NativeAnimateAPI_1 *animateApi = nullptr; OH_ArkUI_GetModuleInterface(ARKUI_NATIVE_ANIMATE, ArkUI_NativeAnimateAPI_1, animateApi);
-
设置 ArkUI_AnimateOption参数,通过提供的C方法设置对应的参数。
ArkUI_AnimateOption *option = OH_ArkUI_AnimateOption_Create(); OH_ArkUI_AnimateOption_SetDuration(option, 2000); OH_ArkUI_AnimateOption_SetTempo(option, 1.1); OH_ArkUI_AnimateOption_SetCurve(option, ARKUI_CURVE_EASE); OH_ArkUI_AnimateOption_SetDelay(option, 20); OH_ArkUI_AnimateOption_SetIterations(option, 1); OH_ArkUI_AnimateOption_SetPlayMode(option, ARKUI_ANIMATION_PLAY_MODE_REVERSE); ArkUI_ExpectedFrameRateRange *range = new ArkUI_ExpectedFrameRateRange; range->min = 10; range->max = 120; range->expected = 60; OH_ArkUI_AnimateOption_SetExpectedFrameRateRange(option, range);
-
设置回调参数。
// 用户自定义参数 struct UserData{ int32_t data; }; UserData *onFinishUser = new UserData; onFinishUser->data= 101; // 设置完成的回调 ArkUI_AnimateCompleteCallback *completeCallback = new ArkUI_AnimateCompleteCallback; completeCallback->userData = onFinishUser; completeCallback->type = ARKUI_FINISH_CALLBACK_REMOVED; completeCallback->callback = [](void *userData) { OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode onFinishCallback %{public}d", reinterpret_cast<AA *>(userData)->a); }; // 用户自定义参数 UserData *eventUser = new UserData ; eventUser->data= 201; static bool isback = true; ArkUI_ContextCallback *update = new ArkUI_ContextCallback; update->userData = eventUser; update->callback = [](void *user) { OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode animateTo %{public}d", reinterpret_cast<UserData*>(user)->data); // 对应的属性变化 width height if (isback) { ArkUI_NumberValue custom_widthValue[] = {200}; ArkUI_AttributeItem custom_widthItem = {custom_widthValue, 1}; ArkUI_NumberValue custom_heightValue1[] = {80}; ArkUI_AttributeItem custom_heightItem1 = {custom_heightValue1, 1}; nodeAPI->setAttribute(textInput, NODE_WIDTH, &custom_widthItem); nodeAPI->setAttribute(textInput, NODE_HEIGHT, &custom_heightItem1); } else { ArkUI_NumberValue custom_widthValue[] = {100}; ArkUI_AttributeItem custom_widthItem = {custom_widthValue, 1}; ArkUI_NumberValue custom_heightValue1[] = {40}; ArkUI_AttributeItem custom_heightItem1 = {custom_heightValue1, 1}; nodeAPI->setAttribute(textInput, NODE_WIDTH, &custom_widthItem); nodeAPI->setAttribute(textInput, NODE_HEIGHT, &custom_heightItem1); } }; // 执行对应的动画 animateApi->animateTo(context, option, update, completeCallback);
组件出现/消失转场
组件内转场通过NODE_XX_TRANSITION属性(XX包括:OPACITY、TRANSLATE、SCALE、ROTATE、MOVE)配置转场参数,在组件插入和删除时显示过渡动效(通过NODE_TRANSFORM_CENTER属性设置NODE_SCALE_TRANSITION和NODE_ROTATE_ROTATE动效的中心点坐标)。主要用于容器组件中子组件插入和删除时,提升用户体验。
-
创建可交互界面,界面中包含Button,点击可以控制转场节点的添加和移除。
constexpr int32_t BUTTON_CLICK_ID = 1; bool flag = false; ArkUI_NodeHandle parrentNode; ArkUI_NodeHandle childNode; ArkUI_NodeHandle buttonNode; void mainViewMethod(OH_NativeXComponent *component) { if (!component) { return; } ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); ArkUI_NodeHandle column = nodeAPI->createNode(ARKUI_NODE_COLUMN); ArkUI_NumberValue widthValue[] = {{.f32 = 500}}; ArkUI_AttributeItem widthItem = {.value = widthValue, .size = sizeof(widthValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(column, NODE_WIDTH, &widthItem); ArkUI_NumberValue heightValue[] = {{.f32 = 500}}; ArkUI_AttributeItem heightItem = {.value = heightValue, .size = sizeof(heightValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(column, NODE_HEIGHT, &heightItem); ArkUI_NodeHandle buttonShow = nodeAPI->createNode(ARKUI_NODE_BUTTON); ArkUI_NumberValue buttonWidthValue[] = {{.f32 = 200}}; ArkUI_AttributeItem buttonWidthItem = {.value = buttonWidthValue, .size = sizeof(buttonWidthValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(buttonShow, NODE_WIDTH, &buttonWidthItem); ArkUI_NumberValue buttonHeightValue[] = {{.f32 = 50}}; ArkUI_AttributeItem buttonHeightItem = {.value = buttonHeightValue, .size = sizeof(buttonHeightValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(buttonShow, NODE_HEIGHT, &buttonHeightItem); ArkUI_AttributeItem labelItem = {.string = "show"}; nodeAPI->setAttribute(buttonShow, NODE_BUTTON_LABEL, &labelItem); ArkUI_NumberValue buttonOpenTypeValue[] = {{.i32 = static_cast<int32_t>(ARKUI_BUTTON_TYPE_NORMAL)}}; ArkUI_AttributeItem buttonOpenTypeItem = {.value = buttonOpenTypeValue, .size = sizeof(buttonOpenTypeValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(buttonShow, NODE_BUTTON_TYPE, &buttonOpenTypeItem); ArkUI_NumberValue buttonShowMarginValue[] = {{.f32 = 20}}; ArkUI_AttributeItem buttonShowMarginItem = {.value = buttonShowMarginValue, .size = sizeof(buttonShowMarginValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(buttonShow, NODE_MARGIN, &buttonShowMarginItem); nodeAPI->registerNodeEvent(buttonShow, NODE_ON_CLICK, BUTTON_CLICK_ID, nullptr); nodeAPI->addNodeEventReceiver(buttonShow, OnButtonShowClicked); parrentNode = column; buttonNode = buttonShow; nodeAPI->addChild(column, buttonShow); OH_NativeXComponent_AttachNativeRootNode(component, column); }
-
创建一个设置了Transition属性的节点,当目标节点上下树时会播放转场动画。
ArkUI_NodeHandle CreateChildNode() { ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); ArkUI_NodeHandle image = nodeAPI->createNode(ARKUI_NODE_IMAGE); ArkUI_AttributeItem imageSrcItem = {.string = "/pages/common/scenery.jpg"}; nodeAPI->setAttribute(image, NODE_IMAGE_SRC, &imageSrcItem); ArkUI_NumberValue textWidthValue[] = {{.f32 = 300}}; ArkUI_AttributeItem textWidthItem = {.value = textWidthValue, .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_WIDTH, &textWidthItem); ArkUI_NumberValue textHeightValue[] = {{.f32 = 300}}; ArkUI_AttributeItem textHeightItem = {.value = textHeightValue, .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_HEIGHT, &textHeightItem); ArkUI_NumberValue transformCenterValue[] = {0.0f, 0.0f, 0.0f, 0.5f, 0.5f}; ArkUI_AttributeItem transformCenterItem = {.value = transformCenterValue, .size = sizeof(transformCenterValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_TRANSFORM_CENTER, &transformCenterItem); ArkUI_NumberValue rotateAnimationValue[] = {0.0f, 0.0f, 1.0f, 360.0f, 0.0f, {.i32 = 500}, {.i32 = static_cast<int32_t>(ARKUI_CURVE_SHARP)}}; ArkUI_AttributeItem rotateAnimationItem = {.value = rotateAnimationValue, .size = sizeof(rotateAnimationValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_ROTATE_TRANSITION, &rotateAnimationItem); ArkUI_NumberValue scaleAnimationValue[] = { 0.0f, 0.0f, 0.0f, {.i32 = 500}, {.i32 = static_cast<int32_t>(ARKUI_CURVE_SHARP)}}; ArkUI_AttributeItem scaleAnimationItem = {.value = scaleAnimationValue, .size = sizeof(scaleAnimationValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_SCALE_TRANSITION, &scaleAnimationItem); ArkUI_NumberValue translateAnimationValue[] = { 200, 200, 0.0f, {.i32 = 500}, {.i32 = static_cast<int32_t>(ARKUI_CURVE_SHARP)}}; ArkUI_AttributeItem translateAnimationItem = {.value = translateAnimationValue, .size = sizeof(translateAnimationValue) / sizeof(ArkUI_NumberValue)}; nodeAPI->setAttribute(image, NODE_TRANSLATE_TRANSITION, &translateAnimationItem); return image; }
-
在Button的监听回调里添加转场节点上下树逻辑,以此控制转场节点的入场和出场。
void OnButtonShowClicked(ArkUI_NodeEvent* event) { if (!event) { return; } if (!childNode) { childNode = CreateChildNode(); } ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>( OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1")); if (flag) { flag = false; ArkUI_AttributeItem labelItem = {.string = "show"}; nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem); nodeAPI->removeChild(parrentNode, childNode); } else { flag = true; ArkUI_AttributeItem labelItem = {.string = "hide"}; nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem); nodeAPI->addChild(parrentNode, childNode); } }
最后
小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员
→ 鸿蒙HarmonyOS Next 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~
这份鸿蒙(HarmonyOS NEXT)包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、(南向驱动、嵌入式等)鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。