add book

2025-09-28 17:05:51 +08:00
parent 8eb80ab66d
commit d97fa3e0fe
398 changed files with 18737 additions and 0 deletions
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/CMakeLists.txt
@@ -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}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/Main.qml
@@ -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}
+
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/MovingRectangle.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/MovingRectangle.qml
@@ -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)
+            }
+
+        }
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/10-EasingCurves/main.cpp
@@ -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();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(11-GroupedAnimations 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(app11-GroupedAnimations
+    main.cpp
+)
+
+qt_add_qml_module(app11-GroupedAnimations
+    URI 11-GroupedAnimations
+    VERSION 1.0
+    QML_FILES Main.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(app11-GroupedAnimations PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app11-GroupedAnimations
+    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(app11-GroupedAnimations
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app11-GroupedAnimations
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/Main.qml
@@ -0,0 +1,76 @@
+import QtQuick
+
+Window {
+    id: rootId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Grouped Animations")
+    readonly property int animationDuration: 500
+    property bool going_down: false
+
+    function animateCircle(){
+
+        if (going_down === false){
+            //Go down
+            going_down =  true
+            xAnimationId.from = 0
+            xAnimationId.to = rootId.width - circleId.width
+
+            yAnimationId.from = 0
+            yAnimationId.to = rootId.height - circleId.height
+        }else{
+            //Go up
+            going_down = false
+            xAnimationId.from = rootId.width - circleId.width
+            xAnimationId.to = 0
+
+            yAnimationId.from = rootId.height - circleId.height
+            yAnimationId.to = 0
+        }
+        groupedAnimationId.start()
+    }
+
+
+    Rectangle{
+        anchors.fill: parent
+        color: "gray"
+
+        Rectangle{
+            id: circleId
+            width: 100
+            height: 100
+            radius: 70
+            color: "yellowgreen"
+
+
+            //SequentialAnimation{
+            ParallelAnimation{
+                id: groupedAnimationId
+
+                //Animate x
+                NumberAnimation{
+                    id: xAnimationId
+                    target: circleId
+                    property: "x"
+                    duration: animationDuration
+                }
+
+                //Animate y
+                NumberAnimation{
+                    id: yAnimationId
+                    target: circleId
+                    property: "y"
+                    duration: animationDuration
+                }
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(){
+                animateCircle()
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/11-GroupedAnimations/main.cpp
@@ -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:/11-GroupedAnimations/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(12-PendulumSwing 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(app12-PendulumSwing
+    main.cpp
+)
+
+qt_add_qml_module(app12-PendulumSwing
+    URI 12-PendulumSwing
+    VERSION 1.0
+    QML_FILES Main.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(app12-PendulumSwing PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app12-PendulumSwing
+    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(app12-PendulumSwing
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app12-PendulumSwing
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/Main.qml
@@ -0,0 +1,57 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Pendulum Swing")
+
+    readonly property int pendulumAngle: 30
+    readonly property int animDuration: 700
+
+    Rectangle{
+        id: pendulumId
+        width: 20
+        height: 200
+        color: "black"
+        x: (parent.width - width)/2
+        y: 50
+        transformOrigin: Item.Top
+
+        Rectangle{
+            id: bobId
+            width: 50
+            height: 50
+            color: "red"
+            radius: width/2
+            x: (pendulumId.width - width)/2
+            y: pendulumId.height
+            transformOrigin: Item.Bottom
+            rotation: pendulumId.rotation
+        }
+
+        SequentialAnimation{
+            loops: Animation.Infinite
+            running: true
+            NumberAnimation{
+                id: rightToLeftAnimationId
+                target: pendulumId
+                property: "rotation"
+                from: -pendulumAngle
+                to: pendulumAngle
+                duration: animDuration
+                easing.type: Easing.InOutQuad
+            }
+
+            NumberAnimation{
+                id: leftToRightAnimationId
+                target: pendulumId
+                property: "rotation"
+                from: pendulumAngle
+                to: -pendulumAngle
+                duration: animDuration
+                easing.type: Easing.InOutQuad
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/12-PendulumSwing/main.cpp
@@ -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:/12-PendulumSwing/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/CMakeLists.txt
@@ -0,0 +1,48 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(13-StatesTransitions 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(app13-StatesTransitions
+    main.cpp
+)
+
+qt_add_resources(app13-StatesTransitions "images"
+        PREFIX /
+        FILES
+                images/treespringsmall.png
+                images/treesummersmall.png
+)
+
+qt_add_qml_module(app13-StatesTransitions
+    URI 13-StatesTransitions
+    VERSION 1.0
+    QML_FILES Main.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(app13-StatesTransitions PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app13-StatesTransitions
+    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(app13-StatesTransitions
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app13-StatesTransitions
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/Main.qml
@@ -0,0 +1,152 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("States and Transitions")
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+
+        //Sky
+        Rectangle{
+            id: skyId
+            width: parent.width
+            height: 200
+            color: "blue"
+        }
+
+
+        Rectangle{
+            id: groundId
+            anchors.top: skyId.bottom
+            anchors.bottom: parent.bottom
+            width: parent.width
+            color: "lime"
+        }
+
+
+        Image{
+            id: treeSummerId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treesummersmall.png"
+        }
+
+        Image{
+            id: treeSpringId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treespringsmall.png"
+        }
+
+        Rectangle{
+            id: sunId
+            x: parent.width - width - 100
+            y: 50
+            width: 100
+            height: 100
+            color: "yellow"
+            radius: 600
+        }
+
+        state: "spring"
+
+        states: [
+
+           //Spring
+            State{
+                name: "spring"
+                PropertyChanges {
+                   target: skyId
+                   color: "deepskyblue"
+                }
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 0
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 1
+                }
+                PropertyChanges {
+                    target: groundId
+                    color: "lime"
+                }
+                PropertyChanges {
+                    target: sunId
+                    color: "lightyellow"
+
+                }
+            },
+
+            //Summer
+            State{
+                name: "summer"
+                PropertyChanges {
+                   target: skyId
+                   color: "lightblue"
+                }
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 1
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 0
+                }
+                PropertyChanges {
+                    target: groundId
+                    color: "darkkhaki"
+                }
+                PropertyChanges {
+                    target: sunId
+                    color: "yellow"
+
+                }
+            }
+
+        ]
+
+        //Transitions
+        transitions: [
+            Transition{
+                from: "summer"
+                to: "spring"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+            },
+
+            Transition{
+                from: "spring"
+                to: "summer"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+
+            }
+        ]
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(){
+                containerRectId.state = (containerRectId.state === "spring" ? "summer" : "spring")
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/images/treespringsmall.png
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/images/treespringsmall.png
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/images/treesummersmall.png
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/images/treesummersmall.png
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/13-StatesTransitions/main.cpp
@@ -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:/13-StatesTransitions/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/CMakeLists.txt
@@ -0,0 +1,48 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(14-StatesWithGradients 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(app14-StatesWithGradients
+    main.cpp
+)
+
+qt_add_resources(app14-StatesWithGradients "images"
+        PREFIX /
+        FILES
+                images/treespringsmall.png
+                images/treesummersmall.png
+)
+
+qt_add_qml_module(app14-StatesWithGradients
+    URI 14-StatesWithGradients
+    VERSION 1.0
+    QML_FILES Main.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(app14-StatesWithGradients PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app14-StatesWithGradients
+    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(app14-StatesWithGradients
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app14-StatesWithGradients
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/Main.qml
@@ -0,0 +1,234 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("States with Gradients")
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+
+        //Sky
+        Rectangle{
+            id: skyId
+            width: parent.width
+            height: 200
+            //color: "blue"
+            gradient: Gradient{
+                GradientStop{
+                    id: skyStartColorId
+                    position: 0.0
+                    color: "blue"
+                }
+                GradientStop{
+                    id: skyEndColorId
+                    position: 1.0
+                    color: "#66CCFF"
+                }
+            }
+        }
+
+
+        Rectangle{
+            id: groundId
+            anchors.top: skyId.bottom
+            anchors.bottom: parent.bottom
+            width: parent.width
+            //color: "lime"
+            gradient: Gradient{
+                GradientStop{
+                    id: groundStartColorId
+                    position: 0.0
+                    color: "lime"
+                }
+                GradientStop{
+                    id: groundEndColorId
+                    position: 1.0
+                    color: "#66CCFF"
+                }
+            }
+        }
+
+
+        Image{
+            id: treeSummerId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treesummersmall.png"
+        }
+
+        Image{
+            id: treeSpringId
+            x: 50
+            y: 100
+            width: 200
+            height: 300
+            source: "qrc:/images/treespringsmall.png"
+        }
+
+        Rectangle{
+            id: sunId
+            x: parent.width - width - 100
+            y: 50
+            width: 100
+            height: 100
+            color: "yellow"
+            radius: 600
+        }
+
+        state: "spring"
+
+        states: [
+
+           //Spring
+            State{
+                name: "spring"
+                /*
+                PropertyChanges {
+                   target: skyId
+                   color: "deepskyblue"
+                }
+                */
+                PropertyChanges {
+                    target: skyStartColorId
+                    color: "deepskyblue"
+                }
+
+                PropertyChanges {
+                    target: skyEndColorId
+                    color: "#AACCFF"
+                }
+
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 0
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 1
+                }
+                /*
+                PropertyChanges {
+                    target: groundId
+                    color: "lime"
+                }
+                */
+                PropertyChanges {
+                    target: groundStartColorId
+                    color: "lime"
+                }
+                PropertyChanges {
+                    target: groundEndColorId
+                    color: "#66CCFF"
+                }
+
+                PropertyChanges {
+                    target: sunId
+                    color: "lightyellow"
+
+                }
+            },
+
+            //Summer
+            State{
+                name: "summer"
+                /*
+                PropertyChanges {
+                   target: skyId
+                   color: "lightblue"
+                }
+                */
+                PropertyChanges{
+                    target: skyStartColorId
+                    color: "lightblue"
+                }
+                PropertyChanges{
+                    target: skyEndColorId
+                    color: "#EECCFF"
+                }
+                PropertyChanges {
+                    target: treeSummerId
+                    opacity: 1
+                }
+                PropertyChanges {
+                    target: treeSpringId
+                    opacity: 0
+                }
+                /*
+                PropertyChanges {
+                    target: groundId
+                    color: "darkkhaki"
+                }
+                */
+                PropertyChanges {
+                    target: groundStartColorId
+                    color: "lime"
+                }
+                PropertyChanges {
+                    target: groundEndColorId
+                    color: "darkkhaki"
+                }
+                PropertyChanges {
+                    target: sunId
+                    color: "yellow"
+
+                }
+            }
+
+        ]
+
+        //Transitions
+        /*
+        transitions: [
+            Transition{
+                from: "summer"
+                to: "spring"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+            },
+
+            Transition{
+                from: "spring"
+                to: "summer"
+                ColorAnimation{
+                    duration: 500
+                }
+                NumberAnimation{
+                    property: "opacity"
+                    duration: 500
+                }
+
+            }
+        ]
+        */
+
+        transitions: Transition{
+            from: "*"
+            to: "*"
+            ColorAnimation{
+                duration: 500
+            }
+            NumberAnimation{
+                property: "opacity"
+                duration: 500
+            }
+        }
+
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(){
+                containerRectId.state = (containerRectId.state === "spring" ? "summer" : "spring")
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/images/treespringsmall.png
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/images/treespringsmall.png
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/images/treesummersmall.png
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/images/treesummersmall.png
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/14-StatesWithGradients/main.cpp
@@ -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:/14-StatesWithGradients/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/.gitignore
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/.gitignore
@@ -0,0 +1,57 @@
+# Qt QML Language Server configuration
+qmlls.ini
+
+# Build directories
+build/
+Desktop_Qt_6_9_0_MinGW_64_bit-Debug/
+
+# Qt Creator user settings
+CMakeLists.txt.user
+
+# Compiled Object files
+*.o
+*.obj
+
+# Compiled Dynamic libraries
+*.so
+*.dylib
+*.dll
+
+# Compiled Static libraries
+*.a
+*.lib
+
+# Executables
+*.exe
+*.out
+*.app
+
+# Qt-specific
+*.qm
+*.prl
+*.pro.user
+*.pro.user.*
+*.qbs.user
+*.qbs.user.*
+*.moc
+moc_*.cpp
+moc_*.h
+qrc_*.cpp
+ui_*.h
+Makefile*
+*build-*
+
+# QML cache and compiled files
+*.qmlc
+*.jsc
+
+# Qt temporary files
+*~
+
+# macOS
+.DS_Store
+
+# Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/CMakeLists.txt
@@ -0,0 +1,52 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(TodoList VERSION 0.1 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 REQUIRED COMPONENTS Quick QuickControls2)
+
+qt_standard_project_setup(REQUIRES 6.8)
+
+qt_add_executable(TodoList
+    src/main.cpp
+)
+
+qt_add_qml_module(TodoList
+    URI TodoList
+    VERSION 1.0
+    QML_FILES
+        # Main View
+        src/views/MainView.qml
+
+        # Components
+        src/components/AppHeader.qml
+        src/components/AddTaskBar.qml
+        src/components/TaskItem.qml
+        src/components/TaskStats.qml
+
+        # Models
+        src/models/TaskListModel.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(TodoList PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app01_todolist_starter
+    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(TodoList
+    PRIVATE Qt6::Quick Qt6::QuickControls2
+)
+
+include(GNUInstallDirs)
+install(TARGETS TodoList
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/AddTaskBar.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/AddTaskBar.qml
@@ -0,0 +1,110 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+    height: 60
+    
+    signal taskAdded(string taskText)
+    
+    property color backgroundColor: "#ffffff"
+    property color textColor: "#333333"
+    property color primaryColor: "#007aff"
+    property bool darkMode: false
+    
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: "transparent"
+        
+        Rectangle {
+            anchors.fill: parent
+            color: root.backgroundColor
+            radius: 12
+            border.color: root.darkMode ? "#404040" : "#e0e0e0"
+            border.width: 1
+            
+            RowLayout {
+                anchors.fill: parent
+                anchors.margins: 12
+                spacing: 12
+                
+                // Add icon
+                Rectangle {
+                    Layout.preferredWidth: 36
+                    Layout.preferredHeight: 36
+                    color: root.primaryColor
+                    radius: 18
+                    
+                    Text {
+                        anchors.centerIn: parent
+                        text: "+"
+                        color: "#ffffff"
+                        font.pixelSize: 20
+                        font.weight: Font.Bold
+                    }
+                }
+                
+                // Text input
+                TextField {
+                    id: taskInput
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 36
+                    placeholderText: qsTr("Add a new task...")
+                    placeholderTextColor: root.darkMode ? "#888888" : "#999999"
+                    color: root.textColor
+                    font.pixelSize: 16
+                    selectByMouse: true
+                    
+                    background: Rectangle {
+                        color: "transparent"
+                        border.color: "transparent"
+                    }
+                    
+                    Keys.onReturnPressed: root.addTask()
+                    Keys.onEnterPressed: root.addTask()
+                    
+                }
+                
+                // Add button
+                Button {
+                    id: addButton
+                    Layout.preferredWidth: 80
+                    Layout.preferredHeight: 36
+                    text: qsTr("Add")
+                    enabled: taskInput.text.trim().length > 0
+                    
+                    background: Rectangle {
+                        color: addButton.enabled ? 
+                               (addButton.pressed ? Qt.darker(root.primaryColor, 1.2) : root.primaryColor) :
+                               (root.darkMode ? "#404040" : "#e0e0e0")
+                        radius: 8
+                        
+                    }
+                    
+                    contentItem: Text {
+                        text: addButton.text
+                        color: addButton.enabled ? "#ffffff" : (root.darkMode ? "#888888" : "#cccccc")
+                        font.pixelSize: 14
+                        font.weight: Font.Medium
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        
+                    }
+                    
+                    onClicked: root.addTask()
+                }
+            }
+        }
+    }
+    
+    function addTask() {
+        if (taskInput.text.trim().length > 0) {
+            root.taskAdded(taskInput.text.trim())
+            taskInput.text = ""
+            taskInput.focus = false
+        }
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/AppHeader.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/AppHeader.qml
@@ -0,0 +1,86 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts 
+
+Item {
+    id: root
+    height: 80
+    
+    signal toggleDarkMode()
+    
+    // Properties that will be bound from parent
+    property color textColor: "#333333"
+    property color textSecondary: "#999999" 
+    property bool darkMode: false
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+
+        RowLayout{
+            anchors.fill: parent
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
+            spacing: 12
+
+            // App icon
+            Text {
+                text: "📝"
+                font.pixelSize: 32
+            }
+
+            // App title and subtitle
+            Column {
+                Layout.fillWidth: true
+                spacing: 2
+                
+                Text {
+                    text: "My Tasks"
+                    font.pixelSize: 28
+                    font.weight: Font.Bold
+                    color: root.textColor
+                }
+                
+                Text {
+                    text: qsTr("Stay organized, stay productive")
+                    font.pixelSize: 12
+                    color: root.textSecondary
+                    opacity: 0.8
+                }
+
+            }
+
+            // Dark mode toggle
+            Button {
+                id: themeToggle
+                Layout.preferredWidth: 50
+                Layout.preferredHeight: 50
+                
+                background: Rectangle {
+                    color: themeToggle.pressed ? 
+                           (root.darkMode ? "#404040" : "#e0e0e0") :
+                           (root.darkMode ? "#2d2d2d" : "#f5f5f5")
+                    radius: 25
+                    border.color: root.darkMode ? "#555555" : "#d0d0d0"
+                    border.width: 1
+                    
+                    Behavior on color {
+                        ColorAnimation { duration: 150 }
+                    }
+                }
+
+                contentItem: Text{
+                    text: root.darkMode ? "☀️" : "🌙"
+                    font.pixelSize: 20
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                //Emit the signal when the button is clicked
+                onClicked: root.toggleDarkMode()
+
+            }
+
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/TaskItem.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/TaskItem.qml
@@ -0,0 +1,209 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+    height: 56
+    
+    required property string taskTitle
+    required property bool taskDone
+    
+    signal toggleDone()
+    signal deleteTask()
+    
+    property color backgroundColor: "#ffffff"
+    property color textColor: "#333333"
+    property color completedColor: "#999999"
+    property color primaryColor: "#007aff"
+    property bool darkMode: false
+    
+    // Constants for this component
+    readonly property int itemHeight: 56
+    readonly property int margins: 4
+    readonly property int innerMargins: 12
+    readonly property int checkboxSize: 24
+    readonly property int deleteButtonSize: 32
+
+    Rectangle {
+        id: taskItemBackground
+        anchors.fill: parent
+        color: "transparent"
+        
+        Rectangle {
+            id: itemBackground
+            anchors.fill: parent
+            anchors.margins: root.margins
+            color: root.backgroundColor
+            radius: 8
+            border.color: root.taskDone ? "transparent" : (root.darkMode ? "#404040" : "#f0f0f0")
+            border.width: 1
+            opacity: root.taskDone ? 0.7 : 1.0
+
+            scale: itemBackground.hovered ? 1.02 : 1.0
+
+            // Smooth transitions for background properties
+            Behavior on opacity {
+                NumberAnimation { duration: 300 }
+            }
+
+            Behavior on border.color {
+                ColorAnimation { duration: 300 }
+            }
+
+            Behavior on scale {
+                NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
+            }
+        
+        RowLayout {
+            anchors.fill: parent
+            anchors.margins: root.innerMargins
+            spacing: 12
+            
+            // Checkbox
+            Rectangle {
+                id: checkbox
+                Layout.preferredWidth: root.checkboxSize
+                Layout.preferredHeight: root.checkboxSize
+                color: root.taskDone ? root.primaryColor : "transparent"
+                border.color: root.taskDone ? root.primaryColor : (root.darkMode ? "#666666" : "#cccccc")
+                border.width: 2
+                radius: 4
+
+                // Smooth transitions for checkbox state changes
+                Behavior on color {
+                    ColorAnimation { duration: 200 }
+                }
+
+                Behavior on border.color {
+                    ColorAnimation { duration: 200 }
+                }
+
+                Behavior on scale {
+                    NumberAnimation { duration: 100; easing.type: Easing.OutBack }
+                }
+                
+                // Checkmark
+                Text {
+                    anchors.centerIn: parent
+                    text: "✓"
+                    color: "#ffffff"
+                    font.pixelSize: 16
+                    font.weight: Font.Bold
+                    opacity: root.taskDone ? 1.0 : 0.0
+
+                    scale: root.taskDone ? 1.0 : 0.3
+
+                    Behavior on opacity {
+                        NumberAnimation { duration: 200 }
+                    }
+
+                    Behavior on scale {
+                        NumberAnimation { duration: 200; easing.type: Easing.OutBack }
+                    }
+                    
+                }
+                
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        // Add click animation
+                        checkbox.scale = 0.9
+                        scaleResetTimer.restart()
+
+                        //Toggle the task
+                        root.toggleDone()
+                    }
+                    cursorShape: Qt.PointingHandCursor
+                }
+
+                // Timer to reset scale after click
+                Timer {
+                    id: scaleResetTimer
+                    interval: 100
+                    onTriggered: checkbox.scale = 1.0
+                }
+                
+            }
+            
+            // Task text
+            Text {
+                id: taskText
+                Layout.fillWidth: true
+                text: root.taskTitle
+                color: root.taskDone ? root.completedColor : root.textColor
+                font.pixelSize: 16
+                font.strikeout: root.taskDone
+                wrapMode: Text.WordWrap
+
+                // Smooth color transition when task state changes
+                Behavior on color {
+                    ColorAnimation { duration: 300 }
+                }
+
+                // Subtle scale animation on completion
+                scale: root.taskDone ? 0.95 : 1.0
+                Behavior on scale {
+                    NumberAnimation { duration: 200; easing.type: Easing.OutQuad }
+                }
+                
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: root.toggleDone()
+                    cursorShape: Qt.PointingHandCursor
+                }
+            }
+            
+            // Delete button
+            Button {
+                id: deleteButton
+                Layout.preferredWidth: root.deleteButtonSize
+                Layout.preferredHeight: root.deleteButtonSize
+                opacity: itemBackground.hovered ? 1.0 : 0.3
+                scale: deleteButton.pressed ? 0.9 : 1.0
+
+                // Smooth transitions
+                Behavior on opacity {
+                    NumberAnimation { duration: 200 }
+                }
+
+                Behavior on scale {
+                    NumberAnimation { duration: 100; easing.type: Easing.OutQuad }
+                }
+                
+                background: Rectangle {
+                    color: deleteButton.pressed ? "#ff3b30" : "transparent"
+                    radius: 16
+                    Behavior on color {
+                        ColorAnimation { duration: 150 }
+                    }
+                }
+                
+                contentItem: Text {
+                    text: "🗑"
+                    font.pixelSize: 16
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+
+                    rotation: deleteButton.pressed ? 15 : 0
+
+                    Behavior on rotation {
+                        NumberAnimation { duration: 100 }
+                    }
+                }
+                
+                onClicked: {
+                    root.deleteTask()
+                }
+            }
+        }
+        
+        // Hover effect
+        property bool hovered: false
+        
+        HoverHandler {
+            onHoveredChanged: itemBackground.hovered = hovered
+        }
+    }
+}
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/TaskStats.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/components/TaskStats.qml
@@ -0,0 +1,95 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+    height: visible ? 60 : 0
+    visible: totalTasks > 0
+
+    property int totalTasks: 0
+    property int completedTasks: 0
+    property int remainingTasks: 0
+    property bool hasCompleted: false
+
+    property color backgroundColor: "#ffffff"
+    property color textColor: "#333333"
+    property color secondaryTextColor: "#666666"
+    property color primaryColor: "#007aff"
+    property color dangerColor: "#ff3b30"
+    property bool darkMode: false
+
+    signal clearCompleted()
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+
+        Rectangle {
+            anchors.fill: parent
+            color: root.backgroundColor
+            radius: 12
+            border.color: root.darkMode ? "#404040" : "#e0e0e0"
+            border.width: 1
+
+            RowLayout {
+                anchors.fill: parent
+                anchors.margins: 16
+                spacing: 16
+
+                // Statistics text
+                Column {
+                    Layout.fillWidth: true
+                    spacing: 2
+
+                    Text {
+                        text: root.totalTasks === 1 ?
+                              qsTr("%1 task").arg(root.totalTasks) :
+                              qsTr("%1 tasks").arg(root.totalTasks)
+                        color: root.textColor
+                        font.pixelSize: 16
+                        font.weight: Font.Medium
+                    }
+
+                    Text {
+                        text: root.completedTasks > 0 ?
+                              qsTr("%1 completed, %2 remaining").arg(root.completedTasks).arg(root.remainingTasks) :
+                              qsTr("No tasks completed yet")
+                        color: root.secondaryTextColor
+                        font.pixelSize: 14
+                        visible: root.totalTasks > 0
+                    }
+                }
+
+                // Clear completed button
+                Button {
+                    id: clearButton
+                    Layout.preferredHeight: 36
+                    text: qsTr("Clear Completed")
+                    visible: root.hasCompleted
+                    enabled: root.hasCompleted
+
+                    background: Rectangle {
+                        color: clearButton.pressed ?
+                               Qt.darker(root.dangerColor, 1.2) :
+                               (clearButton.hovered ? root.dangerColor : "transparent")
+                        border.color: root.dangerColor
+                        border.width: 1
+                        radius: 8
+                    }
+
+                    contentItem: Text {
+                        text: clearButton.text
+                        color: clearButton.hovered ? "#ffffff" : root.dangerColor
+                        font.pixelSize: 14
+                        font.weight: Font.Medium
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                    }
+
+                    onClicked: root.clearCompleted()
+                }
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/main.cpp
@@ -0,0 +1,22 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQuickStyle>
+
+int main(int argc, char *argv[])
+{
+    QGuiApplication app(argc, argv);
+
+    // Set Qt Quick Controls style to Basic to enable customization
+    QQuickStyle::setStyle("Basic");
+
+    QQmlApplicationEngine engine;
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.loadFromModule("TodoList", "MainView");
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/models/TaskListModel.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/models/TaskListModel.qml
@@ -0,0 +1,89 @@
+import QtQuick
+
+ListModel {
+    id: root
+
+    // Add some sample tasks for testing
+    Component.onCompleted: {
+        addTask("Learn Qt QML")
+        addTask("Build a todo app")
+        addTask("Practice QML components")
+    }
+
+    // Add a new task
+    function addTask(title) {
+        if (title && title.trim().length > 0) {
+            append({
+                "title": title.trim(),
+                "completed": false,
+                "id": generateId()
+            })
+        }
+    }
+
+    // Toggle task completion status
+    function toggleTask(index) {
+        if (index >= 0 && index < count) {
+            setProperty(index, "completed", !get(index).completed)
+        }
+    }
+
+    // Delete a task
+    function deleteTask(index) {
+        if (index >= 0 && index < count) {
+            remove(index)
+        }
+    }
+
+    // Delete task by ID
+    function deleteTaskById(taskId) {
+        for (let i = 0; i < count; i++) {
+            if (get(i).id === taskId) {
+                remove(i)
+                break
+            }
+        }
+    }
+
+    // Clear all completed tasks
+    function clearCompletedTasks() {
+        for (let i = count - 1; i >= 0; i--) {
+            if (get(i).completed) {
+                remove(i)
+            }
+        }
+    }
+
+    // Get statistics
+    function getStats() {
+        let total = count
+        let completed = 0
+
+        for (let i = 0; i < count; i++) {
+            if (get(i).completed) {
+                completed++
+            }
+        }
+
+        return {
+            "total": total,
+            "completed": completed,
+            "remaining": total - completed
+        }
+    }
+
+    // Check if there are any completed tasks
+    function hasCompletedTasks() {
+        for (let i = 0; i < count; i++) {
+            if (get(i).completed) {
+                return true
+            }
+        }
+        return false
+    }
+
+    // Generate a unique ID for tasks
+    function generateId() {
+        return Date.now() + Math.random().toString(36).substr(2, 9)
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/views/MainView.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/15-TodoListAnimations/src/views/MainView.qml
@@ -0,0 +1,239 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ApplicationWindow {
+    id: root
+    width: 400
+    height: 700
+    visible: true
+    title: qsTr("My Tasks")
+
+    // Theme properties
+    property bool darkMode: false
+    property color backgroundColor: darkMode ? "#1e1e1e" : "#f0f2f5"
+    property color primaryColor: "#007aff"
+    property color textColor: darkMode ? "#ffffff" : "#333333"
+    property color cardColor: darkMode ? "#2d2d2d" : "#ffffff"
+    property color completedColor: darkMode ? "#666666" : "#999999"
+
+    // Task model - Using the dedicated TaskListModel
+    TaskListModel {
+        id: taskModel
+    }
+
+    // Background
+    Rectangle {
+        anchors.fill: parent
+        color: root.backgroundColor
+    }
+
+    //The components of the ui
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 20
+        spacing: 20
+
+        // Header
+        AppHeader {
+            id: header
+            Layout.fillWidth: true
+            textColor: root.textColor
+            textSecondary: root.completedColor
+            darkMode: root.darkMode
+            onToggleDarkMode: root.darkMode = !root.darkMode
+        }
+
+        // Add task bar
+        AddTaskBar {
+            id: addTaskBar
+            Layout.fillWidth: true
+            backgroundColor: root.cardColor
+            textColor: root.textColor
+            primaryColor: root.primaryColor
+            darkMode: root.darkMode
+
+            onTaskAdded: function(taskText) {
+                taskModel.addTask(taskText)
+            }
+        }
+
+        // Tasks list
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            color: root.cardColor
+            radius: 12
+            border.width: 1
+            border.color: root.darkMode ? "#404040" : "#e0e0e0"
+
+            ScrollView {
+                anchors.fill: parent
+                anchors.margins: 1
+                clip: true
+
+                ListView {
+                    id: taskListView
+                    model: taskModel
+                    spacing: 8
+                    anchors.margins: 12
+
+
+
+                    // Add animation transitions
+                    add: Transition {
+                        NumberAnimation {
+                            properties: "x"
+                            from: 100; to: 0
+                            duration: 300
+                            easing.type: Easing.OutCubic
+                        }
+                        NumberAnimation {
+                            property: "opacity"
+                            from: 0; to: 1
+                            duration: 300
+                        }
+                    }
+
+                    remove: Transition {
+                        NumberAnimation {
+                            properties: "x"
+                            to: 100
+                            duration: 250
+                            easing.type: Easing.InCubic
+                        }
+                        NumberAnimation {
+                            property: "opacity"
+                            to: 0
+                            duration: 250
+                        }
+                    }
+
+                    displaced: Transition {
+                        NumberAnimation {
+                            properties: "x,y"
+                            duration: 200
+                            easing.type: Easing.OutQuad
+                        }
+                    }
+
+
+
+
+
+                    delegate: TaskItem {
+                        required property int index
+                        required property string title
+                        required property bool completed
+
+                        width: taskListView.width
+                        taskTitle: title
+                        taskDone: completed
+                        backgroundColor: root.cardColor
+                        textColor: root.textColor
+                        completedColor: root.completedColor
+                        primaryColor: root.primaryColor
+                        darkMode: root.darkMode
+
+                        onToggleDone: {
+                            taskModel.toggleTask(index)
+                        }
+
+                        onDeleteTask: {
+                            taskModel.deleteTask(index)
+                        }
+                    }
+
+                    // Empty state
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: parent.width - 40
+                        height: 120
+                        color: "transparent"
+                        visible: taskListView.count === 0
+                        opacity: taskListView.count === 0 ? 1.0 : 0.0
+
+
+                        Behavior on opacity {
+                            NumberAnimation { duration: 400; easing.type: Easing.InOutQuad }
+                        }
+
+                        Column {
+                            anchors.centerIn: parent
+                            spacing: 16
+
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                text: "📝"
+                                font.pixelSize: 48
+                                opacity: 0.3
+
+                                // Subtle floating animation
+                                SequentialAnimation on y {
+                                    running: taskListView.count === 0
+                                    loops: Animation.Infinite
+                                    NumberAnimation { from: 0; to: -5; duration: 1000; easing.type: Easing.InOutSine }
+                                    NumberAnimation { from: -5; to: 0; duration: 1000; easing.type: Easing.InOutSine }
+                                }
+                            }
+
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                text: qsTr("No tasks yet")
+                                color: root.completedColor
+                                font.pixelSize: 18
+                                font.weight: Font.Medium
+
+                                // Gentle opacity breathing animation
+                                SequentialAnimation on opacity {
+                                    running: taskListView.count === 0
+                                    loops: Animation.Infinite
+                                    NumberAnimation { from: 0.7; to: 1.0; duration: 1500; easing.type: Easing.InOutSine }
+                                    NumberAnimation { from: 1.0; to: 0.7; duration: 1500; easing.type: Easing.InOutSine }
+                                }
+                            }
+
+                            Text {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                text: qsTr("Add a task above to get started")
+                                color: root.completedColor
+                                font.pixelSize: 14
+                                horizontalAlignment: Text.AlignHCenter
+
+                                // Gentle opacity breathing animation with slight delay
+                                SequentialAnimation on opacity {
+                                    running: taskListView.count === 0
+                                    loops: Animation.Infinite
+                                    PauseAnimation { duration: 300 } // Small delay for staggered effect
+                                    NumberAnimation { from: 0.6; to: 0.9; duration: 1500; easing.type: Easing.InOutSine }
+                                    NumberAnimation { from: 0.9; to: 0.6; duration: 1500; easing.type: Easing.InOutSine }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+
+        }
+
+        // Task statistics at bottom
+        TaskStats {
+            id: taskStats
+            Layout.fillWidth: true
+            backgroundColor: root.cardColor
+            textColor: root.textColor
+            secondaryTextColor: root.completedColor
+            primaryColor: root.primaryColor
+            darkMode: root.darkMode
+            totalTasks: taskModel.count
+            completedTasks: taskModel.getStats().completed
+            remainingTasks: taskModel.getStats().remaining
+            hasCompleted: taskModel.hasCompletedTasks()
+
+            onClearCompleted: {
+                taskModel.clearCompletedTasks()
+            }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/CMakeLists.txt
@@ -0,0 +1,42 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(2-Transforms 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(app2-Transforms
+    main.cpp
+)
+
+qt_add_qml_module(app2-Transforms
+    URI 2-Transforms
+    VERSION 1.0
+    QML_FILES Main.qml
+    QML_FILES ClickableRect.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(app2-Transforms PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app2-Transforms
+    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(app2-Transforms
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app2-Transforms
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/ClickableRect.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/ClickableRect.qml
@@ -0,0 +1,12 @@
+import QtQuick
+
+Rectangle{
+    id: rootId
+    signal clicked
+    MouseArea{
+        anchors.fill: parent
+        onClicked: function(){
+            rootId.clicked()
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/Main.qml
@@ -0,0 +1,51 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Transforms")
+
+    ClickableRect{
+        id: rect1Id
+        width: 100
+        height: 100
+        x: 50
+        y: 100
+        color: "red"
+        onClicked: function(){
+            //Translation on x
+            x += 20
+        }
+    }
+    ClickableRect{
+        id: rect2Id
+        width: 100
+        height: 100
+        transformOrigin: Item.TopRight
+        x: 250
+        y: 100
+        color: "green"
+        onClicked: function(){
+            // Rotation
+            rotation += 15
+        }
+    }
+    ClickableRect{
+        id: rect3Id
+        width: 100
+        height: 100
+        transformOrigin: Item.BottomLeft
+        x: 450
+        y: 100
+        color: "blue"
+        onClicked: function(){
+            //scaling
+            scale += 0.05
+
+            //rotation
+            rotation += 20
+        }
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/2-Transforms/main.cpp
@@ -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:/2-Transforms/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(3-AnimationsIntro 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(app3-AnimationsIntro
+    main.cpp
+)
+
+qt_add_qml_module(app3-AnimationsIntro
+    URI 3-AnimationsIntro
+    VERSION 1.0
+    QML_FILES Main.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(app3-AnimationsIntro PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app3-AnimationsIntro
+    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(app3-AnimationsIntro
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app3-AnimationsIntro
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/Main.qml
@@ -0,0 +1,55 @@
+import QtQuick
+
+Window {
+    id: rootId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Animations Intro")
+    property bool running: false
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: 50
+            y: 50
+            color: "dodgerblue"
+
+            PropertyAnimation on x {
+                to: 530
+                duration: 2000
+                running: rootId.running
+            }
+
+            NumberAnimation on y {
+                to: 300
+                duration: 2000
+                running: rootId.running
+            }
+
+            RotationAnimation on rotation {
+                to: 600
+                duration: 2000
+                running: rootId.running
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onPressed: function(){
+                rootId.running = true
+            }
+            onReleased: function(){
+                rootId.running = false
+            }
+        }
+
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/3-AnimationsIntro/main.cpp
@@ -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:/3-AnimationsIntro/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(4-AnimationsTargets 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(app4-AnimationsTargets
+    main.cpp
+)
+
+qt_add_qml_module(app4-AnimationsTargets
+    URI 4-AnimationsTargets
+    VERSION 1.0
+    QML_FILES Main.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(app4-AnimationsTargets PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app4-AnimationsTargets
+    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(app4-AnimationsTargets
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app4-AnimationsTargets
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/Main.qml
@@ -0,0 +1,66 @@
+import QtQuick
+
+Window {
+    id: rootId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Animations with targets")
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: 50
+            y: 50
+            color: "dodgerblue"
+
+            PropertyAnimation {
+                id: xAnimationId
+                target: containedRectId
+                property: "x"
+                to: 530
+                duration: 2000
+            }
+
+            NumberAnimation {
+                id: yAnimationId
+                target: containedRectId
+                property: "y"
+                to: 300
+                duration: 2000
+            }
+
+            RotationAnimation {
+                id: rotationAnimationId
+                target: containedRectId
+                property: "rotation"
+                to: 600
+                duration: 2000
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onPressed: function(){
+                //Start the animations
+                xAnimationId.start()
+                yAnimationId.start()
+                rotationAnimationId.start()
+            }
+            onReleased: function(){
+                ///Stop the animations
+                xAnimationId.stop()
+                yAnimationId.stop()
+                rotationAnimationId.stop()
+            }
+        }
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/4-AnimationsTargets/main.cpp
@@ -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:/4-AnimationsTargets/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(5-Behavior 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(app5-Behavior
+    main.cpp
+)
+
+qt_add_qml_module(app5-Behavior
+    URI 5-Behavior
+    VERSION 1.0
+    QML_FILES Main.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(app5-Behavior PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app5-Behavior
+    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(app5-Behavior
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app5-Behavior
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/Main.qml
@@ -0,0 +1,38 @@
+import QtQuick
+
+Window {
+    id: rooId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Behavior")
+
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: 50
+            y: 50
+            color: "dodgerblue"
+
+            Behavior on x{
+                NumberAnimation{
+                    duration: 1000
+                }
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: (mouse) => { //Arrow function
+                   containedRectId.x = mouse.x
+             }
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/5-Behavior/main.cpp
@@ -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:/5-Behavior/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(6-SmoothedAnimation 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(app6-SmoothedAnimation
+    main.cpp
+)
+
+qt_add_qml_module(app6-SmoothedAnimation
+    URI 6-SmoothedAnimation
+    VERSION 1.0
+    QML_FILES Main.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(app6-SmoothedAnimation PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app6-SmoothedAnimation
+    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(app6-SmoothedAnimation
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app6-SmoothedAnimation
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/Main.qml
@@ -0,0 +1,71 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("SmoothedAnimation")
+
+    /*
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: 50
+            y: 50
+            color: "dodgerblue"
+
+
+            SmoothedAnimation{
+                id: smoothedAnimationId
+                target: containedRectId
+                property: "x"
+                duration: 2000
+            }
+        }
+    }
+
+    MouseArea{
+        anchors.fill: parent
+        onClicked: function(mouse){
+            smoothedAnimationId.from = containedRectId.x
+            smoothedAnimationId.to = mouse.x
+            smoothedAnimationId.start()
+        }
+    }
+    */
+
+    Rectangle{
+        anchors.fill: parent
+        color: "lightgray"
+
+        Rectangle {
+            //The rectangle doing the tracking
+            width: 60; height: 60
+            x: rect1.x - 5; y: rect1.y - 5
+            color: "green"
+
+            Behavior on x { SmoothedAnimation { velocity: 200 } }
+            Behavior on y { SmoothedAnimation { velocity: 200 } }
+        }
+
+        Rectangle {
+            //The rectangle being tracked.
+            id: rect1
+            width: 50; height: 50
+            color: "red"
+        }
+
+        focus: true
+        Keys.onRightPressed: rect1.x = rect1.x + 100
+        Keys.onLeftPressed: rect1.x = rect1.x - 100
+        Keys.onUpPressed: rect1.y = rect1.y - 100
+        Keys.onDownPressed: rect1.y = rect1.y + 100
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/6-SmoothedAnimation/main.cpp
@@ -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:/6-SmoothedAnimation/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(7-SpringAnimation 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(app7-SpringAnimation
+    main.cpp
+)
+
+qt_add_qml_module(app7-SpringAnimation
+    URI 7-SpringAnimation
+    VERSION 1.0
+    QML_FILES Main.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(app7-SpringAnimation PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app7-SpringAnimation
+    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(app7-SpringAnimation
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app7-SpringAnimation
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/Main.qml
@@ -0,0 +1,68 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("SpringAnimation")
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: 50
+            y: 50
+            color: "dodgerblue"
+
+
+            /*
+            Behavior on x{
+                SpringAnimation{
+                    spring: 5
+                    damping: 0.2
+                    duration: 3000
+                }
+            }
+
+            Behavior on y{
+                SpringAnimation{
+                    spring: 5
+                    damping: 0.2
+                    duration: 3000
+                }
+            }
+            */
+
+
+            SpringAnimation{
+                id: springAnimationId
+                target: containedRectId
+                property: "x"
+                spring: 5
+                damping: 0.2
+                duration: 3000
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(mouse){
+                /*
+                containedRectId.x = mouse.x
+                containedRectId.y = mouse.y
+                */
+
+                springAnimationId.stop()
+                springAnimationId.from = containedRectId.x
+                springAnimationId.to = mouse.x
+                springAnimationId.start()
+            }
+        }
+    }
+
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/7-SpringAnimation/main.cpp
@@ -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:/7-SpringAnimation/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(8-PathAnimation 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(app8-PathAnimation
+    main.cpp
+)
+
+qt_add_qml_module(app8-PathAnimation
+    URI 8-PathAnimation
+    VERSION 1.0
+    QML_FILES Main.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(app8-PathAnimation PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app8-PathAnimation
+    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(app8-PathAnimation
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app8-PathAnimation
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/Main.qml
@@ -0,0 +1,89 @@
+import QtQuick
+
+Window {
+    id: rootId
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("PathAnimation")
+
+
+    Rectangle{
+        id: containerRectId
+        anchors.fill: parent
+        color: "beige"
+
+
+        Rectangle{
+            id: containedRectId
+            width: 100
+            height: 100
+            x: rootId.width/2 - 50
+            y: rootId.height - 50 -50
+            color: "dodgerblue"
+            radius: 80
+
+            PathAnimation{
+                id: pathAnimationId
+                target: containedRectId
+                duration: 1000
+                anchorPoint: Qt.point(50,50)
+                path: Path {
+                    //Bottom : Starting Point
+                    startX: rootId.width/2
+                    startY: rootId.height - 50
+
+                    // Towards Left
+                    PathCubic {
+                        x: 50
+                        y: rootId.height/2
+
+                        control1X: rootId.width/2 - rootId.width/8
+                        control1Y: rootId.height
+                        control2X: 0
+                        control2Y: rootId.height/2 + rootId.height/8
+
+                    }
+
+                    //Towards Top: Q2
+                    PathCubic {
+                        x: rootId.width/2
+                        y: 50
+                        control1X: 0
+                        control1Y: (rootId.height/2 - rootId.height/8)
+                        control2X : (rootId.width/2 - rootId.width/8)
+                        control2Y:  0
+                    }
+
+                    //Towards Right: Q3
+                    PathCubic {
+                        x: rootId.width - 50
+                        y: rootId.height/2
+                        control1X: rootId.width/2 + rootId.width/8
+                        control1Y: 0
+                        control2X: rootId.width
+                        control2Y: rootId.height/2 - rootId.height/8
+                    }
+
+                    //Towards bottom: Q4
+                    PathCubic {
+                        x: rootId.width/2
+                        y: rootId.height - 50
+                        control1X: rootId.width
+                        control1Y: rootId.height/2 + rootId.height/8
+                        control2X: rootId.width/2 + rootId.width/8
+                        control2Y: rootId.height
+                    }
+                }
+            }
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: function(mouse){
+                pathAnimationId.start()
+            }
+        }
+    }
+    
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/8-PathAnimation/main.cpp
@@ -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:/8-PathAnimation/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/CMakeLists.txt
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/CMakeLists.txt
@@ -0,0 +1,41 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(9-ColorAnimation 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(app9-ColorAnimation
+    main.cpp
+)
+
+qt_add_qml_module(app9-ColorAnimation
+    URI 9-ColorAnimation
+    VERSION 1.0
+    QML_FILES Main.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(app9-ColorAnimation PROPERTIES
+#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.app9-ColorAnimation
+    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(app9-ColorAnimation
+    PRIVATE Qt6::Quick
+)
+
+include(GNUInstallDirs)
+install(TARGETS app9-ColorAnimation
+    BUNDLE DESTINATION .
+    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/Main.qml
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/Main.qml
@@ -0,0 +1,32 @@
+import QtQuick
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("ColorAnimation")
+
+
+    Rectangle{
+        id: rectId
+        width: 100
+        height: 100
+        color: "red"
+
+        ColorAnimation{
+            id: colorAnimationId
+            target: rectId
+            property: "color"
+            from: rectId.color
+            to: "blue"
+            duration: 1000
+        }
+    }
+
+    MouseArea{
+        anchors.fill: parent
+        onClicked: function(){
+            colorAnimationId.start()
+        }
+    }
+}
--- a/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/main.cpp
+++ b/Qt6QMLBeginnersCode/12-TransformsTransitionsAnimations/9-ColorAnimation/main.cpp
@@ -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:/9-ColorAnimation/Main.qml"_qs);
+    QObject::connect(
+        &engine,
+        &QQmlApplicationEngine::objectCreationFailed,
+        &app,
+        []() { QCoreApplication::exit(-1); },
+        Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}