【QML学习】简单动画

功能：

点击窗口区域，图片向X方向旋转滚动且逐渐消失。

• 效果演示
  
• 代码如下

import QtQuick

Image{
    id:root
    source: "../Image/background.jpg"
    property int padding: 40
    property bool running:false

    Image{
        id:cf
        source:"../Image/cf.png"
        x:root.padding
        y:(root.height-height)/2

        //X方向移动  PropertyAnimation可替换为NumberAnimation
        PropertyAnimation on x{
            to:root.width-cf.width-root.padding
            duration: 3000
            running:root.running
        }
        //旋转 PropertyAnimation可替换为RotationAnimation/RotationAnimator
        PropertyAnimation on rotation {
            to:360
            duration: 3000
            running: root.running
        }
        //透明度
        OpacityAnimator on opacity {
            to:0
            duration:3000
            running:root.running
        }
    }

       //透明度防止Image外面时增加target属性
//    OpacityAnimator on opacity {
//        target:cf
//        to:0
//        duration:3000
//        running:root.running
//    }

    MouseArea{
        anchors.fill: parent
        onClicked:root.running = true
    }
}