// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page qtquick-curve-editor.html
    \previouspage creator-how-tos.html

    \ingroup creator-how-to-design-qtquick-animation

    \title Edit animation curves

    The \uicontrol {Curves} view shows the interpolated values of an animated
    property over the animation range.

    \image {studio-curve-editor.webp} {Curves view}

    When you edit an animation curve, you implicitly edit the
    \l{Edit easing curves}{easing curves} that the underlying system uses
    to define an animation. The animation curve is an extension to visualize
    both the value of a keyframe and the interpolation between keyframes
    simultaneously.

    \section1 Apply interpolation between keyframes

    You can use the toolbar buttons to add \uicontrol Linear, \uicontrol Step,
    or \uicontrol Spline interpolation between keyframes.

    To apply interpolation between keyframes:

    \list 1
        \li Select the keyframes. To select multiple keyframes, select and hold
        \key Ctrl, and then select them.
        \li Select \imageeasingcurvelinearicon (\uicontrol Linear),
        \imageeasingcurvestepicon (\uicontrol Step) or
        \imageeasingcurvespline (\uicontrol Spline) depending on
        which interpolation method you want to use.
    \endlist

    When you set interpolation to \uicontrol Spline, handles appear in
    \uicontrol {Curves} that you can use to modify the curve. Select
    \imageeasingcurveunify (\uicontrol Unify) to lock the handle on the
    left of a keyframe to the one on the right of it so that moving the
    left handle also moves the right handle.

    \section1 Unlock properties and easing curves

    If the component that contains the animated property has been locked
    in \l{Navigate component files}{Navigator}, you can select \imagelockon
    to unlock it. You can also lock individual easing curves for editing.

    \section1 Lock animation curves

    To lock an animation curve, hover over the property in the list,
    and then select \imagelockoff.

    \section1 Pin animation curves

    To pin an animation curve, hover over the property in the list,
    and then select \imagepin.

    \section1 Add keyframes to animation curves

    To add keyframes to animation curves:

    \list 1
        \li In the \uicontrol Timeline view, animate at least one property value by
            \l{Manage keyframes}{inserting keyframes} for it.
        \li Select \uicontrol View > \uicontrol Views >
            \uicontrol {Curves} to open the animation curve editor.
        \li Right-click in \uicontrol {Curves}, and select
            \uicontrol {Insert Keyframe} to add a keyframe.
        \li Select properties in the list to display the easing curves attached to them.
            To select multiple properties, select and hold \key Ctrl, and then select them.
    \endlist

    Your changes are automatically saved when you close the view.

    \section1 Delete keyframes in curves

    To delete the selected keyframe, select \uicontrol {Delete Selected Keyframes}
    in the context menu.

    \sa {Add animation}{How to: Add animation}, {Qt Quick UI design},
    {Designing Qt Quick UIs}
*/
