使用动画开发指导
========

本篇中的所有示例仅提供核心接口的调用方法，完整的示例工程请参考[AnimationNDK](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/ArkUISample/AnimationNDK)。

#### 使用属性动画

该示例主要演示了如何通过全局[animateTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativeanimateapi-1#animateto)接口添加属性动画。NDK接口开发的UI界面挂载到ArkTS主页面的完整流程可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7d/v3/_LOv1oofTL26_sp8a2EOVw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=F18824AF0B2A4FF5AB7FF58BF7BEC2FD29D8E35D59D296B41AAC269A0D4F602D)

*   需要执行的动画属性变化必须写在[ArkUI\_ContextCallback](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-contextcallback)中的callback中。
    
*   需要执行的动画属性，必须在执行动画之前设置过。
    

1.  在.ets文件中创建[NodeContent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-nodecontent)，把NodeContent作为参数输出到Native方法中。
    
    // 初始化NodeContent对象。
    private rootSlot = new NodeContent();
    @State @Watch('changeNativeFlag') showNative: boolean = false;
    // ...
    changeNativeFlag(): void {
      // ...
      if (this.showNative) {
        // 传递NodeContent对象用于Native创建组件的挂载显示
        nativeNode?.createNativeRoot(this.rootSlot);
      } else {
        // ...
      }
    }
    
2.  解析NodeContent，转换为C中的[ArkUI\_NodeContentHandle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nodecontent8h)对象。
    
    // 获取NodeContent
    ArkUI\_NodeContentHandle contentHandle;
    OH\_ArkUI\_GetNodeContentFromNapiValue(env, args\[0\], &contentHandle);
    
3.  获取[ArkUI\_NativeAnimateAPI\_1](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativeanimateapi-1)对象。
    
    // 获取ArkUI\_NativeAnimateAPI\_1接口
    ArkUI\_NativeAnimateAPI\_1 \*animateApi = nullptr;
    OH\_ArkUI\_GetModuleInterface(ARKUI\_NATIVE\_ANIMATE, ArkUI\_NativeAnimateAPI\_1, animateApi);
    
4.  设置[ArkUI\_AnimateOption](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-animateoption)参数，通过提供的C方法设置对应的参数。
    
    // 设置动画参数
    ArkUI\_AnimateOption \*option = OH\_ArkUI\_AnimateOption\_Create();
    OH\_ArkUI\_AnimateOption\_SetDuration(option, NUM\_2000); // NUM\_2000 = 2000
    OH\_ArkUI\_AnimateOption\_SetTempo(option, 1.1);
    OH\_ArkUI\_AnimateOption\_SetCurve(option, ARKUI\_CURVE\_EASE);
    ArkUI\_CurveHandle cubicBezierCurve = OH\_ArkUI\_Curve\_CreateCubicBezierCurve(0.5f, 4.0f, 1.2f, 0.0f);
    // 设置动画的动画曲线，优先于OH\_ArkUI\_AnimateOption\_SetCurve生效
    OH\_ArkUI\_AnimateOption\_SetICurve(option, cubicBezierCurve);
    OH\_ArkUI\_AnimateOption\_SetDelay(option, NUM\_20); // NUM\_20 = 20
    OH\_ArkUI\_AnimateOption\_SetIterations(option, NUM\_1); // NUM\_1 = 1
    OH\_ArkUI\_AnimateOption\_SetPlayMode(option, ARKUI\_ANIMATION\_PLAY\_MODE\_REVERSE);
    ArkUI\_ExpectedFrameRateRange \*range = new ArkUI\_ExpectedFrameRateRange;
    range->min = NUM\_10; // NUM\_10 = 10
    range->max = NUM\_120; // NUM\_120 = 120
    range->expected = NUM\_60; // NUM\_60 = 60
    OH\_ArkUI\_AnimateOption\_SetExpectedFrameRateRange(option, range);
    
5.  设置回调参数。
    
    // 设置完成的回调
    ArkUI\_AnimateCompleteCallback \*completeCallback = new ArkUI\_AnimateCompleteCallback;
    completeCallback->type = ARKUI\_FINISH\_CALLBACK\_REMOVED;
    // 结构体AnimateData中包含ArkUI\_AnimateOption\* option和ArkUI\_CurveHandle curve
    AnimateData\* data = new AnimateData();
    data->option = option;
    data->curve = cubicBezierCurve;
    completeCallback->userData = reinterpret\_cast<void\*>(data);
    completeCallback->callback = \[\](void \*userData) {
        AnimateData\* data = reinterpret\_cast<AnimateData\*>(userData);
        if (data) {
            ArkUI\_AnimateOption\* option = data->option;
            ArkUI\_CurveHandle curve = data->curve;
            if (option) {
                OH\_ArkUI\_AnimateOption\_Dispose(option);
                OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, LOG\_PRINT\_DOMAIN,
                    "Init", "CXX OH\_ArkUI\_AnimateOption\_Dispose  success!");
            }
            if (curve) {
                OH\_ArkUI\_Curve\_DisposeCurve(curve);
                OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, LOG\_PRINT\_DOMAIN,
                    "Init", "CXX OH\_ArkUI\_Curve\_DisposeCurve  success!");
            }
            delete data; // 释放结构体
        }
    };
                
    // 设置闭包函数
    static bool isback = true;
    ArkUI\_ContextCallback \*update = new ArkUI\_ContextCallback;
    update->callback = \[\](void \*user) {
        // 对应的属性变化 width height
        if (isback) {
            g\_animateto\_button->SetWidth(NUM\_200); // NUM\_200 = 200
            g\_animateto\_button->SetHeight(NUM\_80); // NUM\_80 = 80
            g\_animateto\_button->SetBackgroundColor(0xFFA280FF);
        } else {
            g\_animateto\_button->SetWidth(NUM\_100); // NUM\_100 = 100
            g\_animateto\_button->SetHeight(NUM\_40); // NUM\_40 = 40
            g\_animateto\_button->SetBackgroundColor(0xFFFF2E77);
        }
        isback = !isback;
    };
    // 执行对应的动画
    animateApi->animateTo(context, option, update, completeCallback);
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3e/v3/_HlsyzHPRrmo7-SxO0Npbg/zh-cn_image_0000002594828194.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=CC70A70E7D6693FC74D5F8AA70CC31201794B29189E11DAAC144DD45EF8FD72D)
    

#### 组件出现/消失转场

该示例主要演示了如何通过[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_ROTATE\_TRANSITION，NODE\_SCALE\_TRANSITION，NODE\_TRANSLATE\_TRANSITION属性配置转场参数，并通过[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_TRANSFORM\_CENTER属性设置NODE\_SCALE\_TRANSITION和NODE\_ROTATE\_TRANSITION动效的中心点坐标，实现组件的插入和删除时显示过渡动效。

1.  创建可交互界面，界面中包含一个Button组件，点击可以控制转场节点的添加和移除。其中[ArkUI\_NodeContentHandle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nodecontent8h)类型节点的获取与使用可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。
    
    constexpr int32\_t BUTTON\_CLICK\_ID = 1;
    constexpr int32\_t STACK\_CLICK\_ID = 2;
    bool g\_flag = false;
    bool t\_flag = false;
    ArkUI\_NodeHandle parentNode;
    ArkUI\_NodeHandle childNode;
    ArkUI\_NodeHandle ContainerNode;
    ArkUI\_NodeHandle firstImageNode;
    ArkUI\_NodeHandle secondImageNode;
    ArkUI\_NodeHandle buttonNode;
    // ...
    void mainViewMethod(ArkUI\_NodeContentHandle handle)
    {
        ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
        ArkUI\_NodeHandle columnMain = nodeAPI->createNode(ARKUI\_NODE\_COLUMN);
        ArkUI\_NumberValue columnMainWidthValue\[\] = {{.f32 = 500}};
        ArkUI\_AttributeItem columnMainWidthItem = {.value = columnMainWidthValue,
                                                   .size = sizeof(columnMainWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(columnMain, NODE\_WIDTH, &columnMainWidthItem);
        ArkUI\_NumberValue columnMainHeightValue\[\] = {{.f32 = 800}};
        ArkUI\_AttributeItem columnMainHeightItem = {.value = columnMainHeightValue,
                                                    .size = sizeof(columnMainHeightValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(columnMain, NODE\_HEIGHT, &columnMainHeightItem);
    
        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 = 400}};
        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);
        // ...
        parentNode = column;
        buttonNode = buttonShow;
        nodeAPI->addChild(columnMain, column);
        nodeAPI->addChild(column, buttonShow);
        // ...
        OH\_ArkUI\_NodeContent\_AddNode(handle, columnMain);
    }
    
2.  创建一个设置了[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_ROTATE\_TRANSITION，NODE\_SCALE\_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;
    }
    
3.  在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 (g\_flag) {
            g\_flag = false;
            ArkUI\_AttributeItem labelItem = {.string = "show"};
            nodeAPI->setAttribute(buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
            nodeAPI->removeChild(parentNode, childNode);
        } else {
            g\_flag = true;
            ArkUI\_AttributeItem labelItem = {.string = "hide"};
            nodeAPI->setAttribute(buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
            nodeAPI->addChild(parentNode, childNode);
        }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f1/v3/sCO45iobSsGaNgMCq_xkVA/zh-cn_image_0000002625187641.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=FA6B2A9E41BACFBF3B06AAAD916F6C6232DC9636DC7A23F94B9CD700708D8782)
    

#### 一镜到底转场

该示例主要演示如何通过[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_GEOMETRY\_TRANSITION属性来实现一镜到底转场，NDK接口开发的UI界面挂载到ArkTS主页面的完整流程可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。

1.  创建一个设置了[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_GEOMETRY\_TRANSITION属性的image节点，同时设置该节点的宽度、高度和位置，用于区别于另一个image节点，然后将当前image节点挂载到一个父节点，当前示例中父节点为stack。
    
    void imageTransitionViewMethod()
    {
        ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
        ArkUI\_NodeHandle stack = nodeAPI->createNode(ARKUI\_NODE\_STACK);
        ArkUI\_NumberValue stackWidthValue\[\] = {{.f32 = NUM\_500}};
        ArkUI\_AttributeItem stackWidthItem = {.value = stackWidthValue,
                                              .size = sizeof(stackWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(stack, NODE\_WIDTH, &stackWidthItem);
        ArkUI\_NumberValue stackHeightValue\[\] = {{.f32 = NUM\_500}};
        ArkUI\_AttributeItem stackHeightItem = {.value = stackHeightValue,
                                               .size = sizeof(stackHeightValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(stack, NODE\_HEIGHT, &stackHeightItem);
        nodeAPI->registerNodeEvent(stack, NODE\_ON\_CLICK, STACK\_CLICK\_ID, nullptr);
        nodeAPI->addNodeEventReceiver(stack, OnImageTransitionClicked);
        ArkUI\_NodeHandle firstImage = nodeAPI->createNode(ARKUI\_NODE\_IMAGE);
        ArkUI\_AttributeItem imageSrcItem = {.string = "/pages/common/scenery.jpg"};
        nodeAPI->setAttribute(firstImage, NODE\_IMAGE\_SRC, &imageSrcItem);
        ArkUI\_NumberValue textWidthValue\[\] = {{.f32 = 50}};
        ArkUI\_AttributeItem textWidthItem = {.value = textWidthValue,
                                             .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(firstImage, NODE\_WIDTH, &textWidthItem);
        ArkUI\_NumberValue textHeightValue\[\] = {{.f32 = 50}};
        ArkUI\_AttributeItem textHeightItem = {.value = textHeightValue,
                                              .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(firstImage, NODE\_HEIGHT, &textHeightItem);
        ArkUI\_NumberValue borderRadiusValue\[\] = {{.f32 = 25}};
        ArkUI\_AttributeItem borderRadiusItem = {.value = borderRadiusValue,
                                                .size = sizeof(borderRadiusValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(firstImage, NODE\_BORDER\_RADIUS, &borderRadiusItem);
        ArkUI\_NumberValue clipValue1\[\] = {{.i32 = true}};
        ArkUI\_AttributeItem clipValue = {clipValue1, 1};
        nodeAPI->setAttribute(firstImage, NODE\_CLIP, &clipValue);
        ArkUI\_AnimateOption \*option = OH\_ArkUI\_AnimateOption\_Create();
        auto opacityTransitionEffect = OH\_ArkUI\_CreateOpacityTransitionEffect(0.8);
        OH\_ArkUI\_TransitionEffect\_SetAnimation(opacityTransitionEffect, option);
        ArkUI\_AttributeItem transitionItem = {.object = opacityTransitionEffect};
        nodeAPI->setAttribute(firstImage, NODE\_TRANSITION, &transitionItem);
        ArkUI\_AttributeItem geometryTransitionItem = {.string = "TransitionPicture"};
        nodeAPI->setAttribute(firstImage, NODE\_GEOMETRY\_TRANSITION, &geometryTransitionItem);
        ArkUI\_NumberValue positionValue1\[\] = {{.f32 = 70}, {.f32 = 50}};
        ArkUI\_AttributeItem positionValue\_item1 = {positionValue1, 2};
        nodeAPI->setAttribute(firstImage, NODE\_POSITION, &positionValue\_item1);
        ArkUI\_AttributeItem item1 = {.string = "firstImage"};
        nodeAPI->setAttribute(firstImage, NODE\_ID, &item1);
        ContainerNode = stack;
        firstImageNode = firstImage;
    }
    
2.  再创建一个设置了[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_GEOMETRY\_TRANSITION属性的image节点，属性值与第一个image节点相同，同时为该节点设置不同的宽度、高度和位置。
    
    ArkUI\_NodeHandle CreateImageNode()
    {
        ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
        ArkUI\_NodeHandle secondImage = nodeAPI->createNode(ARKUI\_NODE\_IMAGE);
        ArkUI\_AttributeItem imageSrcItem = {.string = "/pages/common/sky.jpg"};
        nodeAPI->setAttribute(secondImage, NODE\_IMAGE\_SRC, &imageSrcItem);
        ArkUI\_NumberValue textWidthValue\[\] = {{.f32 = 200}};
        ArkUI\_AttributeItem textWidthItem = {.value = textWidthValue,
                                             .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(secondImage, NODE\_WIDTH, &textWidthItem);
        ArkUI\_NumberValue textHeightValue\[\] = {{.f32 = 200}};
        ArkUI\_AttributeItem textHeightItem = {.value = textHeightValue,
                                              .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(secondImage, NODE\_HEIGHT, &textHeightItem);
        ArkUI\_NumberValue borderRadiusValue\[\] = {{.f32 = 50}};
        ArkUI\_AttributeItem borderRadiusItem = {.value = borderRadiusValue,
                                                .size = sizeof(borderRadiusValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(secondImage, NODE\_BORDER\_RADIUS, &borderRadiusItem);
        ArkUI\_NumberValue clipValue1\[\] = {{.i32 = true}};
        ArkUI\_AttributeItem clipValue = {clipValue1, 1};
        nodeAPI->setAttribute(secondImage, NODE\_CLIP, &clipValue);
        ArkUI\_AttributeItem item2 = {.string = "secondImage"};
        nodeAPI->setAttribute(secondImage, NODE\_ID, &item2);
    
        ArkUI\_AnimateOption \*option = OH\_ArkUI\_AnimateOption\_Create();
        auto opacityTransitionEffect = OH\_ArkUI\_CreateOpacityTransitionEffect(0.8);
        OH\_ArkUI\_TransitionEffect\_SetAnimation(opacityTransitionEffect, option);
        ArkUI\_AttributeItem transitionItem = {.object = opacityTransitionEffect};
        nodeAPI->setAttribute(secondImage, NODE\_TRANSITION, &transitionItem);
    
        ArkUI\_NumberValue positionValue1\[\] = {{.f32 = 225}, {.f32 = 0}};
        ArkUI\_AttributeItem positionValue\_item1 = {positionValue1, 2};
        nodeAPI->setAttribute(secondImage, NODE\_POSITION, &positionValue\_item1);
        return secondImage;
    }
    
3.  在stack的OnImageTransitionClicked监听回调函数中添加两个节点的上下树逻辑，控制节点的上下树，确保同时只有一个节点存在，同时，当其中一个节点挂载到父节点时需要重置[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的NODE\_GEOMETRY\_TRANSITION属性的值，并重新设置为原来的值。
    
    void OnImageTransitionClicked(ArkUI\_NodeEvent \*event)
    {
        if (!event) {
            return;
        }
        if (!secondImageNode) {
            secondImageNode = CreateImageNode();
        }
        static ArkUI\_ContextHandle context = nullptr;
        context = OH\_ArkUI\_GetContextByNode(ContainerNode);
    
        ArkUI\_NativeAnimateAPI\_1 \*animateApi = nullptr;
        OH\_ArkUI\_GetModuleInterface(ARKUI\_NATIVE\_ANIMATE, ArkUI\_NativeAnimateAPI\_1, animateApi);
        static ArkUI\_AnimateOption \*option = OH\_ArkUI\_AnimateOption\_Create();
        OH\_ArkUI\_AnimateOption\_SetDuration(option, NUM\_300);
        OH\_ArkUI\_AnimateOption\_SetCurve(option, ARKUI\_CURVE\_EASE\_IN\_OUT);
        ArkUI\_AnimateCompleteCallback \*completeCallback = new ArkUI\_AnimateCompleteCallback;
        completeCallback->type = ARKUI\_FINISH\_CALLBACK\_REMOVED;
        completeCallback->callback = \[\](void \*userData) {
        };
        ArkUI\_ContextCallback \*update = new ArkUI\_ContextCallback;
    
        update->callback = \[\](void \*user) {
            ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
                OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
            if (t\_flag) {
                t\_flag = false;
                nodeAPI->resetAttribute(firstImageNode, NODE\_GEOMETRY\_TRANSITION);
                ArkUI\_AttributeItem geometryTransitionItem = {.string = "TransitionPicture"};
                nodeAPI->setAttribute(firstImageNode, NODE\_GEOMETRY\_TRANSITION, &geometryTransitionItem);
                nodeAPI->addChild(ContainerNode, firstImageNode);
                nodeAPI->removeChild(ContainerNode, secondImageNode);
            } else {
                t\_flag = true;
                nodeAPI->resetAttribute(secondImageNode, NODE\_GEOMETRY\_TRANSITION);
                ArkUI\_AttributeItem geometryTransitionItem = {.string = "TransitionPicture"};
                nodeAPI->setAttribute(secondImageNode, NODE\_GEOMETRY\_TRANSITION, &geometryTransitionItem);
                nodeAPI->addChild(ContainerNode, secondImageNode);
                nodeAPI->removeChild(ContainerNode, firstImageNode);
            }
        };
        animateApi->animateTo(context, option, update, completeCallback);
        delete completeCallback;
        delete update;
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4e/v3/fEN2QymDTtWRAvFu0iCnnw/zh-cn_image_0000002625107785.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=533B03BA568A1F41096CF7730F3FB5752FD0DEC9580F5FF19655965230FC8FC1)
    

#### 使用关键帧动画

该示例主要演示如何通过[keyframeAnimateTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativeanimateapi-1#keyframeanimateto)来设置关键帧动画，NDK接口开发的UI界面挂载到ArkTS主页面的完整流程可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。

// ArkUIColumnNode为工程内封装的node类型
auto column = std::make\_shared<ArkUIColumnNode>();
// 设置宽度为300，NUM\_300 = 300
column->SetWidth(NUM\_300);
// 设置高度为250，NUM\_250 = 250
column->SetHeight(NUM\_250);
// 创建文本节点，内容区介绍“这是关键帧动画”
auto textNode = std::make\_shared<ArkUITextNode>();
textNode->SetTextContent("这是关键帧动画");
// 设置宽度为120，NUM\_120 = 120
textNode->SetWidth(NUM\_120);
// 设置高度为120，NUM\_120 = 120
textNode->SetHeight(NUM\_50);
// 创建Button，后续创建的关键帧动画作用在Button组件上
auto button = std::make\_shared<ArkUIButtonNode>();
// 设置Button初始宽高，NUM\_100 = 100
button->SetWidth(NUM\_100);
button->SetHeight(NUM\_100);
// 存储Button全局变量，在onTouch注册时需要使用
g\_keyframe\_button = button;
// 注册点击事件到Button上，NUM\_1 = 1
button->RegisterNodeEvent(button->GetHandle(), NODE\_ON\_CLICK, NUM\_1, nullptr);
g\_keyframe\_text = std::make\_shared<ArkUITextNode>();
// 此函数用于封装Text组件中打印Animateto参数值的功能，使用者根据需要自行封装
g\_keyframe\_text->KeyframeAnimatetoToString();
auto onTouch = \[\](ArkUI\_NodeEvent \*event) {
    // 点击Button按钮时触发该逻辑，NUM\_1 = 1
    if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_1) {
        // 获取context对象
        ArkUI\_ContextHandle context = nullptr;
        // std::shared\_ptr<ArkUIButtonNode> g\_keyframe\_button存储Button的全局变量，在onTouch注册时需要使用
        context = OH\_ArkUI\_GetContextByNode(g\_keyframe\_button->GetHandle());
        // 获取ArkUI\_NativeAnimateAPI\_1接口
        ArkUI\_NativeAnimateAPI\_1 \*animateApi = nullptr;
        OH\_ArkUI\_GetModuleInterface(ARKUI\_NATIVE\_ANIMATE, ArkUI\_NativeAnimateAPI\_1, animateApi);
            
        // 以下代码为创建关键帧动画的关键流程，包括设置关键帧动画参数、开启关键帧动画
        // 设置ArkUI\_KeyframeAnimateOption参数，通过提供的C方法设置对应的参数
        // 关键帧动画状态数，NUM\_2 = 2，NUM\_500 = 500
        ArkUI\_KeyframeAnimateOption \*option =  OH\_ArkUI\_KeyframeAnimateOption\_Create(NUM\_2);
        OH\_ArkUI\_KeyframeAnimateOption\_SetDelay(option, NUM\_500);
        // 第一段关键帧动画的持续时间，NUM\_1000 = 1000，NUM\_0 = 0
        OH\_ArkUI\_KeyframeAnimateOption\_SetDuration(option, NUM\_1000, NUM\_0);
        // 第二段关键帧动画的持续时间，NUM\_2000 = 2000，NUM\_1 = 1
        OH\_ArkUI\_KeyframeAnimateOption\_SetDuration(option, NUM\_2000, NUM\_1);
        // 关键帧动画播放次数，NUM\_5 = 5
        OH\_ArkUI\_KeyframeAnimateOption\_SetIterations(option, NUM\_5);
        ArkUI\_CurveHandle curve = OH\_ArkUI\_Curve\_CreateCubicBezierCurve(0.5f, 4.0f, 1.2f, 0.0f);
        // 以下四种曲线需要根据实际业务选择
        ArkUI\_CurveHandle springCurve = OH\_ArkUI\_Curve\_CreateSpringCurve(0.5f, 4.0f, 1.2f, 0.0f);
        ArkUI\_CurveHandle springMotionCurve = OH\_ArkUI\_Curve\_CreateSpringMotion(0.5f, 0.6f, 0.0f);
        ArkUI\_CurveHandle responsiveSpringMotionCurve = OH\_ArkUI\_Curve\_CreateResponsiveSpringMotion(0.5f,
            4.0f, 1.2f);
        ArkUI\_CurveHandle interpolatingSpringCurve = OH\_ArkUI\_Curve\_CreateInterpolatingSpring(0.5f,
            4.0f, 1.2f, 0.0f);
        OH\_ArkUI\_KeyframeAnimateOption\_SetCurve(option, curve, 1);
        OH\_ArkUI\_KeyframeAnimateOption\_RegisterOnEventCallback(option, nullptr, \[\](void \*userData) {
              g\_keyframe\_button->SetWidth(NUM\_150);
        }, NUM\_0); // 第一段关键帧时刻状态的闭包函数NUM\_150 = 150，NUM\_0 = 0
        OH\_ArkUI\_KeyframeAnimateOption\_RegisterOnEventCallback(option, nullptr, \[\](void \*userData) {
              g\_keyframe\_button->SetWidth(80);
        }, NUM\_1); // 第二段关键帧时刻状态的闭包函数NUM\_1 = 1
        KeyFrameAnimateToData\* data = new KeyFrameAnimateToData();
        data->option = option;
        data->curve = curve;
        OH\_ArkUI\_KeyframeAnimateOption\_RegisterOnFinishCallback(option, nullptr, \[\](void \*user) {
            KeyFrameAnimateToData\* data = reinterpret\_cast<KeyFrameAnimateToData\*>(user);
            if (data) {
                ArkUI\_KeyframeAnimateOption\* option = data->option;
                ArkUI\_CurveHandle curve = data->curve;
                if (option) {
                    OH\_ArkUI\_KeyframeAnimateOption\_Dispose(option);
                    OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, LOG\_PRINT\_DOMAIN,
                        "Init", "CXX OH\_ArkUI\_KeyframeAnimateOption\_Dispose  success!");
                }
                if (curve) {
                    OH\_ArkUI\_Curve\_DisposeCurve(curve);
                    OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, LOG\_PRINT\_DOMAIN,
                        "Init", "CXX OH\_ArkUI\_Curve\_DisposeCurve  success!");
                }
                delete data; // 释放结构体
            }
        }); // 关键帧动画结束回调
        ArkUI\_ExpectedFrameRateRange \*range = new ArkUI\_ExpectedFrameRateRange;
        range->max = NUM\_120; // NUM\_120 = 120
        range->expected = NUM\_60; // NUM\_60 = 60
        range->min = NUM\_30; // NUM\_30 = 30
        OH\_ArkUI\_KeyframeAnimateOption\_SetExpectedFrameRate(option, range); // 关键帧设置期望帧率

        // 执行对应的动画
        animateApi->keyframeAnimateTo(context, option);
        auto delay = OH\_ArkUI\_KeyframeAnimateOption\_GetDelay(option);
        auto iter = OH\_ArkUI\_KeyframeAnimateOption\_GetIterations(option);
        auto expected = OH\_ArkUI\_KeyframeAnimateOption\_GetExpectedFrameRate(option); // 获取关键帧动画参数的期望帧率
        auto dur0 = OH\_ArkUI\_KeyframeAnimateOption\_GetDuration(option, NUM\_1); // NUM\_1 = 1
        auto dur1 = OH\_ArkUI\_KeyframeAnimateOption\_GetDuration(option, NUM\_1);
        auto curves = OH\_ArkUI\_KeyframeAnimateOption\_GetCurve(option, NUM\_1); // 获取关键帧动画某段状态动画曲线
        g\_keyframe\_text->KeyframeAnimatetoToString(dur0, dur1, delay, iter, \*expected);
    }
};
// 注册点击事件的回调函数
button->RegisterNodeEventReceiver(onTouch);
// 将Button挂载在column上，返回column节点
column->AddChild(g\_keyframe\_text);
column->AddChild(textNode);
column->AddChild(button);

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b4/v3/gw24iiuRQ4m1OxwQ1x5FDg/zh-cn_image_0000002594668268.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=A7BB418F0F033E1F0A280AFD5F916A1AC7E861E5F459FC2625AF4F7E93D94C55)

#### 使用帧动画

该示例主要演示如何通过[createAnimator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativeanimateapi-1#createanimator)来设置帧动画。

std::shared\_ptr<ArkUIBaseNode> CreateAnimator()
{
    auto column = std::make\_shared<ArkUIColumnNode>();
    column->SetWidth(NUM\_300); // NUM\_300 = 300
    column->SetHeight(NUM\_250); // NUM\_250 = 250
    // 创建文本节点，内容区介绍“这是animator动画”
    auto textNode = std::make\_shared<ArkUITextNode>();
    textNode->SetTextContent("这是animator动画");
    textNode->SetWidth(NUM\_150); // NUM\_150 = 150
    textNode->SetHeight(NUM\_50); // NUM\_50 = 50
    // 创建createButton，用于初始化animator参数
    auto createButton = std::make\_shared<ArkUIButtonNode>();
    // 创建Button，后续创建的animator动画作用在Button组件上
    auto button = std::make\_shared<ArkUIButtonNode>();
    // 设置Button初始宽高，NUM\_100 = 100
    button->SetWidth(NUM\_100);
    button->SetHeight(NUM\_100);
    // 存储Button全局变量，在onTouch注册时需要使用
    g\_animator\_button = button;
    // 注册点击事件到Button上，NUM\_3 = 3
    createButton->RegisterNodeEvent(createButton->GetHandle(), NODE\_ON\_CLICK, NUM\_3, nullptr);
    g\_animator\_text = std::make\_shared<ArkUITextNode>();
    g\_animator\_text->AnimatorToString();
    auto onTouch = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_3 = 3
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_3) {
            // 获取context对象
            static ArkUI\_ContextHandle context = nullptr;
            context = OH\_ArkUI\_GetContextByNode(g\_animator\_button->GetHandle());

            // 获取ArkUI\_NativeAnimateAPI\_1接口
            ArkUI\_NativeAnimateAPI\_1 \*animateApi = nullptr;
            OH\_ArkUI\_GetModuleInterface(ARKUI\_NATIVE\_ANIMATE, ArkUI\_NativeAnimateAPI\_1, animateApi);
            
            // 以下代码为创建Animator动画的关键流程，包括设置Animator动画参数、开启Animator动画
            // 设置ArkUI\_AnimatorOption参数，通过提供的C方法设置对应的参数，NUM\_0 = 0
            static ArkUI\_AnimatorOption \*option =  OH\_ArkUI\_AnimatorOption\_Create(NUM\_0); // Animator动画状态数
            OH\_ArkUI\_AnimatorOption\_SetDuration(option, NUM\_2000); // NUM\_2000 = 2000
            OH\_ArkUI\_AnimatorOption\_SetDelay(option, NUM\_10); // NUM\_10 = 10
            OH\_ArkUI\_AnimatorOption\_SetIterations(option, NUM\_3); // NUM\_3 = 3
            OH\_ArkUI\_AnimatorOption\_SetFill(option, ARKUI\_ANIMATION\_FILL\_MODE\_NONE);
            OH\_ArkUI\_AnimatorOption\_SetDirection(option, ARKUI\_ANIMATION\_DIRECTION\_NORMAL);
            ArkUI\_CurveHandle curve = OH\_ArkUI\_Curve\_CreateCubicBezierCurve(0.5f, 4.0f, 1.2f, 0.0f); // 构造三阶贝塞尔曲线对象
            OH\_ArkUI\_AnimatorOption\_SetCurve(option, curve);
            OH\_ArkUI\_AnimatorOption\_SetBegin(option, NUM\_100); // NUM\_100 = 100
            OH\_ArkUI\_AnimatorOption\_SetEnd(option, NUM\_150); // NUM\_150 = 150
            ArkUI\_ExpectedFrameRateRange \*range = new ArkUI\_ExpectedFrameRateRange;
            range->max = NUM\_120; // NUM\_120 = 120
            range->expected = NUM\_60; // NUM\_60 = 60
            range->min = NUM\_30; // NUM\_30 = 30
            OH\_ArkUI\_AnimatorOption\_SetExpectedFrameRateRange(option, range);
            OH\_ArkUI\_AnimatorOption\_SetKeyframe(option, 0.5, 120.5, NUM\_0); // 设置animator动画关键帧参数，NUM\_0 = 0
            OH\_ArkUI\_AnimatorOption\_SetKeyframeCurve(option, curve, NUM\_0); // 设置animator动画关键帧曲线类型
            OH\_ArkUI\_AnimatorOption\_RegisterOnFrameCallback(option, nullptr, \[\](ArkUI\_AnimatorOnFrameEvent \*event)
            {
                OH\_ArkUI\_AnimatorOnFrameEvent\_GetUserData(event); // 获取动画事件对象中的用户自定义对象
                auto value = OH\_ArkUI\_AnimatorOnFrameEvent\_GetValue(event); // 获取动画事件对象中的当前进度
                OH\_LOG\_Print(LOG\_APP, LOG\_ERROR, LOG\_PRINT\_DOMAIN, "Init",
                    "CXX OH\_ArkUI\_AnimatorOption\_RegisterOnFrameCallback  %{public}f", value);
                g\_animator\_button->SetWidth(value);
            });
            OH\_ArkUI\_AnimatorOption\_RegisterOnFinishCallback(option, nullptr, \[\](ArkUI\_AnimatorEvent\* event)
            {
                OH\_ArkUI\_AnimatorEvent\_GetUserData(event); // 获取动画事件对象中的用户自定义对象
            });
            OH\_ArkUI\_AnimatorOption\_RegisterOnCancelCallback(option, nullptr, \[\](ArkUI\_AnimatorEvent\* event)
            {
            });
            OH\_ArkUI\_AnimatorOption\_RegisterOnRepeatCallback(option, nullptr, \[\](ArkUI\_AnimatorEvent\* event)
            {
            });
            // 执行对应的动画
            animatorHandle = animateApi->createAnimator(context, option);
            
            auto duration = OH\_ArkUI\_AnimatorOption\_GetDuration(option);
            auto delay = OH\_ArkUI\_AnimatorOption\_GetDelay(option);
            auto iterations = OH\_ArkUI\_AnimatorOption\_GetIterations(option);
            auto fill = OH\_ArkUI\_AnimatorOption\_GetFill(option);
            auto direction = OH\_ArkUI\_AnimatorOption\_GetDirection(option);
            auto curves = OH\_ArkUI\_AnimatorOption\_GetCurve(option); // 获取animator动画插值曲线
            auto begin = OH\_ArkUI\_AnimatorOption\_GetBegin(option);
            auto end = OH\_ArkUI\_AnimatorOption\_GetEnd(option); // 获取animator动画插值终点
            auto expected = OH\_ArkUI\_AnimatorOption\_GetExpectedFrameRateRange(option); // 获取关键帧动画参数的期望帧率
            auto keyframeTime = OH\_ArkUI\_AnimatorOption\_GetKeyframeTime(option, NUM\_0); // 获取animator动画关键帧时间
            auto keyframeValue = OH\_ArkUI\_AnimatorOption\_GetKeyframeValue(option, NUM\_0); // 获取animator动画关键帧数值
            auto keyframeCurve = OH\_ArkUI\_AnimatorOption\_GetKeyframeCurve(option, NUM\_0); // 获取animator动画关键帧动画插值曲线
            g\_animator\_text->AnimatorToString(duration, delay, iterations, fill, direction, begin,
                end, \*expected, keyframeTime, keyframeValue);
        }
    };

    // 注册点击事件的回调函数
    createButton->RegisterNodeEventReceiver(onTouch);
    createButton->SetButtonLabel("create");
    // 创建容器，用于存放Button按键
    auto buttoColumn = std::make\_shared<ArkUIColumnNode>();
    buttoColumn->SetPadding(NUM\_30, false); // 设置布局格式，调整组件内间距，NUM\_30 = 30
    buttoColumn->SetWidth(NUM\_300); // NUM\_300 = 300
    // 创建容器，用于存放playButton按键
    auto playButtonColumn = std::make\_shared<ArkUIColumnNode>();
    playButtonColumn->SetPadding(NUM\_10, false); // 设置布局格式，调整组件内间距，NUM\_10 = 10
    playButtonColumn->SetWidth(NUM\_300); // NUM\_300 = 300
    // 设置animator播放按钮
    auto playButton = std::make\_shared<ArkUIButtonNode>();
    playButton->SetButtonLabel("play");
    playButton->RegisterNodeEvent(playButton->GetHandle(), NODE\_ON\_CLICK, NUM\_4, nullptr);
    auto onTouchPlay = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_4 = 4
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_4) {
            OH\_ArkUI\_Animator\_Play(animatorHandle);
        }
    };
    playButton->RegisterNodeEventReceiver(onTouchPlay);
    // 设置animator结束按钮
    auto finishButton = std::make\_shared<ArkUIButtonNode>();
    finishButton->SetButtonLabel("finish");
    finishButton->RegisterNodeEvent(finishButton->GetHandle(), NODE\_ON\_CLICK, NUM\_5, nullptr); // NUM\_5 = 5
    auto onTouchFinish = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_5 = 5
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_5) {
            OH\_ArkUI\_Animator\_Finish(animatorHandle);
        }
    };
    finishButton->RegisterNodeEventReceiver(onTouchFinish);
    // 创建容器，用于存放resetButton按键
    auto resetButtonColumn = std::make\_shared<ArkUIColumnNode>();
    resetButtonColumn->SetPadding(NUM\_10, false); // 设置布局格式，调整组件内间距，NUM\_10 = 10
    resetButtonColumn->SetWidth(NUM\_300); // NUM\_300 = 300
    // 设置animator更新按钮
    auto resetButton = std::make\_shared<ArkUIButtonNode>();
    resetButton->SetButtonLabel("reset");
    resetButton->RegisterNodeEvent(resetButton->GetHandle(), NODE\_ON\_CLICK, NUM\_6, nullptr); // NUM\_6 = 6
    auto onTouchReset = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_6 = 6
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_6) {
            static ArkUI\_AnimatorOption \*option =  OH\_ArkUI\_AnimatorOption\_Create(NUM\_0); // Animator动画状态数
            OH\_ArkUI\_AnimatorOption\_SetDuration(option, NUM\_1000); // NUM\_1000 = 1000
            OH\_ArkUI\_AnimatorOption\_SetDelay(option, NUM\_0);
            OH\_ArkUI\_AnimatorOption\_SetIterations(option, NUM\_4); // NUM\_4 = 4
            // 根据实际业务需求选择下述两种曲线，设置OH\_ArkUI\_AnimatorOption\_SetCurve
            auto curve = OH\_ArkUI\_Curve\_CreateCurveByType(ARKUI\_CURVE\_EASE); // 动画以低速开始，然后加快，在结束前变慢
            auto stepsCurve = OH\_ArkUI\_Curve\_CreateStepsCurve(NUM\_20, true); // 构造阶梯曲线对象，NUM\_20 = 20
            OH\_ArkUI\_AnimatorOption\_SetCurve(option, curve);
            OH\_ArkUI\_AnimatorOption\_SetBegin(option, NUM\_200); // NUM\_200 = 200
            OH\_ArkUI\_AnimatorOption\_SetEnd(option, NUM\_100); // NUM\_100 = 100
            OH\_ArkUI\_AnimatorOption\_RegisterOnFrameCallback(option, nullptr, \[\](ArkUI\_AnimatorOnFrameEvent \*event)
            {
                OH\_ArkUI\_AnimatorOnFrameEvent\_GetUserData(event); // 获取动画事件对象中的用户自定义对象
                auto value = OH\_ArkUI\_AnimatorOnFrameEvent\_GetValue(event); // 获取动画事件对象中的当前进度
                g\_animator\_button->SetWidth(value);
            });
            OH\_ArkUI\_Animator\_ResetAnimatorOption(animatorHandle, option);
        }
    };
    resetButton->RegisterNodeEventReceiver(onTouchReset);
    // 设置animator暂停按钮
    auto pauseButton = std::make\_shared<ArkUIButtonNode>();
    pauseButton->SetButtonLabel("pause");
    pauseButton->RegisterNodeEvent(pauseButton->GetHandle(), NODE\_ON\_CLICK, NUM\_7, nullptr); // NUM\_7 = 7
    auto onTouchPause = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_7 = 7
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_7) {
            OH\_ArkUI\_Animator\_Pause(animatorHandle);
        }
    };
    pauseButton->RegisterNodeEventReceiver(onTouchPause);
    // 创建容器，用于存放cancelButton按键
    auto cancelButtonColumn = std::make\_shared<ArkUIColumnNode>();
    cancelButtonColumn->SetPadding(NUM\_10, false); // 设置布局格式，调整组件内间距，NUM\_10 = 10
    cancelButtonColumn->SetWidth(NUM\_300); // NUM\_300 = 300
    // 设置animator取消按钮
    auto cancelButton = std::make\_shared<ArkUIButtonNode>();
    cancelButton->SetButtonLabel("cancel");
    cancelButton->RegisterNodeEvent(cancelButton->GetHandle(), NODE\_ON\_CLICK, NUM\_8, nullptr); // NUM\_8 = 8
    auto onTouchCancel = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_8 = 8
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_8) {
            OH\_ArkUI\_Animator\_Cancel(animatorHandle);
        }
    };
    cancelButton->RegisterNodeEventReceiver(onTouchCancel);
    // 设置animator以相反的顺序播放按钮
    auto reverseButton = std::make\_shared<ArkUIButtonNode>();
    reverseButton->SetButtonLabel("reverse");
    reverseButton->RegisterNodeEvent(reverseButton->GetHandle(), NODE\_ON\_CLICK, NUM\_9, nullptr);
    auto onTouchReverse = \[\](ArkUI\_NodeEvent \*event) {
        // 点击Button按钮时触发该逻辑，NUM\_9 = 9
        if (OH\_ArkUI\_NodeEvent\_GetTargetId(event) == NUM\_9) {
            OH\_ArkUI\_Animator\_Reverse(animatorHandle);
        }
    };
    reverseButton->RegisterNodeEventReceiver(onTouchReverse);
    // 将Button挂载在column上，返回column节点
    column->AddChild(g\_animator\_text);
    column->AddChild(textNode);
    column->AddChild(button);
    buttoColumn->AddChild(createButton);
    playButtonColumn->AddChild(playButton);
    buttoColumn->AddChild(playButtonColumn);
    buttoColumn->AddChild(finishButton);
    resetButtonColumn->AddChild(resetButton);
    buttoColumn->AddChild(resetButtonColumn);
    buttoColumn->AddChild(pauseButton);
    cancelButtonColumn->AddChild(cancelButton);
    buttoColumn->AddChild(cancelButtonColumn);
    buttoColumn->AddChild(reverseButton);
    column->AddChild(buttoColumn);
    return column;
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/76/v3/M-dFMET4TUiZVqYQx9ZVGA/zh-cn_image_0000002594828196.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=03D1108281C031B0DC9D9622405BC31104C4911A94AFA1B4E31CDB34F25BC6B3)