怎么管理购物网站怎样在门户网站做网络推广

怎么管理购物网站,怎样在门户网站做网络推广,广州企业模板建站,企业网站的设计风格鸿蒙原生系列之关键帧动画〇、前言一、动画分类3、关键帧动画3.1、ArkUI_KeyframeAnimateOption3.2、动画时间与播放次数3.3、注册动画分段回调3.4、注册动画结束回调3.5、播放关键帧动画二、动画实现3、关键帧动画3.1、自定义按钮形状3.2、实现页面结构3.3、实现关键帧动画3.4…鸿蒙原生系列之关键帧动画〇、前言一、动画分类3、关键帧动画3.1、ArkUI_KeyframeAnimateOption3.2、动画时间与播放次数3.3、注册动画分段回调3.4、注册动画结束回调3.5、播放关键帧动画二、动画实现3、关键帧动画3.1、自定义按钮形状3.2、实现页面结构3.3、实现关键帧动画3.4、真机演示〇、前言上一篇已经系统性学习了转场动画这种动画效果接下来继续学习另一种动画效果关键帧动画。关键帧动画的代码总体上与最早学习的动画效果——属性动画更为解决都是需要用到专门的 API 接口——ArkUI_NativeAnimateAPI_1指针而在转场动画的实现代码中就完全不需要这个特殊API反而像设置组件的尺寸那样写即可。一、动画分类3、关键帧动画3.1、ArkUI_KeyframeAnimateOption与属性动画的实现流程一样关键帧动画也是需要先准备好动画参数对象而在关键帧动画这边这个关键的动画参对象就是ArkUI_KeyframeAnimateOption。这个 ArkUI_KeyframeAnimateOption 对象的原型SDK中尚未披露所以 暂时无法深入了解它的结构。ArkUI_KeyframeAnimateOption 对象实例需要使用OH_ArkUI_KeyframeAnimateOption_Create方法创建而该方法接受一个int32_t类型的参数并且参数值与关键帧动画段数密切相关。3.2、动画时间与播放次数有了 ArkUI_KeyframeAnimateOption 实例后就可以借助它去完成关键帧动画的持续时间和播放次数的设置。设置关键帧动画持续时间需要使用方法OH_ArkUI_KeyframeAnimateOption_SetDuration(ArkUI_KeyframeAnimateOption* option, int32_t value, int32_t index)参数 value 传入用于设置具体的持续时间而 index 则指明此次设置作用在哪段关键帧动画上。关键帧动画播放次数用方法OH_ArkUI_KeyframeAnimateOption_SetIterations(ArkUI_KeyframeAnimateOption* option, int32_t value)进行设置播放次数无需分段设置直接作用在所有关键帧动画段上。3.3、注册动画分段回调此前就说过了动画也是一种事件动画是支持设置回调函数的。在关键帧动画这边允许给每一段动画分别设置回调。设置动画回调统一用OH_ArkUI_KeyframeAnimateOption_RegisterOnEventCallback(ArkUI_KeyframeAnimateOption* option, void* userData, void (*event)(void* userData), int32_t index)方法在回调函数也即上面的闭包函数中我们便可以编写动画相关的代码比如改变目标组件的尺寸或颜色等等。3.4、注册动画结束回调动画播放结束是一个非常关键的事件所以少不了设置对应的回调在关键帧动画这边是用OH_ArkUI_KeyframeAnimateOption_RegisterOnFinishCallback(ArkUI_KeyframeAnimateOption* option, void* userData, void (*onFinish)(void* userData))方法进行处理的在闭包函数中我们便可以进行自定义处理比如发送一些消息通知什么的亦或者进行UI回显。3.5、播放关键帧动画上面的那些说到底只是为关键帧动画进行必要的准备并没有真正进行关键帧动画的播放要进行播放就少不了用上 ArkUI_NativeAnimateAPI_1 指针。在 ArkUI_NativeAnimateAPI_1 的函数成员中有一个专门用于播放关键帧动画的int32_t (*keyframeAnimateTo)(ArkUI_ContextHandle context, ArkUI_KeyframeAnimateOption* option)方法。二、动画实现3、关键帧动画既然关键帧动画的相关理论或者说相关API都已经认识了那么接下来便可以真刀真枪开始代码实践了毕竟纸上得来终觉浅躬行方知事原委。3.1、自定义按钮形状如图所示此次关键帧动画的作用对象是一个按钮、圆形的按钮然而无论是 ArkTS 代码还是 C按钮组件的默认形状都不是圆形的而是胶囊形的要改变按钮形状就必须显式地设置按钮形状。为了支持按钮形状的自定义设置需要在 ArkUIButtonNode.h 中新增如下的一个公共方法voidSetButtonType(ArkUI_ButtonType type){assert(handle_);ArkUI_NumberValue value[]{{.i32type}};ArkUI_AttributeItem item{value,1};nativeModule_-setAttribute(handle_,NODE_BUTTON_TYPE,item);}而在 ArkUI_ButtonType 枚举类中所有的按钮形状有如下3.2、实现页面结构在编写有关关键帧动画的代码之前先把页面整体结构给实现出来。如上图所示除去 ArkTS 实现的部分页面结构外剩下的是一个按钮而这个按钮实际上可以放在一个看不见的 Column 中这里特别提醒一下在 DevEco Studio 中实际上是有一个可以专门分析页面结构的 ArkUI Inspector 工具的工具入口默认位置在 IDE 界面左下角的位置跟日志工具的入口挨着。实现这部分C代码实现的页面结构不妨放在testKeyFrameAnimate方法体中std::shared_ptrArkUIButtonNodeg_keyFrame_buttonnullptr;std::shared_ptrArkUIBaseNodetestKeyFrameAnimate(){autocolumnstd::make_sharedArkUIColumnNode();column-SetPercentWidth(1.0f);column-SetPercentHeight(1.0f);autobuttonstd::make_sharedArkUIButtonNode();button-SetEnable();button-SetButtonType(ARKUI_BUTTON_TYPE_CIRCLE);button-SetWidth(150);button-SetHeight(150);button-SetBackgroundColor(0xFF000000);button-SetLabel(Click);button-SetMargin(20.0,0.0,0.0,0.0);g_keyFrame_buttonbutton;column-AddChild(button);returncolumn;}很简单的一段代码。3.3、实现关键帧动画既然作用对象是一个按钮不妨将关键帧动画的实现代码全都放在按钮点击事件的回调处理函数中// 注册按钮点击事件button-RegisterNodeEvent(button-GetHandle(),NODE_ON_CLICK,1,nullptr);// 定义按钮点击处理回调函数autoonClick[](ArkUI_NodeEvent*event){showUITextCallback(关键帧动画,开始演示);// 设置ArkUI_KeyframeAnimateOption参数staticArkUI_KeyframeAnimateOption*optionOH_ArkUI_KeyframeAnimateOption_Create(2);// 关键帧动画状态数OH_ArkUI_KeyframeAnimateOption_SetDuration(option,2000,0);// 第一段关键帧动画的持续时间OH_ArkUI_KeyframeAnimateOption_SetDuration(option,2000,1);// 第二段关键帧动画的持续时间OH_ArkUI_KeyframeAnimateOption_SetIterations(option,5);// 关键帧动画播放次数OH_ArkUI_KeyframeAnimateOption_RegisterOnEventCallback(option,nullptr,[](void*user){showUITextCallback(关键帧动画,放大按钮);g_keyFrame_button-SetWidth(200);g_keyFrame_button-SetHeight(200);},0);// 第一段关键帧时刻状态的闭包函数OH_ArkUI_KeyframeAnimateOption_RegisterOnEventCallback(option,nullptr,[](void*user){showUITextCallback(关键帧动画,缩小按钮);g_keyFrame_button-SetWidth(80);g_keyFrame_button-SetHeight(80);},1);// 第二段关键帧时刻状态的闭包函数OH_ArkUI_KeyframeAnimateOption_RegisterOnFinishCallback(option,nullptr,[](void*user){showUITextCallback(关键帧动画,结束演示);OH_LOG_Print(LOG_APP,LOG_INFO,LOG_PRINT_DOMAIN,Manager,keyframe animate finish);});// 关键帧动画结束回调ArkUI_ExpectedFrameRateRange*rangenewArkUI_ExpectedFrameRateRange;range-max120;range-expected60;range-min30;OH_ArkUI_KeyframeAnimateOption_SetExpectedFrameRate(option,range);// 关键帧设置期望帧率// 获取ArkUI_NativeAnimateAPI接口autoanimateApiNativeModuleInstance::GetInstance()-GetNativeAnimateAPI();// 获取context对象staticArkUI_ContextHandle contextnullptr;contextOH_ArkUI_GetContextByNode(g_keyFrame_button-GetHandle());// 执行对应的动画animateApi-keyframeAnimateTo(context,option);};// 设置按钮点击事件接收器button-RegisterNodeEventReceiver(onClick);与之前一样用一个全局的g_keyFrame_button变量去持有按钮组件节点的实例从而方便在闭包函数中动态地设置按钮的尺寸——OH_ArkUI_KeyframeAnimateOption_RegisterOnEventCallback的闭包函数体中以及执行animateApi-keyframeAnimateTo(context, option)前获取按钮组件对应的上下文信息。3.4、真机演示修改 NativeEntry.cpp 中 CreateNativeRoot 方法中的根节点代码napi_valueCreateNativeRoot(napi_env env,napi_callback_info info){size_t argc1;napi_value args[1]{nullptr};napi_get_cb_info(env,info,argc,args,nullptr,nullptr);// 获取 NodeContentArkUI_NodeContentHandle contentHandle;OH_ArkUI_GetNodeContentFromNapiValue(env,args[0],contentHandle);NativeEntry::GetInstance()-SetContentHandle(contentHandle);// 创建文本列表// auto list CreateTextListExample();// NativeEntry::GetInstance()-SetRootNode(list);// 创建 Column// auto column testGestureExample();// NativeEntry::GetInstance()-SetRootNode(column);// 创建 image// auto image CreateDragImageExample();// NativeEntry::GetInstance()-SetRootNode(image);// 演示动画// auto column testFrameAnimate();// NativeEntry::GetInstance()-SetRootNode(column);// auto column testPropertiesAnimate();// NativeEntry::GetInstance()-SetRootNode(column);// auto column testTransitionAnimate();// NativeEntry::GetInstance()-SetRootNode(column);autocolumntestKeyFrameAnimate();NativeEntry::GetInstance()-SetRootNode(column);returnnullptr;}