Using Animations

// ArkUIColumnNode is a project-encapsulated node type.
auto column = std::make_shared<ArkUIColumnNode>();
// Set width to 300 (NUM_300 = 300).
column->SetWidth(NUM_300);
// Set height to 250 (NUM_250 = 250).
column->SetHeight(NUM_250);
// Create a text node with content "This is a keyframe animation."
auto textNode = std::make_shared<ArkUITextNode>();
textNode->SetTextContent("This is a keyframe animation");
// Set width to 120 (NUM_120 = 120).
textNode->SetWidth(NUM_120);
// Set height to 120 (NUM_120 = 120).
textNode->SetHeight(NUM_50);
// Create a button that will be the target of the keyframe animation.
auto button = std::make_shared<ArkUIButtonNode>();
// Set the initial width and height of the button (NUM_100 = 100).
button->SetWidth(NUM_100);
button->SetHeight(NUM_100);
// Store the button as a global variable for use in onTouch registration.
g_keyframe_button = button;
// Register a click event for the button (NUM_1 = 1).
button->RegisterNodeEvent(button->GetHandle(), NODE_ON_CLICK, NUM_1, nullptr);
g_keyframe_text = std::make_shared<ArkUITextNode>();
// This function encapsulates logic to print AnimateTo parameter values in a text component (to be implemented by the user based on specific requirements).
g_keyframe_text->KeyframeAnimatetoToString();
auto onTouch = [](ArkUI_NodeEvent *event) {
    // Trigger logic when the target button (NUM_1 = 1) is clicked.
    if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_1) {
        // Obtain the context object.
        ArkUI_ContextHandle context = nullptr;
        // g_keyframe_button (std::shared_ptr<ArkUIButtonNode>) is a global variable that holds the button node instance for use in onTouch event registration.
        context = OH_ArkUI_GetContextByNode(g_keyframe_button->GetHandle());
        // Obtain the ArkUI_NativeAnimateAPI.
        ArkUI_NativeAnimateAPI_1 *animateApi = nullptr;
        OH_ArkUI_GetModuleInterface(ARKUI_NATIVE_ANIMATE, ArkUI_NativeAnimateAPI_1, animateApi);
            
        // The following code is the key process for creating a keyframe animation, including setting keyframe animation parameters and starting the animation.
        // Set the ArkUI_KeyframeAnimateOption parameters using the provided C APIs.
        // Number of keyframe animation states (NUM_2 = 2, NUM_500 = 500).
        ArkUI_KeyframeAnimateOption *option =  OH_ArkUI_KeyframeAnimateOption_Create(NUM_2);
        OH_ArkUI_KeyframeAnimateOption_SetDelay(option, NUM_500);
        // Duration for the first keyframe segment (NUM_1000 = 1000, NUM_0 = 0).
        OH_ArkUI_KeyframeAnimateOption_SetDuration(option, NUM_1000, NUM_0);
        // Duration for the second keyframe segment (NUM_2000 = 2000, NUM_1 = 1).
        OH_ArkUI_KeyframeAnimateOption_SetDuration(option, NUM_2000, NUM_1);
        // Animation playback iterations (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);
        // Select the animation curves based on service requirements.
        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); // Callback for the first keyframe state (NUM_150 = 150, NUM_0 = 0).
        OH_ArkUI_KeyframeAnimateOption_RegisterOnEventCallback(option, nullptr, [](void *userData) {
              g_keyframe_button->SetWidth(80);
        }, NUM_1); // Callback for the second keyframe state (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; // Release the struct.
            }
        }); // Keyframe animation completion callback.
        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); // Set the expected frame rate for keyframes.

        // Execute the animation with the set options and callbacks.
        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); // Obtain the expected frame rate range from the keyframe animation parameters.
        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); // Obtain the animation curve for a specific keyframe segment.
        g_keyframe_text->KeyframeAnimatetoToString(dur0, dur1, delay, iter, *expected);
    }
};
// Register a callback function for the click event.
button->RegisterNodeEventReceiver(onTouch);
// Mount the button to the column and return the column node.
column->AddChild(g_keyframe_text);
column->AddChild(textNode);
column->AddChild(button);

ArkUIAnimate.h

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
    // Create a text node with content "This is an animator animation."
    auto textNode = std::make_shared<ArkUITextNode>();
    textNode->SetTextContent("This is an animator animation");
    textNode->SetWidth(NUM_120); // NUM_120 = 120
    textNode->SetHeight(NUM_50); // NUM_50 = 50
    // Create createButton to initialize animator parameters.
    auto createButton = std::make_shared<ArkUIButtonNode>();
    // Create a button that serves as the target of the animator animation.
    auto button = std::make_shared<ArkUIButtonNode>();
    // Set the initial width and height of the button (NUM_100 = 100).
    button->SetWidth(NUM_100);
    button->SetHeight(NUM_100);
    // Store the button as a global variable for use in onTouch registration.
    g_animator_button = button;
    // Register a click event for the 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) {
        // Trigger logic when the target button (NUM_3 = 3) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_3) {
            // Obtain the context object.
            static ArkUI_ContextHandle context = nullptr;
            context = OH_ArkUI_GetContextByNode(g_animator_button->GetHandle());

            // Obtain the ArkUI_NativeAnimateAPI.
            ArkUI_NativeAnimateAPI_1 *animateApi = nullptr;
            OH_ArkUI_GetModuleInterface(ARKUI_NATIVE_ANIMATE, ArkUI_NativeAnimateAPI_1, animateApi);
            
            // The following demonstrates the key process for creating an Animator animation, including setting Animator animation parameters and starting the animation.
            // Set the ArkUI_AnimatorOption parameters using the provided C APIs (NUM_0 = 0).
            static ArkUI_AnimatorOption *option =  OH_ArkUI_AnimatorOption_Create(NUM_0); // Number of animator animation states.
            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); // Create a cubic Bézier curve object.
            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); // Set the keyframe parameters of the animator animation (NUM_0 = 0).
            OH_ArkUI_AnimatorOption_SetKeyframeCurve(option, curve, NUM_0); // Set the keyframe curve type of the animator animation.
            OH_ArkUI_AnimatorOption_RegisterOnFrameCallback(option, nullptr, [](ArkUI_AnimatorOnFrameEvent *event)
            {
                OH_ArkUI_AnimatorOnFrameEvent_GetUserData(event); // Obtain the custom object from the animation event object.
                auto value = OH_ArkUI_AnimatorOnFrameEvent_GetValue(event); // Obtain the current progress from the animation event object.
                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); // Obtain the custom object from the animation event object.
            });
            OH_ArkUI_AnimatorOption_RegisterOnCancelCallback(option, nullptr, [](ArkUI_AnimatorEvent* event)
            {
            });
            OH_ArkUI_AnimatorOption_RegisterOnRepeatCallback(option, nullptr, [](ArkUI_AnimatorEvent* event)
            {
            });
            // Execute the animation with the set options and callbacks.
            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); // Obtain the animator animation interpolation curve.
            auto begin = OH_ArkUI_AnimatorOption_GetBegin(option);
            auto end = OH_ArkUI_AnimatorOption_GetEnd(option); // Obtain the interpolation end point of the animator animation.
            auto expected = OH_ArkUI_AnimatorOption_GetExpectedFrameRateRange(option); // Obtain the expected frame rate range from the keyframe animation parameters.
            auto keyframeTime = OH_ArkUI_AnimatorOption_GetKeyframeTime(option, NUM_0); // Obtain the keyframe time of the animator animation.
            auto keyframeValue = OH_ArkUI_AnimatorOption_GetKeyframeValue(option, NUM_0); // Obtain the keyframe value from the animator animation parameters.
            auto keyframeCurve = OH_ArkUI_AnimatorOption_GetKeyframeCurve(option, NUM_0); // Obtain the keyframe interpolation curve of the animator animation.
            g_animator_text->AnimatorToString(duration, delay, iterations, fill, direction, begin,
                end, *expected, keyframeTime, keyframeValue);
        }
    };

    // Register a callback function for the click event.
    createButton->RegisterNodeEventReceiver(onTouch);
    createButton->SetButtonLabel("create");
    // Create a container for storing the button.
    auto buttoColumn = std::make_shared<ArkUIColumnNode>();
    buttoColumn->SetPadding(NUM_30, false); // Set the layout padding (NUM_30=30).
    buttoColumn->SetWidth(NUM_300); // NUM_300 = 300
    // Create a container for storing playButton.
    auto playButtonColumn = std::make_shared<ArkUIColumnNode>();
    playButtonColumn->SetPadding(NUM_10, false); // Set the layout padding (NUM_10 = 10).
    playButtonColumn->SetWidth(NUM_300); // NUM_300 = 300
    // Set the animator play button.
    auto playButton = std::make_shared<ArkUIButtonNode>();
    playButton->SetButtonLabel("play");
    playButton->RegisterNodeEvent(playButton->GetHandle(), NODE_ON_CLICK, NUM_4, nullptr);
    auto onTouchPlay = [](ArkUI_NodeEvent *event) {
        // Trigger logic when the target button (NUM_4 = 4) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_4) {
            OH_ArkUI_Animator_Play(animatorHandle);
        }
    };
    playButton->RegisterNodeEventReceiver(onTouchPlay);
    // Set the animator end button.
    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) {
        // Trigger logic when the target button (NUM_5 = 5) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_5) {
            OH_ArkUI_Animator_Finish(animatorHandle);
        }
    };
    finishButton->RegisterNodeEventReceiver(onTouchFinish);
    // Create a container for storing resetButton.
    auto resetButtonColumn = std::make_shared<ArkUIColumnNode>();
    resetButtonColumn->SetPadding(NUM_10, false); // Set the layout padding (NUM_10 = 10).
    resetButtonColumn->SetWidth(NUM_300); // NUM_300 = 300
    // Set the animator update button.
    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) {
        // Trigger logic when the target button (NUM_6 = 6) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_6) {
            static ArkUI_AnimatorOption *option =  OH_ArkUI_AnimatorOption_Create(NUM_0); // Number of animator animation states.
            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
            // Choose a curve based on actual service requirements for OH_ArkUI_AnimatorOption_SetCurve.
            auto curve = OH_ArkUI_Curve_CreateCurveByType(ARKUI_CURVE_EASE); // The animation starts slowly, accelerates, and then slows down towards the end.
            auto stepsCurve = OH_ArkUI_Curve_CreateStepsCurve(NUM_20, true); // Create a steps curve object (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); // Obtain the custom object from the animation event object.
                auto value = OH_ArkUI_AnimatorOnFrameEvent_GetValue(event); // Obtain the current progress from the animation event object.
                g_animator_button->SetWidth(value);
            });
            OH_ArkUI_Animator_ResetAnimatorOption(animatorHandle, option);
        }
    };
    resetButton->RegisterNodeEventReceiver(onTouchReset);
    // Set the animator pause button.
    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) {
        // Trigger logic when the target button (NUM_7 = 7) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_7) {
            OH_ArkUI_Animator_Pause(animatorHandle);
        }
    };
    pauseButton->RegisterNodeEventReceiver(onTouchPause);
    // Create a container for storing cancelButton.
    auto cancelButtonColumn = std::make_shared<ArkUIColumnNode>();
    cancelButtonColumn->SetPadding(NUM_10, false); // Set the layout padding (NUM_10 = 10).
    cancelButtonColumn->SetWidth(NUM_300); // NUM_300 = 300
    // Set the animator cancel button.
    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) {
        // Trigger logic when the target button (NUM_8 = 8) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_8) {
            OH_ArkUI_Animator_Cancel(animatorHandle);
        }
    };
    cancelButton->RegisterNodeEventReceiver(onTouchCancel);
    // Set the animator reverse-play button.
    auto reverseButton = std::make_shared<ArkUIButtonNode>();
    reverseButton->SetButtonLabel("reverse");
    reverseButton->RegisterNodeEvent(reverseButton->GetHandle(), NODE_ON_CLICK, NUM_9, nullptr);
    auto onTouchReverse = [](ArkUI_NodeEvent *event) {
        // Trigger logic when the target button (NUM_9 = 9) is clicked.
        if (OH_ArkUI_NodeEvent_GetTargetId(event) == NUM_9) {
            OH_ArkUI_Animator_Reverse(animatorHandle);
        }
    };
    reverseButton->RegisterNodeEventReceiver(onTouchReverse);
    // Mount the button to the column and return the column node.
    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;
}

ArkUIAnimate.h