add book
This commit is contained in:
@@ -0,0 +1,298 @@
|
||||
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}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user