Doc: Update contents of Motion Design chapter

Add information about new topics in the chapter.
Add animation.

Change-Id: Idce4c1cad796d8df011afc16413126dba6f2583c
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
Reviewed-by: Vikas Pachdha <vikas.pachdha@qt.io>

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

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
+        \li Animate the properties of component instances in the
-            Timeline view. For more information, see \l{Creating Animations}.
+            \uicontrol Timeline view. For more information, see
+            \l{Creating Timeline Animations}.
     \endlist
 */

doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc

@@ -25,8 +25,12 @@
 
 /*!
     \page studio-optimized-3d-scenes.html
-    \previouspage quick-scalable-image.html
+    \previouspage qtquick-optimizing-designs.html
-    \nextpage qtquick-properties.html
+    \if defined(qtdesignstudio)
+    \nextpage creator-coding.html
+    \else
+    \nextpage qtquick-iso-icon-browser.html
+    \endif
 
     \title Creating Optimized 3D Scenes
 

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:
 

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

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

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
+    \table
-    supports common motion design techniques, such as timeline and keyframe
+        \row
-    based animation and easing curves, as well as screen-to-screen or
+            \li \image studio-animation.png
-    state-to-state application flows and data-driven UI logic animation.
+            \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
+            Specify easing curves for nonlinear interpolation between
-            supported motion design techniques to fine-tune your UI for
+            keyframes in timeline animations, as well as between original
-            production.
+            and new property values in property animations and between
-        \li Optimizing for Target Devices (TODO)
+            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
 */

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

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
 

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
 

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
 

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
 

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
+    In Part 3, you learned how to use states to simulate page changes
-    and connections to provide user interaction with it. In Part 4, you will now
+    in a UI and connections to provide user interaction with it. In
-    learn another way of animating the UI by creating \l{Creating Animations}
+    Part 4, you will now learn another way of animating the UI by creating
-    {timeline animations} that you bind to states.
+    \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
 

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
 

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
 

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}
+    {states} to show the screens. We use the \l{Creating Timeline Animations}
-    to create progress indicators for buttons and the \e Running screen.
+    {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

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}.
 */

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

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{Production Quality}
-                \li \l{Importing from Content Creation Tools}
+                \li \l{Optimizing Designs}
-                \li \l{Optimizing for Target Hardware} (NEW)
             \endlist
         \row
             \li \inlineimage front-preview.png

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

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