add book
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
cmake_minimum_required(VERSION 3.16)
|
||||
|
||||
project(10-EasingCurves VERSION 0.1 LANGUAGES CXX)
|
||||
|
||||
set(CMAKE_CXX_STANDARD_REQUIRED ON)
|
||||
|
||||
find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)
|
||||
|
||||
qt_standard_project_setup()
|
||||
|
||||
qt_add_executable(app10-EasingCurves
|
||||
main.cpp
|
||||
)
|
||||
|
||||
qt_add_qml_module(app10-EasingCurves
|
||||
URI 10-EasingCurves
|
||||
VERSION 1.0
|
||||
QML_FILES Main.qml
|
||||
QML_FILES MovingRectangle.qml
|
||||
)
|
||||
|
||||
# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
|
||||
# If you are developing for iOS or macOS you should consider setting an
|
||||
# explicit, fixed bundle identifier manually though.
|
||||
set_target_properties(app10-EasingCurves PROPERTIES
|
||||
# MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app10-EasingCurves
|
||||
MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
|
||||
MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
|
||||
MACOSX_BUNDLE TRUE
|
||||
WIN32_EXECUTABLE TRUE
|
||||
)
|
||||
|
||||
target_link_libraries(app10-EasingCurves
|
||||
PRIVATE Qt6::Quick
|
||||
)
|
||||
|
||||
include(GNUInstallDirs)
|
||||
install(TARGETS app10-EasingCurves
|
||||
BUNDLE DESTINATION .
|
||||
LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
|
||||
RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
|
||||
)
|
||||
@@ -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}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import QtQuick
|
||||
|
||||
Item {
|
||||
|
||||
property var backgroundColor
|
||||
property var startColor
|
||||
property var endColor
|
||||
property string easingText
|
||||
property int animDuration
|
||||
property var easingType
|
||||
property int containerwidth
|
||||
|
||||
|
||||
width: containerRectId.width
|
||||
height: containerRectId.height
|
||||
|
||||
property int finalX: containerRectId.width - containedRectId.width
|
||||
|
||||
Rectangle {
|
||||
id : containerRectId
|
||||
width: containerwidth
|
||||
height: 50
|
||||
color: backgroundColor
|
||||
|
||||
Text {
|
||||
|
||||
text: easingText
|
||||
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: {
|
||||
|
||||
if ( toRight === false)
|
||||
{
|
||||
toRight = true
|
||||
//Animate X
|
||||
mNumberAnimationId.to = finalX
|
||||
mNumberAnimationId.start()
|
||||
|
||||
//Animate color
|
||||
mColorAnimationId.from = startColor
|
||||
mColorAnimationId.to = endColor
|
||||
mColorAnimationId.start()
|
||||
|
||||
//Move to right
|
||||
}else{
|
||||
//Move to left
|
||||
toRight = false
|
||||
//Animate X
|
||||
mNumberAnimationId.to = 0
|
||||
mNumberAnimationId.start()
|
||||
|
||||
//Animate color
|
||||
mColorAnimationId.from = endColor
|
||||
mColorAnimationId.to = startColor
|
||||
mColorAnimationId.start()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
NumberAnimation{
|
||||
id : mNumberAnimationId
|
||||
target: containedRectId
|
||||
property : "x"
|
||||
easing.type : easingType
|
||||
to : finalX
|
||||
duration: animDuration
|
||||
}
|
||||
|
||||
|
||||
ColorAnimation {
|
||||
id : mColorAnimationId
|
||||
target: containedRectId
|
||||
property : "color"
|
||||
from: startColor
|
||||
to: endColor
|
||||
duration: animDuration
|
||||
}
|
||||
Component.onCompleted: {
|
||||
//console.log("The width of the contained rect is :" + parent.width)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
#include <QGuiApplication>
|
||||
#include <QQmlApplicationEngine>
|
||||
|
||||
int main(int argc, char *argv[])
|
||||
{
|
||||
QGuiApplication app(argc, argv);
|
||||
|
||||
QQmlApplicationEngine engine;
|
||||
const QUrl url(u"qrc:/10-EasingCurves/Main.qml"_qs);
|
||||
QObject::connect(
|
||||
&engine,
|
||||
&QQmlApplicationEngine::objectCreationFailed,
|
||||
&app,
|
||||
[]() { QCoreApplication::exit(-1); },
|
||||
Qt::QueuedConnection);
|
||||
engine.load(url);
|
||||
|
||||
return app.exec();
|
||||
}
|
||||
Reference in New Issue
Block a user