299 lines
14 KiB
QML
299 lines
14 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
Window {
|
|
id: rootId
|
|
width: 640
|
|
height: 480
|
|
visible: true
|
|
title: qsTr("Easing Curves")
|
|
|
|
property int animDuration: 500
|
|
property color startColor : "beige"
|
|
property color endColor: "blue"
|
|
|
|
|
|
Flickable{
|
|
anchors.fill: parent
|
|
contentHeight: columnId.implicitHeight
|
|
ColumnLayout{
|
|
id: columnId
|
|
width: parent.width
|
|
spacing: 2
|
|
|
|
//The container rectangle
|
|
/*
|
|
Rectangle{
|
|
id: containerRectId
|
|
width: parent.width
|
|
height: 50
|
|
color: "gray"
|
|
|
|
Text{
|
|
text: "Easing.Linear"
|
|
anchors.centerIn: parent
|
|
}
|
|
|
|
Rectangle{
|
|
id: containedRectId
|
|
color: startColor
|
|
width: 50
|
|
height: 50
|
|
border{
|
|
width: 5
|
|
color: "black"
|
|
}
|
|
radius: 10
|
|
|
|
MouseArea{
|
|
anchors.fill: parent
|
|
property bool toRight: false
|
|
|
|
onClicked: function(){
|
|
if( toRight === false){
|
|
//Move towards the right
|
|
toRight = true
|
|
//Animate x
|
|
numberAnimationId.to = containerRectId.width - containedRectId.width
|
|
numberAnimationId.start()
|
|
|
|
//Animate the color
|
|
colorAnimationId.from = startColor
|
|
colorAnimationId.to = endColor
|
|
colorAnimationId.start()
|
|
}else{
|
|
//Move towards the left
|
|
toRight = false
|
|
//Animate x
|
|
numberAnimationId.to = 0
|
|
numberAnimationId.start()
|
|
|
|
//Animate the color
|
|
colorAnimationId.from = endColor
|
|
colorAnimationId.to = startColor
|
|
colorAnimationId.start()
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
NumberAnimation {
|
|
id: numberAnimationId
|
|
target: containedRectId
|
|
property: "x"
|
|
easing.type: Easing.Linear
|
|
to: containerRectId.width - containedRectId.width
|
|
duration: animDuration
|
|
}
|
|
|
|
ColorAnimation{
|
|
id: colorAnimationId
|
|
target: containedRectId
|
|
property: "color"
|
|
from: startColor
|
|
to: endoColor
|
|
duration: animDuration
|
|
}
|
|
}
|
|
}
|
|
*/
|
|
|
|
MovingRectangle {
|
|
backgroundColor: "gray"
|
|
startColor: "beige"
|
|
endColor: "blue"
|
|
animDuration: rootId.animDuration
|
|
easingText: "Linear"
|
|
easingType: Easing.Linear
|
|
containerwidth: rootId.width
|
|
}
|
|
|
|
MovingRectangle {
|
|
backgroundColor: "gray"
|
|
startColor: "beige"
|
|
endColor: "green"
|
|
animDuration: rootId.animDuration
|
|
easingText: "InQuad"
|
|
easingType: Easing.InQuad
|
|
containerwidth: rootId.width
|
|
}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "salmon";
|
|
animDuration:rootId.animDuration ; easingText: "OutQuad"; easingType: Easing.OutQuad;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "tomato";
|
|
animDuration:rootId.animDuration ; easingText: "InOutQuad"; easingType: Easing.InOutQuad;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "darkorange"
|
|
animDuration:rootId.animDuration ; easingText: "OutInQuad"; easingType: Easing.OutInQuad;
|
|
containerwidth: rootId.width}
|
|
|
|
|
|
//Cubic
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "gold"
|
|
animDuration:rootId.animDuration ; easingText: "InCubic"; easingType: Easing.InCubic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "yellow"
|
|
animDuration:rootId.animDuration ; easingText: "OutCubic"; easingType: Easing.OutCubic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "peachpuff"
|
|
animDuration:rootId.animDuration ; easingText: "InOutCubic"; easingType: Easing.InOutCubic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "thistle"
|
|
animDuration:rootId.animDuration ; easingText: "OutInCubic"; easingType: Easing.OutInCubic;
|
|
containerwidth: rootId.width}
|
|
|
|
//Quart
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "orchid"
|
|
animDuration: rootId.animDuration; easingText: "InQuart"; easingType: Easing.InQuart;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "purple"
|
|
animDuration:rootId.animDuration ; easingText: "OutQuart"; easingType: Easing.OutQuart;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "slateblue"
|
|
animDuration:rootId.animDuration ; easingText: "InOutQuart"; easingType: Easing.InOutQuart;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "chartreuse"
|
|
animDuration:rootId.animDuration ; easingText: "OutInQuart"; easingType: Easing.OutInQuart;
|
|
containerwidth: rootId.width}
|
|
|
|
//Quint
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "limegreen"
|
|
animDuration:rootId.animDuration ; easingText: "InQuint"; easingType: Easing.InQuint;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "seagreen"
|
|
animDuration:rootId.animDuration ; easingText: "OutQuint"; easingType: Easing.OutQuint;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "darkgreen"
|
|
animDuration:rootId.animDuration ; easingText: "InOutQuint"; easingType: Easing.InOutQuint;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "olive"
|
|
animDuration:rootId.animDuration ; easingText: "OutInQuint"; easingType: Easing.OutInQuint;
|
|
containerwidth: rootId.width}
|
|
|
|
//Sine
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "darkseagreen"
|
|
animDuration:rootId.animDuration ; easingText: "InSine"; easingType: Easing.InSine;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "teal"
|
|
animDuration:rootId.animDuration ; easingText: "OutSine"; easingType: Easing.OutSine;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "turquoise"
|
|
animDuration: rootId.animDuration; easingText: "InOutSine"; easingType: Easing.InOutSine;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "steelblue"
|
|
animDuration:rootId.animDuration ; easingText: "OutInSine"; easingType: Easing.OutInSine;
|
|
containerwidth: rootId.width}
|
|
|
|
//Expo
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "skyblue"
|
|
animDuration:rootId.animDuration ; easingText: "InExpo"; easingType: Easing.InExpo;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "royalblue"
|
|
animDuration:rootId.animDuration ; easingText: "OutExpo"; easingType: Easing.OutExpo;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "mediumblue"
|
|
animDuration:rootId.animDuration ; easingText: "InOutExpo"; easingType: Easing.InOutExpo;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "midnightblue"
|
|
animDuration:rootId.animDuration ; easingText: "OutInExpo"; easingType: Easing.OutInExpo;
|
|
containerwidth: rootId.width}
|
|
|
|
//Circ
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "cornsilk"
|
|
animDuration:rootId.animDuration ; easingText: "InCirc"; easingType: Easing.InCirc;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "bisque"
|
|
animDuration:rootId.animDuration ; easingText: "OutCirc"; easingType: Easing.OutCirc;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "rosybrown"
|
|
animDuration:rootId.animDuration ; easingText: "InOutCirc"; easingType: Easing.InOutCirc;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "sandybrown"
|
|
animDuration:rootId.animDuration ; easingText: "OutInCirc"; easingType: Easing.OutInCirc;
|
|
containerwidth: rootId.width}
|
|
|
|
|
|
//Elastic
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "cornsilk"
|
|
animDuration:rootId.animDuration ; easingText: "InElastic"; easingType: Easing.InElastic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "bisque"
|
|
animDuration:rootId.animDuration ; easingText: "OutElastic"; easingType: Easing.OutElastic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "rosybrown"
|
|
animDuration:rootId.animDuration ; easingText: "InOutElastic"; easingType: Easing.InOutElastic;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "sandybrown"
|
|
animDuration:rootId.animDuration ; easingText: "OutInElastic"; easingType: Easing.OutInElastic;
|
|
containerwidth: rootId.width}
|
|
|
|
|
|
//Black
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "maroon"
|
|
animDuration:rootId.animDuration ; easingText: "InBack"; easingType: Easing.InBack;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "lavenderblush"
|
|
animDuration:rootId.animDuration ; easingText: "OutBack"; easingType: Easing.OutBack;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "mistyrose"
|
|
animDuration:rootId.animDuration ; easingText: "InOutBack"; easingType: Easing.InOutBack;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "gainsboro"
|
|
animDuration:rootId.animDuration ; easingText: "OutInBack"; easingType: Easing.OutInBack;
|
|
containerwidth: rootId.width}
|
|
|
|
|
|
//Bounce
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "silver"
|
|
animDuration:rootId.animDuration ; easingText: "InBounce"; easingType: Easing.InBounce;
|
|
containerwidth: rootId.width }
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "dimgray"
|
|
animDuration:rootId.animDuration ; easingText: "OutBounce"; easingType: Easing.OutBounce;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "slategray"
|
|
animDuration:rootId.animDuration ; easingText: "InOutBounce"; easingType: Easing.InOutBounce;
|
|
containerwidth: rootId.width}
|
|
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "darkslategray"
|
|
animDuration:rootId.animDuration ; easingText: "OutInBounce"; easingType: Easing.OutInBounce;
|
|
containerwidth: rootId.width}
|
|
|
|
//Bezier
|
|
MovingRectangle {backgroundColor: "gray"; startColor: "beige"; endColor: "darkslategray"
|
|
animDuration:rootId.animDuration ; easingText: "Bezier"; easingType: Easing.Bezier;
|
|
containerwidth: rootId.width}
|
|
|
|
}
|
|
}
|
|
}
|