目錄

?

?

官方解析

博主例子

---

?

官方解析

RotationAnimation是一個屬性動畫，這個屬性控制圖片的旋轉。
默認情況下，他在給定的數值方向上旋轉，比如從0度順時針旋轉到240度，也可以逆時針旋轉比如從240度旋轉到0度。通過direction屬性來控制方向。
下面舉個例子

import QtQuick 2.0Item {width: 300; height: 300Rectangle {id: rectwidth: 150; height: 100; anchors.centerIn: parentcolor: "red"antialiasing: truestates: State {name: "rotated"PropertyChanges { target: rect; rotation: 180 }}transitions: Transition {RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }}}MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }}

注意：默認情況下旋轉是按照Item.Center。可以通過PropertyAction去設置其旋轉中心。

?

博主例子

下面的例子，有2個，第一個是把上面的官方例子，跑起來，第二個是做一個旋轉圖片的效果！

程序運行截圖如下：

程序結構如下：

源碼如下：

main.cpp

#include<QApplication> #include<QQuickView> #include<QColor> #include<QQmlContext> int main(int argc,char* argv[]) {QApplication app(argc,argv);QQuickView viwer;viwer.setSource(QUrl("qrc:/main.qml"));//viwer.setSource(QUrl("qrc:/test.qml"));viwer.show();return app.exec(); }

main.qml

import QtQuick 2.7 import QtQuick.Controls 1.2Rectangle{id:waitingRecvisible:trueanchors.fill: parentComponent.onCompleted: {animation.start()}Image{id:rotationanchors.centerIn: parentsource:"img/qq.png"RotationAnimation on rotation {id: animationduration: 1000loops: Animation.Infinitefrom: 0to: 360}} }

test.qml

import QtQuick 2.0Item {width: 300; height: 300Rectangle {id: rectwidth: 150; height: 100; anchors.centerIn: parentcolor: "red"antialiasing: truestates: State {name: "rotated"PropertyChanges { target: rect; rotation: 180 }}transitions: Transition {RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }}}MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" } }

?

?

總結

以上是生活随笔為你收集整理的Qt文档阅读笔记-QML RotationAnimation官方解析及实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。