Update animatons and timeline documentation

Added new information about animation system as well as some minor fixes
to timeline documentation.

Task-number: QT3DS-3888
Change-Id: I5ba8350e4b3fa395e664deebf129002d3d4cf060
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

10 files changed, 78 insertions, 13 deletions

diff --git a/doc/src/03-studio/0-menu.qdoc b/doc/src/03-studio/0-menu.qdoc
index 2e3e6604..f1359cf2 100644
--- a/doc/src/03-studio/0-menu.qdoc
+++ b/doc/src/03-studio/0-menu.qdoc
@@ -111,8 +111,8 @@
     \list
     \li
       \uicontrol{Default Interpolation} - Controls whether new animation
-      keyframes are created with
-      \l{animations.html#interpolation}{linear or smooth interpolation}.
+      keyframes are created with linear or smooth interpolation. This setting applies only to
+      animations of \l{Ease In/Out} type.
     \li
       \uicontrol{Timeline Snapping Grid} - When using snapping in the
       timeline, controls which ticks to snap to.
@@ -246,7 +246,7 @@
   press the \c{Delete} key after selecting the keyframes to delete them.
 \li
   \uicontrol{Set Interpolation} - Changes the in and out
-  \l{animations.html#interpolation}{interpolation}
+  \l{Ease In/Out}{interpolation}
   setting for the selected keyframes. This command is
   also available from the context menu when right-clicking in the
   animation portion of the \e{timeline palette}.
diff --git a/doc/src/03-studio/5-timeline-palette.qdoc b/doc/src/03-studio/5-timeline-palette.qdoc
index cf0c7739..0f917151 100644
--- a/doc/src/03-studio/5-timeline-palette.qdoc
+++ b/doc/src/03-studio/5-timeline-palette.qdoc
@@ -281,13 +281,18 @@ coordinates the timing of it all.
 \section2 Zooming In and Out
 
 When working with fast animations you may wish to zoom in to see the
-contents better. To zoom the timeline, do one of the following:
+contents better. It is possible to zoom the timeline both horizontally and vertically.
+To zoom the timeline horizontally, do one of the following:
 \list
   \li Press \c{Alt + mouse right click} and drag the mouse left/right to zoom in/out.
   \li Press \c{+} or \c{-} on the keyboard to zoom in/out.
-  \li Use the slider locate in the bottom of the timeline palette
+  \li Use the slider located in the bottom of the timeline palette
 \endlist
 
+To zoom the timeline vertically, hold down the Alt key and use the mouse scroll wheel.
+
+\note Vertical zooming only applies to expanded property graphs.
+
 \section2 Setting Playhead Time
 
 Drag the playhead by the red knob over the time measure to adjust the
@@ -364,8 +369,8 @@ from the context menu.
 To apply a custom text, first do one of the following:
 \list
   \li
-    Right-click anywhere in the timeline palette and select \uicontrol {Show All Time Bar Texts}
-    from the context menu.
+    Right-click anywhere in the timeline palette and select
+    \uicontrol {Toggle Timebars Text Visibility} from the context menu.
   \li
     Click the
     \inlineimage timeline-texts-icon.png
diff --git a/doc/src/03-studio/9-keyboard-shortcuts.qdoc b/doc/src/03-studio/9-keyboard-shortcuts.qdoc
index 376a7ac5..543e28b9 100644
--- a/doc/src/03-studio/9-keyboard-shortcuts.qdoc
+++ b/doc/src/03-studio/9-keyboard-shortcuts.qdoc
@@ -553,9 +553,21 @@ only in \e{Perspective View} and \e{Orthographic View}.
     \li \c{Shift + ,}
     \li \c{Shift + ,}
   \row
-    \li Zoom timeline in/out
+    \li Zoom timeline in/out horizontally
     \li \c{Alt + right mouse button + right/left mouse drag}
     \li \c{Option + right mouse button + right/left mouse drag}
+  \row
+    \li Zoom property graph in/out vertically
+    \li \c{Alt + mouse scroll wheel}
+    \li \c{Option + mouse scroll wheel}
+  \row
+    \li Pan property graph vertically
+    \li \c{Alt + left mouse button + drag up/down}
+    \li \c{Option + left mouse button + drag up/down}
+  \row
+    \li Move bezier curve control point independent of the other control point
+    \li \c{Ctrl + left mouse button}
+    \li \c{Cmd + left mouse button}
 \endtable
 
 \section2 Slides
diff --git a/doc/src/animations.qdoc b/doc/src/animations.qdoc
index b094d4b5..506bcf7a 100644
--- a/doc/src/animations.qdoc
+++ b/doc/src/animations.qdoc
@@ -71,6 +71,20 @@ playhead in the timeline palette, or by running the presentation in the Studio o
 Moving the playhead to a new position, and then changing the value of a property with animation
 enabled will create a new keyframe.
 
+You can click the arrow icon next to the object with animated properties to expand it, this will
+display all animated properties and keyframes.
+
+\image object-animated-properties.png
+
+Furthermore, double-click one of the properties to display the property graph. The property graph
+displays the property animation curves and allows you to edit them.
+
+\image object-animation-channels.png
+
+You can toggle channel visibility by clicking the channel icon on the left side of the scene graph
+(Ctrl + left mouse click to multi select). This function is only available if the animated
+property has more than one channel.
+
 \section1 Edit Animations
 
 \section2 Insert Keyframes
@@ -154,7 +168,20 @@ To copy keyframes from one element to another, follow the steps below:
   the context menu.
 \endlist
 
-\section2 Interpolation
+\section1 Animation Types
+
+There are three different types of animations in Studio. These are described below.
+
+To change animation type, right-click the property row in the timeline and select
+\uicontrol{Animation Type}.
+
+\image select-animation-type.png
+
+\section2 Linear
+
+With linear interpolation the value changes at the same rate from one value to the next.
+
+\section2 Ease In/Out
 
 As the playhead moves from one keyframe to the next, the Qt 3D Studio
 Runtime can perform \e {linear interpolation}, \e {smooth
@@ -173,10 +200,31 @@ keyframe.
 
 \image Studio-Timeline-Interpolation.png
 
-\note If you find that you are constantly setting your keyframes from
-Smooth to Linear, or vice-versa, you may wish to change the
-\uicontrol{Default Interpolation} setting for new keyframes in the
-\l{studio-menu.html#edit}{Application Preferences}.
+\note You can set the default interpolation values for ease in/out animations
+in the \l{studio-menu.html#edit}{studio preferences}.
+
+\section2 Bezier
+
+Bezier animations are using a bezier curve to define the animation. This gives you much more control
+of the animation and interpolation.
+
+Two or more end points define a bezier curve. Each end point represents the channel value
+of a keyframe. These end points have two control points (handles), or if they are located in the
+beginning or end of the timeline, one control point.
+
+\image bezier-curves.png
+
+\section3 Control Points
+
+Once you have created your animation, you can adjust it by moving the control points. To display
+the control points, first select the end point. Then, to move the control point, drag it with the
+left mouse button. If the end point has two control points, both will move simultaneously. To
+move just one, hold down the Ctrl key while dragging. You cannot move control points past previous
+or next keyframe.
+
+\section3 End Points
+To move an end point horizontally, you will need to move the actual keyframe on the timeline bar. To
+move it vertically, you will need to change the value for the animated value in this position.
 
 \section1 Import Animations
 
diff --git a/doc/src/images/Studio-Timeline-Animation.png b/doc/src/images/Studio-Timeline-Animation.png
index c8247be9..bacd47c4 100644
--- a/doc/src/images/Studio-Timeline-Animation.png
+++ b/doc/src/images/Studio-Timeline-Animation.png
diff --git a/doc/src/images/bezier-curves.png b/doc/src/images/bezier-curves.png
new file mode 100644
index 00000000..5a0a0319
--- /dev/null
+++ b/doc/src/images/bezier-curves.png
diff --git a/doc/src/images/object-amination-channels.png b/doc/src/images/object-amination-channels.png
new file mode 100644
index 00000000..c629aeae
--- /dev/null
+++ b/doc/src/images/object-amination-channels.png
diff --git a/doc/src/images/object-animated-properties.png b/doc/src/images/object-animated-properties.png
new file mode 100644
index 00000000..172a765e
--- /dev/null
+++ b/doc/src/images/object-animated-properties.png
diff --git a/doc/src/images/object-animation-channels.png b/doc/src/images/object-animation-channels.png
new file mode 100644
index 00000000..c629aeae
--- /dev/null
+++ b/doc/src/images/object-animation-channels.png
diff --git a/doc/src/images/select-animation-type.png b/doc/src/images/select-animation-type.png
new file mode 100644
index 00000000..32fa2b1a
--- /dev/null
+++ b/doc/src/images/select-animation-type.png