[游戏开发] QT QUICK APPLICATION 制作GUI动画

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> QT QUICK APPLICATION 制作GUI动画 -> 正文阅读

[游戏开发]QT QUICK APPLICATION 制作GUI动画

效果：

1，创建QT QUICK APPLICATION ,添加元素RECT,TEXT,界面如下：

?qml 代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("Hello World")
    
    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648
        height: 480
        color: "#519809"
    }
    
    Text {
        id: element
        x: 232
        y: 206
        color: "#ffffff"
        text: qsTr("你好 CSDN")
        font.pixelSize: 32
    }
    
    
    
}

2，在Rectangel中添加颜色动画。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("Hello World")
    
    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648
        height: 480
        color: "#519809"
//动画代码
    SequentialAnimation   on color
    {

        ColorAnimation {
           // from: "white"
            to: "yellow"
            duration: 1000
        }

        ColorAnimation {
           // from: "white"
            to: "red"
            duration: 1000
        }

        ColorAnimation {
            //from: "white"
            to: "blue"
            duration: 1000
        }
        loops:Animation.Infinite;
    }
//----------------
    }

    Text {
        id: element
        x: 232
        y: 206
        color: "#ffffff"
        text: qsTr("你好 CSDN")
        font.pixelSize: 32
    }



}

        height: 480
        color: "#519809"
      //-------------以下为颜色动画代码
        SequentialAnimation on color
       {
            ColorAnimation{to:"yellow";duration:1000}
            ColorAnimation{to:"red"; duration:1000}
            ColorAnimation{to:"blue";duration100  }
             
            loops:Animation.Infinite;
       }
      //---------------
    }
    
    Text {
        id: element
        x: 232
        y: 206
        color: "#ffffff"
        text: qsTr("你好 CSDN")
        font.pixelSize: 32
    }
    
    
    
}

3,举一反三，添加按钮的透明，旋转动画。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    color: "#ffffff"
    title: qsTr("Hello World")

    Rectangle {
        id: rectangle
        x: -8
        y: 0
        width: 648
        height: 480
        color: "#519809"
  SequentialAnimation   on color
    {

        ColorAnimation {
           // from: "white"
            to: "yellow"
            duration: 1000
        }

        ColorAnimation {
           // from: "white"
            to: "red"
            duration: 1000
        }

        ColorAnimation {
            //from: "white"
            to: "blue"
            duration: 1000
        }
        loops:Animation.Infinite;
    }
    }

    Text {
        id: element
        x: 232
        y: 206
        color: "#ffffff"
        text: qsTr("你好 CSDN")
        font.family: "Arial"
        font.pixelSize: 32

        SequentialAnimation on opacity
        {
          NumberAnimation{to:0;duration:500}
          NumberAnimation{to:1;duration:500}
          loops:Animation.Infinite;
        }
        NumberAnimation on rotation
        {
            from:0;
            to:360;
            duration: 2000;
            loops:Animation.Infinite;
        }
    }



}