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

/*!
    \page qtquick-timeline-view.html
    \previouspage qtquick-transition-editor.html
    \nextpage qtquick-curve-editor.html

    \ingroup studio-views

    \title Timeline

    \brief Animate the properties of components.

    You can use the timeline and keyframe based editor in the
    \uicontrol Timeline view to animate the properties of
    \l{glossary_component}{components}. The view is empty until
    you create a timeline.

    \image studio-timeline-empty.webp "Empty Timeline view"

    Select the \imageplus
    (\uicontrol {Add Timeline}) button to
    \l{Creating a Timeline}{create a timeline} and specify settings for it in
    the \uicontrol {Timeline Settings} dialog.

    \image studio-timeline-settings.png "Timeline Settings dialog"

    When you select \uicontrol Close, the \uicontrol Timeline view appears.
    It now displays a toolbar and a ruler but no
    keyframe tracks.

    \image studio-timeline-no-tracks.webp "Timeline view without keyframe tracks"

    To animate component properties in the \uicontrol Timeline view, you
    must \l{Setting Keyframe Values}{insert keyframes} for them. In the
    \l Properties view, select \imageactionicon
    (\uicontrol Actions) > \uicontrol {Insert Keyframe} for a property that you
    want to animate. A keyframe track is generated for each component that you
    insert keyframes for.

    \image studio-timeline-with-empty-tracks.webp "Timeline view with a property"

    You can now select \imagelocalrecordkeyframes
    to \l{Setting Keyframe Values}{record changes} in component properties
    while you \l{Navigating in Timeline}{navigate the timeline}.

    The following video shows how to insert keyframes for component properties
    and to animate them in \uicontrol Timeline:

    \youtube V3Po15bNErw

    To try it yourself, follow the \l{Login UI: Timeline} tutorial.

    For more information about creating timeline animations, see
    \l{Creating timeline animations}.

    \section1 Navigating in Timeline

    \image studio-timeline.webp "Timeline view"

    You can navigate the timeline in the following ways:

    \list
        \li Drag the playhead (1) to a frame.
        \li Click on the ruler (2) to move to a frame.
        \li Select the \uicontrol {To Start (Home)}, \uicontrol {Previous (,)},
            \uicontrol {Next (.)}, or \uicontrol {To End (End)} buttons (3), or
            use the keyboard shortcuts to move to the first, previous, next, or
            last frame on the timeline.
        \li Enter the number of a frame in the current keyframe field (4) to
            move to that frame.
        \li Select the \uicontrol Previous and \uicontrol Next buttons next to
            a property name on the timeline (5) to move to the previous or next
            keyframe for that property.
    \endlist

    \section1 Zooming in Timeline

    Use the slider on the toolbar to set the zooming level in the
    \uicontrol Timeline view. Select the \imagezoomsmall
    and \imagezoombig
    buttons to zoom out of or into the view.

    \section1 Setting the keyframe track color

    To change the color of a keyframe track, select \uicontrol {Override Color}
    in the context menu, and then select a color in the \l{Picking Colors}
    {color picker}. To reset the color, select \uicontrol {Reset Color}.

    \image studio-timeline-keyframe-track-colors.webp "Keyframe track colors in Timeline"

*/
