diff --git a/doc/qtcreator/images/qtquick-transition-editor-settings.png b/doc/qtcreator/images/qtquick-transition-editor-settings.png new file mode 100644 index 00000000000..6fb41716127 Binary files /dev/null and b/doc/qtcreator/images/qtquick-transition-editor-settings.png differ diff --git a/doc/qtcreator/images/qtquick-transition-editor-view.png b/doc/qtcreator/images/qtquick-transition-editor-view.png new file mode 100644 index 00000000000..406b540135f Binary files /dev/null and b/doc/qtcreator/images/qtquick-transition-editor-view.png differ diff --git a/doc/qtcreator/src/qtquick/qtquick-animation-types.qdocinc b/doc/qtcreator/src/qtquick/qtquick-animation-types.qdocinc new file mode 100644 index 00000000000..5bf1bafd954 --- /dev/null +++ b/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] +*/ diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc index b601b96a281..cdd21da1074 100644 --- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc +++ b/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 diff --git a/doc/qtcreator/src/qtquick/qtquick-states.qdoc b/doc/qtcreator/src/qtquick/qtquick-states.qdoc index de25e02fcd0..967555f1ad7 100644 --- a/doc/qtcreator/src/qtquick/qtquick-states.qdoc +++ b/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 - - 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}. + \include qtquick-transition-editor.qdocinc transition editor */ diff --git a/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc b/doc/qtcreator/src/qtquick/qtquick-transition-editor.qdocinc new file mode 100644 index 00000000000..38eac9d512d --- /dev/null +++ b/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] +*/