diff --git a/doc/qtcreator/images/timeline-rotation-animation.gif b/doc/qtcreator/images/timeline-rotation-animation.gif new file mode 100644 index 00000000000..c03478c5a35 Binary files /dev/null and b/doc/qtcreator/images/timeline-rotation-animation.gif differ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index b812857a1ab..dfb84f20f71 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -150,7 +150,6 @@ \li \l{Creating Scalable Buttons and Borders} \endlist \endlist - \li \l{Creating Optimized 3D Scenes} \li \l{Specifying Component Properties} \li \l{Scalable Layouts} \li \l{Using Custom Fonts} @@ -187,9 +186,14 @@ \li \l{Motion Design} \list \li \l{Introduction to Animation Techniques} - \li \l{Creating Animations} + \li \l{Creating Timeline Animations} \li \l{Editing Easing Curves} - \endlist + \li \l{Production Quality} + \li \l{Optimizing Designs} + \list + \li \l{Creating Optimized 3D Scenes} + \endlist + \endlist \li \l {Browsing ISO 7000 Icons} \li \l {Converting UI Projects to Applications} \endlist diff --git a/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc index da2e8f49b3e..2a499236a4c 100644 --- a/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc +++ b/doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc @@ -65,7 +65,8 @@ \li Add states to apply sets of changes to the property values of one or several component instances in the \uicontrol States view. For more information, see \l{Adding States}. - \li Animate the properties of component instances in the \uicontrol - Timeline view. For more information, see \l{Creating Animations}. + \li Animate the properties of component instances in the + \uicontrol Timeline view. For more information, see + \l{Creating Timeline Animations}. \endlist */ diff --git a/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc b/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc index b99e555029d..86045cb93f4 100644 --- a/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc +++ b/doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc @@ -25,8 +25,12 @@ /*! \page studio-optimized-3d-scenes.html - \previouspage quick-scalable-image.html - \nextpage qtquick-properties.html + \previouspage qtquick-optimizing-designs.html + \if defined(qtdesignstudio) + \nextpage creator-coding.html + \else + \nextpage qtquick-iso-icon-browser.html + \endif \title Creating Optimized 3D Scenes diff --git a/doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc b/doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc index 638cbce6ce6..50f0beaf45f 100644 --- a/doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc @@ -26,9 +26,12 @@ /*! \page quick-animation-overview.html \previouspage qtquick-motion-design.html + \nextpage studio-timeline.html \title Introduction to Animation Techniques + \image timeline-rotation-animation.gif "Timeline animation of rotation and opacity" + \QDS supports the following types of animation techniques that are suitable for different purposes: diff --git a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc index fed9a25ca26..fcdcf9c31a3 100644 --- a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc @@ -110,7 +110,7 @@ \li \l Timeline \li Provides a timeline and keyframe based editor for animating the properties of components. - \li \l{Creating Animations} + \li \l{Creating Timeline Animations} \row \li \l{Curve Editor} \li Enables you to view and modify the whole animation curve by diff --git a/doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc b/doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc index f277a9f615c..5a6825ca6cb 100644 --- a/doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc @@ -76,7 +76,7 @@ For timeline animations, you can also use the more advanced \l {Curve Editor} that shows the interpolated values of an animated - property over the \l{Creating Animations}{animation} range. + property over the \l{Creating Timeline Animations}{animation} range. The animation curves present a more readable view of the animation by showing the effective values of the animated properties over the animation diff --git a/doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc b/doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc index 9d68b374bbc..91f842e08e0 100644 --- a/doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc @@ -30,10 +30,15 @@ \title Motion Design - You can use different animation techniques for different purposes. \QDS - supports common motion design techniques, such as timeline and keyframe - based animation and easing curves, as well as screen-to-screen or - state-to-state application flows and data-driven UI logic animation. + \table + \row + \li \image studio-animation.png + \li You can use different animation techniques for different + purposes. \QDS supports common motion design techniques, + such as timeline and keyframe based animation and easing + curves, as well as screen-to-screen or state-to-state + application flows and data-driven UI logic animation. + \endtable \list \li \l {Introduction to Animation Techniques} @@ -41,21 +46,28 @@ Learn more about which animation techniques are supported by \QDS and the use cases they are most suitable for. - \li \l {Creating Animations} + \li \l {Creating Timeline Animations} You can use a timeline and keyframe based editor in the - \uicontrol Timeline view to animate the properties of UI + \l Timeline view to animate the properties of UI components. Animating properties enables their values to move through intermediate values at specified keyframes instead of immediately changing to the target value. - \li Production Quality (TODO) + \li \l{Editing Easing Curves} - After the wireframing and prototyping phases, you can use the - supported motion design techniques to fine-tune your UI for - production. - \li Optimizing for Target Devices (TODO) + Specify easing curves for nonlinear interpolation between + keyframes in timeline animations, as well as between original + and new property values in property animations and between + transitions. + \li \l {Production Quality} + + After the wireframing and prototyping phases, you can use previewing + and profiling tools to fine-tune your UI for production. + \li \l{Optimizing Designs} You can test your UIs on the target devices to make sure you get - the best performance out of your animations. + the best performance out of your animations. To solve performance + problems, you typically need to optimize the graphical assets used + in the UI, such as images, effects, or 3D scenes. \endlist */ diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc index ad9962daa9a..75b12c420a5 100644 --- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc @@ -132,7 +132,7 @@ Changing a component's opacity does not affect whether the component receives user input events. - You can \l{Creating Animations}{animate} the opacity value to make a + You can \l{Creating Timeline Animations}{animate} the opacity value to make a component fade in and out. If the \uicontrol Clip check box is selected, the component and its children diff --git a/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc b/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc index 0084125fc67..2c3984d55f9 100644 --- a/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc @@ -74,7 +74,7 @@ For more information about creating timeline animations, see - \l{Creating Animations}. + \l{Creating Timeline Animations}. \section1 Navigating in Timeline diff --git a/doc/qtcreator/src/qtquick/qtquick-timeline.qdoc b/doc/qtcreator/src/qtquick/qtquick-timeline.qdoc index 05c09eb267b..6c8f5525574 100644 --- a/doc/qtcreator/src/qtquick/qtquick-timeline.qdoc +++ b/doc/qtcreator/src/qtquick/qtquick-timeline.qdoc @@ -24,12 +24,15 @@ ****************************************************************************/ /*! - \previouspage qtquick-adding-dynamics.html + \previouspage quick-animation-overview.html \page studio-timeline.html - \nextpage qmldesigner-connections.html + \nextpage qtquick-editing-easing-curves.html - \title Creating Animations + \title Creating Timeline Animations + You can create timeline and keyframe based animations for linear + interpolation through intermediate values at specified keyframes + instead of immediately changing to the target value. \section1 Creating Timelines diff --git a/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc b/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc index 463cf53ac6d..9b954da5869 100644 --- a/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc +++ b/doc/qtdesignstudio/examples/doc/coffeemachine.qdoc @@ -141,7 +141,8 @@ When we deselect the record button to stop recording the timeline, the new timeline appears in the view. - For more information about using the timeline, see \l {Creating Animations}. + For more information about using the timeline, see + \l {Creating Timeline Animations}. \section1 Using States to Move Between Screens diff --git a/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc b/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc index 5f15994e700..ab24a48dcbd 100644 --- a/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc +++ b/doc/qtdesignstudio/examples/doc/ebikedesign.qdoc @@ -89,7 +89,8 @@ to fade out the current screen when moving to another one and to make the speedometer grow and shrink in size depending on its current position. - For more information about using the timeline, see \l {Creating Animations}. + For more information about using the timeline, see + \l {Creating Timeline Animations}. \section1 Using States to Move Between Screens diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc index 319fd90e301..91698be34a7 100644 --- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc +++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc @@ -40,10 +40,11 @@ some basic UI components, such as pages, buttons, and entry fields. Part 4 describes how to use the timeline and states to animate UI components. - In Part 3, you learned how to use states to simulate page changes in a UI - and connections to provide user interaction with it. In Part 4, you will now - learn another way of animating the UI by creating \l{Creating Animations} - {timeline animations} that you bind to states. + In Part 3, you learned how to use states to simulate page changes + in a UI and connections to provide user interaction with it. In + Part 4, you will now learn another way of animating the UI by creating + \l{Creating Timeline Animations}{timeline animations} that you bind + to states. These instructions build on: @@ -128,7 +129,7 @@ \section2 Adding a Timeline and Animation Settings - You are now ready to add the \l{Creating Animations}{timeline}. You will + You are now ready to add the \l{Creating Timeline Animations}{timeline}. You will need two animations, one for moving into the registration page and another for returning to the login page. You can use the same animation for both cases, by running it either from the beginning to the end or from the @@ -314,7 +315,7 @@ All the properties and functions of the components from this module are available in the \uicontrol Design mode, and therefore it is enough to learn how to use \uicontrol Timeline, as described in - \l {Creating Animations}. + \l {Creating Timeline Animations}. \section1 Next Steps diff --git a/doc/qtdesignstudio/examples/doc/progressbar.qdoc b/doc/qtdesignstudio/examples/doc/progressbar.qdoc index ddfc9c69eca..f8d6a9af528 100644 --- a/doc/qtdesignstudio/examples/doc/progressbar.qdoc +++ b/doc/qtdesignstudio/examples/doc/progressbar.qdoc @@ -82,7 +82,8 @@ changing color. To animate the label and indicator, we'll add timelines in the \l Timeline view. - For more information about using the timeline, see \l {Creating Animations}. + For more information about using the timeline, see + \l {Creating Timeline Animations}. \section2 Adding Color Animation diff --git a/doc/qtdesignstudio/examples/doc/sidemenu.qdoc b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc index 2f7e39ec4b1..9725732aa8b 100644 --- a/doc/qtdesignstudio/examples/doc/sidemenu.qdoc +++ b/doc/qtdesignstudio/examples/doc/sidemenu.qdoc @@ -185,7 +185,8 @@ apply when the animation finishes. In the lower part of the dialog, we bind the states that don't have animations to fixed frames. - For more information about using the timeline, see \l {Creating Animations}. + For more information about using the timeline, see + \l {Creating Timeline Animations}. \section1 Connecting the Burger Menu to Actions diff --git a/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc index 56743812022..7a3cd6ab20c 100644 --- a/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc +++ b/doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc @@ -48,8 +48,9 @@ Users select buttons to navigate between the screens. We use \l{Connecting Components to Signals}{connections} to determine which screen to open when users select a particular button and \l{Adding States} - {states} to show the screens. We use the \l{Creating Animations}{timeline} - to create progress indicators for buttons and the \e Running screen. + {states} to show the screens. We use the \l{Creating Timeline Animations} + {timeline} to create progress indicators for buttons and the \e Running + screen. In addition, all screens contain a small clock component that displays the current time. We implement a \e TimeDate JavaScript object to diff --git a/doc/qtdesignstudio/examples/doc/webinardemo.qdoc b/doc/qtdesignstudio/examples/doc/webinardemo.qdoc index 4dddd367674..805e545cd31 100644 --- a/doc/qtdesignstudio/examples/doc/webinardemo.qdoc +++ b/doc/qtdesignstudio/examples/doc/webinardemo.qdoc @@ -191,5 +191,6 @@ \image webinardemo-timeline.png "Popup animations in the Timeline view" - For more information about using the timeline, see \l {Creating Animations}. + For more information about using the timeline, see + \l {Creating Timeline Animations}. */ diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc index da5b29fca83..1d3fb757af9 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc @@ -179,17 +179,16 @@ \li \l{Motion Design} \list \li \l{Introduction to Animation Techniques} - \li \l{Creating Animations} + \li \l{Creating Timeline Animations} \li \l{Editing Easing Curves} - \li \l{Production Quality} (NEW) + \li \l{Production Quality} + \li \l{Optimizing Designs} \list - \li \l{Detailed Motion Design} (NEW) + \li \l{Creating Optimized 3D Scenes} \endlist - \li \l{Optimizing for Target Hardware} (NEW) \endlist \li \l{Implementing Applications} (NEW) \list - \li\l{Creating Optimized 3D Scenes} \li Using Flows in Production (NEW) \li \l{Coding}{Cross-Platform Development} (NEW) \list diff --git a/doc/qtdesignstudio/src/qtdesignstudio.qdoc b/doc/qtdesignstudio/src/qtdesignstudio.qdoc index 1761fe504ce..cdbbf2751ef 100644 --- a/doc/qtdesignstudio/src/qtdesignstudio.qdoc +++ b/doc/qtdesignstudio/src/qtdesignstudio.qdoc @@ -74,11 +74,10 @@ \li \b {\l{Motion Design}} \list \li \l{Introduction to Animation Techniques} - \li \l{Creating Animations} + \li \l{Creating Timeline Animations} \li \l{Editing Easing Curves} - \li \l{Production Quality} (NEW) - \li \l{Importing from Content Creation Tools} - \li \l{Optimizing for Target Hardware} (NEW) + \li \l{Production Quality} + \li \l{Optimizing Designs} \endlist \row \li \inlineimage front-preview.png diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc index 96ecbb8b0d3..3b24cf2815a 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc @@ -243,7 +243,7 @@ \li Recreate animations in subpresentation_ADAS according to the original project. For more information on creating animations in \QDS, see - \l {Creating Animations}. + \l {Creating Timeline Animations}. \image exporting-from-qt3ds/24-recreate-animations.png "Recreate animations" \li Go to the \uicontrol Timeline View to review the timeline for the diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc index 85b5d1b3d65..b593f544e02 100644 --- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc +++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc @@ -73,7 +73,7 @@ by any other colors specified for the material. You can animate material properties in the \uicontrol Timeline view, as - instructed in \l {Creating Animations}. + instructed in \l {Creating Timeline Animations}. \section1 Blending Colors