Scribd
Upload
175 views

QML Animations

The document discusses QML animations including number, property, color, rotation and path animations. It describes using easing curves and organizing animations sequentially and in parallel using animation groups.

Uploaded by

eliaezekiel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
175 views

QML Animations

The document discusses QML animations including number, property, color, rotation and path animations. It describes using easing curves and organizing animations sequentially and in parallel using animation groups.

Uploaded by

eliaezekiel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

QML Animations

Training Course

Visit us at http://qt.digia.com
Produced by Digia Plc.
Material based on Qt 5.0, created on September 27, 2012

Digia Plc.

Module: Animations
Animations
Easing Curves
Animation Groups

2/30

Animations

Objectives
Can apply animations to user interfaces:
Understanding of basic concepts
number and property animations
easing curves

Ability to queue and group animations


sequential and parallel animations
pausing animations

Knowledge of specialized animations


color and rotation animations

3/30

Animations

Module: Animations
Animations
Easing Curves
Animation Groups

Animations

4/30

Animations

Why use animations, states and transitions?


Handle form factor changes
Outline application state changes
Orchestrate high level logic
Natural transitions
Our brain expects movement
Helps the user nd its way

around the GUI


Don't abuse them!

Demo
qml-animations/ex-thumbnailexplorer/thumbnailexplorer.qml
.

Animations

5/30

Animations

Animations
Animations can be applied to any element
Animations update properties to cause a visual change
All animations are property animations
Specialized animation types:

NumberAnimation for changes to numeric properties


ColorAnimation for changes to color properties
RotationAnimation for changes to orientation of items
Vector3dAnimation for motion in 3D space

Easing curves are used to create variable speed animations


Animations are used to create visual effects
See
QML Animation Documentation
.

Animations

6/30

Animations

Number Animations
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Image {
x: 220
source: "../images/backbutton.png"
NumberAnimation on y {
from: 350; to: 150
duration: 1000
}
}
}
.Demo qml-animations/ex-animations/number-animation.qml

Animations

7/30

Animations

Number Animations
Number animations change the values of numeric properties
NumberAnimation on y {
from: 350; to: 150
duration: 1000
}

Applied directly to properties with the on keyword


The y property is changed by the NumberAnimation
starts at 350
ends at 150
takes 1000 milliseconds

Can also be dened separately

Animations

8/30

Animations

Property Animations
import QtQuick 2.0
Rectangle {
width: 400; height: 400; color: "lightblue"
Image {
id: image
x: 100; y: 100
source: "../images/thumbnails.png"
}
PropertyAnimation {
target: image
properties: "width,height"
from: 0; to: 200; duration: 1000
running: true
}
}
.Demo qml-animations/ex-animations/property-animation.qml

Animations

9/30

Animations

Property Animations
Property animations change named properties of a target
PropertyAnimation {
target: image
properties: "width,height"
from: 0; to: 200; duration: 1000
running: true
}

Dened separately to the target element


Applied to properties of the target
properties is a comma-separated string list of names

Often used as part of a Transition


Not run by default
set the running property to true

Animations

10/30

Animations

Number Animations Revisited


import QtQuick 2.0
Rectangle {
width: 400; height: 400; color: "lightblue"
Rectangle {
id: rect
x: 0; y: 150; width: 100; height: 100
}
NumberAnimation {
target: rect
properties: "x"
from: 0; to: 150; duration: 1000
running: true
}
}
.Demo qml-animations/ex-animations/number-animation2.qml

Animations

11/30

Animations

Number Animations Revisited


Number animations are just specialized property animations
NumberAnimation {
target: rect
properties: "x"
from: 0; to: 150; duration: 1000
running: true
}

Animation can be dened separately


Applied to properties of the target
properties contains a comma-separated list of property names

Not run by default


set the running property to true

Animations

12/30

Animations

The Behavior Element


Behavior allows you to set up an animation whenever a property

changes.
Behavior on x {
SpringAnimation {
spring: 1
damping: 0.2
}
}
Demo
qml-animations/ex-animations/spring-animation.qml
.

Animations

13/30

Animations

Module: Animations
Animations
Easing Curves
Animation Groups

Easing Curves

14/30

Animations

Easing Curves
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Image {
x: 220
source: "../images/backbutton.png"
NumberAnimation on y {
from: 0; to: 350
duration: 1000
easing.type: "OutExpo"
}
}
}
.Demo qml-animations/ex-animations/easing-curve.qml
.Demo $QTDIR/examples/animation/easing

Easing Curves

15/30

Animations

Easing Curves
Apply an easing curve to an animation:
NumberAnimation on y {
from: 0; to: 350; duration: 1000
easing.type: "OutExpo"
}

Sets the easing.type property


Relates the elapsed time
to a value interpolated between the from and to values
using a function for the easing curve
in this case, the "OutExpo" curve

Easing Curves

16/30

Animations

Module: Animations
Animations
Easing Curves
Animation Groups

Animation Groups

17/30

Animations

Sequential and Parallel Animations


Animations can be performed sequentially and in parallel
SequentialAnimation denes a sequence
with each child animation run in sequence

For example:
a rescaling animation, followed by
an opacity changing animation

ParallelAnimation denes a parallel group


with all child animations run at the same time

For example:
simultaneous rescaling and opacity changing animations

Sequential and parallel animations can be nested

Animation Groups

18/30

Animations

Sequential Animations
Image {
id: rocket
anchors.centerIn: parent
source: "../images/rocket.png"
}
SequentialAnimation {
NumberAnimation {
target: rocket; properties: "scale"
from: 1.0; to: 0.5; duration: 1000
}
NumberAnimation {
target: rocket; properties: "opacity"
from: 1.0; to: 0.0; duration: 1000
}
running: true
}
Demo
qml-animations/ex-animations/sequential-animation.qml
.

Animation Groups

19/30

Animations

Sequential Animations
SequentialAnimation {
NumberAnimation {
target: rocket; properties: "scale"
from: 1.0; to: 0.5; duration: 1000
}
NumberAnimation {
target: rocket; properties: "opacity"
from: 1.0; to: 0.0; duration: 1000
}
running: true
}

Child elements dene a two-stage animation:


rst, the rocket is scaled down
then it fades out

SequentialAnimation does not itself have a target


it only groups other animations

Animation Groups

20/30

Animations

Pausing between Animations


SequentialAnimation {
NumberAnimation {
target: rocket; properties: "scale"
from: 0.0; to: 1.0; duration: 1000
}
PauseAnimation {
duration: 1000
}
NumberAnimation {
target: rocket; properties: "scale"
from: 1.0; to: 0.0; duration: 1000
}
running: true
}

Animation Groups

21/30

Animations

Parallel Animations
Image {
id: rocket
anchors.centerIn: parent
source: "../images/rocket.png"
}
ParallelAnimation {
NumberAnimation {
target: rocket; properties: "scale"
from: 1.0; to: 0.5; duration: 1000
}
NumberAnimation {
target: rocket; properties: "opacity"
from: 1.0; to: 0.0; duration: 1000
}
running: true
}
.Demo qml-animations/ex-animations/parallel-animation.qml

Animation Groups

22/30

Animations

Other Animations
Other animations

ColorAnimation for changes to color properties


RotationAnimation for changes to orientation of items
Vector3dAnimation for motion in 3D space
AnchorAnimation animate an anchor change
ParentAnimation animates changes in parent values.
SpringAnimation allows a property to track a value in a spring-like

motion
PropertyAction the PropertyAction element allows immediate property

changes during animation


ScriptAction allows scripts to be run during an animation

Animation Groups

23/30

Animations

Color Animation
ColorAnimation describes color changes to items
Component-wise blending of RGBA values
ColorAnimation {
target: rectangle1
property: "color"
from: Qt.rgba(0,0.5,0,1)
to: Qt.rgba(1,1,1,1)
duration: 1000
running: true
}

Animation Groups

24/30

Animations

Rotation Animation
RotationAnimation describes rotation of items
Easier to use than NumberAnimation for the same purpose
Applied to the rotation property of an element
Value of direction property controls rotation:
RotationAnimation.Clockwise
RotationAnimation.Counterclockwise
RotationAnimation.Shortest the direction of least angle between
from and to values

Animation Groups

25/30

Animations

Rotation Animation
Image {
id: ball
source: "../images/ball.png"
anchors.centerIn: parent
smooth: true
RotationAnimation on rotation {
from: 45; to: 315
direction: RotationAnimation.Shortest
duration: 1000
}
}

1 second animation
Counter-clockwise from 45 to 315
shortest angle of rotation is via 0

Animation Groups

26/30

Animations

Path Animation
PathAnimation animates an item along a path
Manipulates the x, y and rotation properties of an element
The target element will be animated along the path
Value of orientation property controls the target rotation:

PathAnimation.Fixed
PathAnimation.RightFirst
PathAnimation.LeftFirst
PathAnimation.TopFirst
PathAnimation.BottomFirst

Value of path is specied using Path element and its helpers


PathLine, PathQuad, PathCubic, PathCurve, PathArc, PathSvg

Animation Groups

27/30

Animations

Path Animation
PathAnimation {
duration: 2000
easing.type: Easing.InOutQuad
target: rocket
orientation: PathAnimation.RightFirst
anchorPoint: Qt.point(rocket.width/2,
rocket.height/2)
path: Path {
startX: rocket.width/2
startY: rocket.height/2
PathCubic {
x: window.width - rocket.width/2
y: window.height - rocket.height/2
control1X: x; control1Y: rocket.height/2
control2X: rocket.width/2; control2Y: y
}
}
}
.Demo qml-animations/ex-animations/path-animation.qml

Animation Groups

28/30

Animations

Lab: Bouncing Ball

Starting from the rst partial solution:


Make the ball start from the ground and return to the ground.
Make the ball travel from left to right
Add rotation, so the ball completes just over one rotation
Reorganize the animations using sequential and parallel animations
Make the animation start when the ball is clicked
Add decoration (ground and sky)
Lab
qml-animations/lab-animations
.

Animation Groups

29/30

Animations

Digia Plc.
Digia, Qt and the Digia and Qt logos are the registered trademarks of
Digia Plc. in Finland and other countries worldwide.

Animation Groups

30/30

Animations

You might also like