Doc: Describe the Transition Editor view in Design Mode

Fixes: QDS-2183
Change-Id: I1dac82af6b7d831d23fc7c93fa7750719f1578d1
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

doc/qtcreator/src/qtquick/qtquick-animation-types.qdocinc

@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+//! [qtquick animation types]
+
+    \section1 Using Qt Quick Animation Types
+
+    To create an animation, use an appropriate animation type for the type of
+    the property that is to be animated, and apply the animation depending on
+    the type of behavior that is required.
+
+    You can drag and drop the following QML types from \uicontrol Library
+    > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to
+    \uicontrol Navigator or \uicontrol {Form Editor}:
+
+    \list
+        \li \l [QML] {ColorAnimation}{Color Animation} is a specialized
+            property animation that defines an animation to be applied when a
+            color value changes.
+        \li \l [QML] {NumberAnimation}{Number Animation} is a specialized
+            property animation that defines an animation to be applied when a
+            numerical value changes.
+        \li \l [QML] {ParallelAnimation}{Parallel Animation} enables
+            animations to be run in parallel.
+        \li \l [QML] {PauseAnimation}{Pause Animation} is used in a
+            sequential animation to create a step where nothing happens, for
+            a specified duration.
+        \li \l [QML] {PropertyAction}{Property Action} immediately changes
+             a property value during an animation, without animating the
+             property change.
+        \li \l [QML] {PropertyAnimation}{Property Animation} animates
+             changes in the value of a property.
+        \li \l [QML] {ScriptAction}{Script Action} defines scripts to be
+            run during an animation.
+        \li \l [QML] {SequentialAnimation}{Sequential Animation} enables
+            animations to be run sequentially.
+    \endlist
+
+    For more information about using the QML types, see
+    \l{Animation and Transitions in Qt Quick}.
+
+    For more information about animating properties in the \uicontrol Timeline
+    view, see \l{Creating Animations}. For more information about animating
+    property changes in states, see \l{Animating Transitions Between States}.
+
+//! [qtquick animation types]
+*/

doc/qtcreator/src/qtquick/qtquick-components.qdoc

@@ -497,6 +497,8 @@
     {Dialog} type in the Qt Quick Dialogs module to wrap arbitrary content into
     a dialog window including a row of platform-tailored buttons.
 
+    \include qtquick-animation-types.qdocinc qtquick animation types
+
     \if defined(qtdesignstudio)
     \include qtdesignstudio-visual-effects.qdocinc qml visual effects
     \include qtdesignstudio-components.qdocinc creating studio components

doc/qtcreator/src/qtquick/qtquick-states.qdoc

@@ -249,53 +249,5 @@
     \include qtquick-states-scxml.qdocinc scxml state machines
     \endif
 
-    \section1 Animating Transitions Between States
+    \include qtquick-transition-editor.qdocinc transition editor
-
-    To make movement between states smooth, you can animate transitions.
-    Animations are created by applying animation types to property values.
-    Animation types interpolate property values to create smooth transitions.
-    As well, state transitions may assign animations to state changes.
-
-    To create an animation, use an appropriate animation type for the type of
-    the property that is to be animated, and apply the animation depending on
-    the type of behavior that is required.
-
-    You can drag and drop the following QML types from \uicontrol Library
-    > \uicontrol {QML Types} > \uicontrol {Qt Quick - Animation} to
-    \uicontrol Navigator or \uicontrol {Form Editor}:
-
-    \list
-        \li \l [QML] {ColorAnimation}{Color Animation} is a specialized
-            property animation that defines an animation to be applied when a
-            color value changes.
-        \li \l [QML] {NumberAnimation}{Number Animation} is a specialized
-            property animation that defines an animation to be applied when a
-            numerical value changes.
-        \li \l [QML] {ParallelAnimation}{Parallel Animation} enables
-            animations to be run in parallel.
-        \li \l [QML] {PauseAnimation}{Pause Animation} is used in a
-            sequential animation to create a step where nothing happens, for
-            a specified duration.
-        \li \l [QML] {PropertyAction}{Property Action} immediately changes
-             a property value during an animation, without animating the
-             property change.
-        \li \l [QML] {PropertyAnimation}{Property Animation} animates
-             changes in the value of a property.
-        \li \l [QML] {ScriptAction}{Script Action} defines scripts to be
-            run during an animation.
-        \li \l [QML] {SequentialAnimation}{Sequential Animation} enables
-            animations to be run sequentially.
-    \endlist
-
-    For more information, see \l{Animation and Transitions in Qt Quick}.
-
-    \if defined(qtcreator)
-    For an example of assigning number animations to states, see
-    \l {Creating a Qt Quick Application}.
-    \endif
-
-
-    Alternatively, you can use the \uicontrol Timeline view to animate the
-    properties of UI components and to bind the animations to states. For more
-    information, see \l {Binding Animations to States}.
 */

doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc

@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Creator documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+//! [transition editor]
+
+    \section1 Animating Transitions Between States
+
+    To make movement between states smooth, you can use
+    \uicontrol {Transition Editor} to animate the changes between
+    states. First, you need to \l{Creating States}{add states} in
+    the \uicontrol States view and \l{Specifying Item Properties}
+    {edit some properties} that can be animated, such as colors or
+    numbers, in the \uicontrol Properties view. For example, you
+    can animate the changes in the position of an object.
+
+    In \uicontrol {Transition Editor}, you can set the start frame, end
+    frame, and duration for the transition of each property. You can also
+    set an easing curve for each transition.
+
+    Use the slider on the menu bar to the zooming level in the view.
+
+    To add transitions:
+
+    \list 1
+        \li Select \uicontrol View > \uicontrol Views >
+            \uicontrol {Transition Editor} to display the view.
+        \li Select the \inlineimage plus.png
+            (\uicontrol {Add Transition}) button to add a transition. This
+            works only if you have added at least one state and modified at
+            least one property in it.
+            \image qtquick-transition-editor-view.png "Transition Editor view"
+        \li Move the blue bar next to the component or property name to set
+            the start and end frame of the animation of the property. Pull its
+            left and right edges to set the duration of the animation.
+        \li To attach an easing curve to a transition, select
+            \inlineimage curve_editor.png
+            (\uicontrol {Easing Curve Editor (C)}) on the toolbar. For more
+            information, see \l{Editing Easing Curves}.
+        \li To modify transition settings, select the \inlineimage animation.png
+            (\uicontrol {Transition Settings (S)}) button on the toolbar.
+            \image qtquick-transition-editor-settings.png "Transition settings"
+    \endlist
+
+    \if defined(qtcreator)
+    For an example of animating transitions between states, see
+    \l {Creating a Qt Quick Application}.
+    \endif
+
+//! [transition editor]
+*/