Doc: Update info about the Timeline view and curve editors

- Remove information about enabling the Timeline view, because it
  is now enabled by default
- Update the screenshot to show the animation curve editor icon
- Show information about previewing, which is now enabled
- Fix UI text for the animation curve editor

Change-Id: I288b45f521945aadf76475871f422ccb41cd1ac1
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Leena Miettinen
2020-04-22 16:06:49 +02:00
parent 252a0431d1
commit 7bf3024a56
3 changed files with 16 additions and 24 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -85,6 +85,8 @@
\li Add states to apply sets of changes to the properties of one or \li Add states to apply sets of changes to the properties of one or
several components in the \uicontrol States view (6). For more several components in the \uicontrol States view (6). For more
information, see \l{Adding States}. information, see \l{Adding States}.
\li Animate component properties in the \uicontrol Timeline view (7).
For more information, see \l{Creating Animations}.
\endlist \endlist
\section1 Using Basic QML Types \section1 Using Basic QML Types

View File

@@ -1,6 +1,6 @@
/**************************************************************************** /****************************************************************************
** **
** Copyright (C) 2019 The Qt Company Ltd. ** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/ ** Contact: https://www.qt.io/licensing/
** **
** This file is part of the Qt Creator documentation. ** This file is part of the Qt Creator documentation.
@@ -52,17 +52,9 @@
{here}. {here}.
\if defined(qtcreator) \if defined(qtcreator)
\section1 Enabling the Timeline Editor
The \uicontrol Timeline view is not visible in \QC by default. To enable
it, select \uicontrol Tools > \uicontrol Options > \uicontrol {Qt Quick} >
\uicontrol {Qt Quick Designer} > \uicontrol {Enable Timeline editor}.
Select \uicontrol {Restart Now} to restart \QC with the \uicontrol Timeline
view visible.
To be able to create timelines, you also need the \l {Qt Quick Timeline} To be able to create timelines, you also need the \l {Qt Quick Timeline}
module, which is delivered with Qt 5.14, and later. For more add-on module, which you can install with Qt 5.14, and later. For more
information about adding the module to an older Qt version, see information about adding the module to an older Qt version, see
\l{Adding Qt Quick Timeline Module to Qt Installations}. \l{Adding Qt Quick Timeline Module to Qt Installations}.
\endif \endif
@@ -77,9 +69,7 @@
\list 1 \list 1
\li In the \uicontrol Navigator, select the item to animate. \li In the \uicontrol Navigator, select the item to animate.
\li Select the \uicontrol Timeline tab to open the \uicontrol Timeline \li In the \uicontrol Timeline view, select the \inlineimage plus.png
view.
\li Select the \inlineimage plus.png
(\uicontrol {Add Timeline (A)}) button, or press \key {A} to (\uicontrol {Add Timeline (A)}) button, or press \key {A} to
specify settings for the timeline and running the animation specify settings for the timeline and running the animation
in the \uicontrol {Timeline Settings} dialog. in the \uicontrol {Timeline Settings} dialog.
@@ -144,7 +134,7 @@
\section1 Managing Keyframes \section1 Managing Keyframes
To animate components in the \uicontrol Timeline view, move to a frame To animate components in the \uicontrol Timeline view, move to a frame
on the timeline and specify changes in the values of a property. \QDS on the timeline and specify changes in the values of a property. \QC
automatically adds keyframes between two keyframes, and sets their values automatically adds keyframes between two keyframes, and sets their values
evenly to create an appearance of movement or transformation. evenly to create an appearance of movement or transformation.
@@ -160,7 +150,8 @@
\li Select the \uicontrol {To Start (Home)}, \uicontrol {Previous (,)}, \li Select the \uicontrol {To Start (Home)}, \uicontrol {Previous (,)},
or \uicontrol {Next (.)} buttons (3), or use the keyboard shortcuts or \uicontrol {Next (.)} buttons (3), or use the keyboard shortcuts
to move to the first, previous, or next frame on the timeline. to move to the first, previous, or next frame on the timeline.
\li Enter the number of a frame in the field (4) to move to that frame. \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 \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 a property name on the timeline (5) to move to the previous or next
keyframe for that property. keyframe for that property.
@@ -231,13 +222,11 @@
You can view the animation on the canvas by moving the playhead along the You can view the animation on the canvas by moving the playhead along the
timeline. timeline.
\if defined(qtdesignstudio)
To preview the animation, select the \uicontrol {Play (Space)} To preview the animation, select the \uicontrol {Play (Space)}
button or press \key Space. To preview the whole UI, select the button or press \key Space. To preview the whole UI, select the
\inlineimage live_preview.png \inlineimage live_preview.png
(\uicontrol {Show Live Preview}) button on the canvas toolbar (\uicontrol {Show Live Preview}) button on the canvas toolbar
or press \key {Alt+P}. or press \key {Alt+P}.
\endif
\section1 Editing Easing Curves \section1 Editing Easing Curves
@@ -247,7 +236,7 @@
timeline are \e linear, which means that they move from the beginning to timeline are \e linear, which means that they move from the beginning to
the end at a constant speed. You can use the \uicontrol {Easing Curve Editor} the end at a constant speed. You can use the \uicontrol {Easing Curve Editor}
to edit the easing curve between two keyframes. You can also use the more to edit the easing curve between two keyframes. You can also use the more
advanced \uicontrol {Curve Editor (C)} to edit the curves for the whole advanced \uicontrol {Animation Curve Editor} to edit the curves for the whole
animation. animation.
\section2 Attaching Easing Curves to Keyframes \section2 Attaching Easing Curves to Keyframes
@@ -306,23 +295,24 @@
\section1 Editing Animation Curves \section1 Editing Animation Curves
In the curve editor, you can view and modify the whole animation curve. You In the animation curve editor, you can view and modify the whole animation
curve. You
can insert keyframes to the curve and drag them and the point handlers to can insert keyframes to the curve and drag them and the point handlers to
modify the curve. You can modify the appearance of the curve in the style modify the curve. You can modify the appearance of the curve in the style
editor. editor.
You can also edit easing curves that you added with the easing curve editor. You can also edit easing curves that you added with the easing curve editor.
\image studio-curve-editor.png "Curve Editor" \image studio-curve-editor.png "Animation Curve Editor"
To edit animation curves: To edit animation curves:
\list 1 \list 1
\li In the \uicontrol Timeline view, insert at least one keyframe. \li In the \uicontrol Timeline view, insert at least one keyframe.
\li Select \inlineimage curveGraphIcon.png \li Select \inlineimage curveGraphIcon.png
(\uicontrol {Curve Editor (C)} on the toolbar or press \key C (\uicontrol {Animation Curve Editor}) on the toolbar or press \key C
to open the curve editor. to open the animation curve editor.
\li Right-click in the curve editor, and select \li Right-click in the animation curve editor, and select
\uicontrol {Insert Keyframe} to add a keyframe. \uicontrol {Insert Keyframe} to add a keyframe.
\li Select keyframes to display the easing curves attached to them. \li Select keyframes to display the easing curves attached to them.
To select multiple keyframes, press and hold \key Ctrl. To select multiple keyframes, press and hold \key Ctrl.