feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Update contents of Motion Design chapter

Browse Source 
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>
This commit is contained in:
Leena Miettinen
2021-06-17 14:46:46 +02:00
parent 2de96b84e1
commit 525219e848
22 changed files with 82 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/timeline-rotation-animation.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

8
doc/qtcreator/src/qtcreator-toc.qdoc
View File

@@ -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,8 +186,13 @@
\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}
\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}

5
doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc
View File

@@ -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
*/

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

@@ -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

3
doc/qtcreator/src/qtquick/qtquick-animation-overview.qdoc
View File

@@ -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:

2
doc/qtcreator/src/qtquick/qtquick-designer.qdoc
View File

@@ -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

2
doc/qtcreator/src/qtquick/qtquick-easing-curve-editor.qdoc
View File

@@ -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

36
doc/qtcreator/src/qtquick/qtquick-motion-design.qdoc
View File

@@ -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
*/

2
doc/qtcreator/src/qtquick/qtquick-properties.qdoc
View File

@@ -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

2
doc/qtcreator/src/qtquick/qtquick-timeline-view.qdoc
View File

@@ -74,7 +74,7 @@
For more information about creating timeline animations, see
\l{Creating Animations}.
\l{Creating Timeline Animations}.
\section1 Navigating in Timeline

9
doc/qtcreator/src/qtquick/qtquick-timeline.qdoc
View File

@@ -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

3
doc/qtdesignstudio/examples/doc/coffeemachine.qdoc
View File

@@ -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

3
doc/qtdesignstudio/examples/doc/ebikedesign.qdoc
View File

@@ -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

13
doc/qtdesignstudio/examples/doc/loginui4.qdoc
View File

@@ -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

3
doc/qtdesignstudio/examples/doc/progressbar.qdoc
View File

@@ -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

3
doc/qtdesignstudio/examples/doc/sidemenu.qdoc
View File

@@ -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

5
doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
View File

@@ -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

3
doc/qtdesignstudio/examples/doc/webinardemo.qdoc
View File

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

9
doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
View File

@@ -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

7
doc/qtdesignstudio/src/qtdesignstudio.qdoc
View File

@@ -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

2
doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-from-qt3ds.qdoc
View File

@@ -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

2
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
View File

@@ -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