QML transform与rotation的对比Demo

最近做了一个QML中transform与rotation的效果对比，分享给大家。

效果如图：

代码如下：

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id:mainRoot
    visible: true
    width: 800
    height: 400
    Rectangle {
        anchors.fill: parent
        color:"yellow"
        Text {
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("Click rotate.(left is transform, right is rotation)")
        }
        Rectangle {
            id:line1
            x:0
            y:200
            width:200
            height: 1
            transform: Rotation{
                origin.x:0
                origin.y:0
                angle: 45
            }
            Behavior on width {
                NumberAnimation{
                    duration: 500
                }
            }
            color:"blue"
        }
        Rectangle {
            id:line2
            x:400
            y:200
            width:200
            height: 1
            rotation: 45
            Behavior on width {
                NumberAnimation{
                    duration: 500
                }
            }
            color:"red"
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                line1.width = line1.width == 200 ? 0 :200
                line2.width = line2.width == 200 ? 0 :200
            }
        }
    }
}

这样，我们就能利用transform做出更炫酷的效果咯~