Doc: Describe the Curve Editor

Modify the curve picker docs to try to make it clearer that the old
easing curve editor and the new curve editor are two separate things.

Change-Id: I6a57d151c0edef15850cff264a27d519fbe6635b
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

2 files changed, 39 insertions, 8 deletions

diff --git a/doc/images/studio-curve-editor.png b/doc/images/studio-curve-editor.png
new file mode 100644
index 0000000000..f1f82e0abe
--- /dev/null
+++ b/doc/images/studio-curve-editor.png
diff --git a/doc/src/qtquick/qtquick-timeline.qdoc b/doc/src/qtquick/qtquick-timeline.qdoc
index 3462330208..de012b94e5 100644
--- a/doc/src/qtquick/qtquick-timeline.qdoc
+++ b/doc/src/qtquick/qtquick-timeline.qdoc
@@ -245,8 +245,11 @@
     components can appear to pick up speed, slow down, or bounce back at the
     end of the animation. By default, the animations you specify on the
     timeline are \e linear, which means that they move from the beginning to
-    the end at a constant speed. You can use the curve picker to edit the
-    easing curve at a keyframe.
+    the end at a constant speed. You can use the \e {curve picker} to edit the
+    easing curve between two keyframes. You can also use the more advanced
+    \e {curve editor} to edit the curves for the whole animation.
+
+    \section2 Attaching Easing Curves to Keyframes
 
     \image studio-curve-picker.png
 
@@ -256,16 +259,16 @@
     custom curve. For more information about easing curve types, see the
     documentation for \l [QML] {PropertyAnimation}{easing curves}.
 
-    To zoom into and out of the easing curve editor, use the mouse roller. To
-    reset the zoom factor, right-click in the editor and select
+    To zoom into and out of the easing curve picker, use the mouse roller. To
+    reset the zoom factor, right-click in the picker and select
     \uicontrol {Reset Zoom}.
 
-    To select easing curves:
+    To attach easing curves to keyframes:
 
     \list 1
         \li Select a keyframe on the timeline.
         \li Select \uicontrol {Curve Picker (C)} on the toolbar, or press
-            \key C to open the \uicontrol {Easing Curve Editor} dialog.
+            \key C to open the curve picker.
         \li Select an easing curve in the \uicontrol Presets tab.
         \li In the \uicontrol {Duration (ms)} field, select the duration of the
             easing function in milliseconds.
@@ -279,11 +282,13 @@
     to \inlineimage keyframe_manualbezier_inactive.png
     .
 
+    \section2 Customizing Easing Curves
+
     To customize easing curves:
 
     \list 1
-        \li In the \uicontrol {Easing Curve Editor} dialog, select an easing
-            curve in the \uicontrol Presets tab.
+        \li In the curve picker, select an easing curve in the
+            \uicontrol Presets tab.
         \li Drag the curve handlers to modify the curve.
         \li Right-click in the editor, and select \uicontrol {Add Point} to add
             points to the curve.
@@ -299,6 +304,32 @@
     To paste easing curve definitions to the curve picker as text, select
     the \uicontrol Text tab.
 
+    \section1 Editing Animation Curves
+
+    In the curve editor, you can view and modify the whole animation curve. You
+    can insert keyframes to the curve and drag them and the point handlers to
+    modify the curve. You can modify the appearance of the curve in the style
+    editor.
+
+    You can also edit easing curves that you added with the curve picker.
+
+    \image studio-curve-editor.png
+
+    To edit animation curves:
+
+    \list 1
+        \li In the \uicontrol Timeline view, insert at least one keyframe.
+        \li Select \inlineimage curveGraphIcon.png
+            (\uicontrol {Curve Editor (C)} on the toolbar or press \key C
+            to open the curve editor.
+        \li Right-click in the curve editor, and select
+            \uicontrol {Insert Keyframe} to add a keyframe.
+        \li Select keyframes to display the easing curves attached to them.
+            To select multiple keyframes, press and hold \key Ctrl.
+    \endlist
+
+    Your changes are automatically saved when you close the editor.
+
     \section1 Rotating Items
 
     To animate components that rotate around a central point, you can use the