qt android 開發之炫酷控件的製做

手機應用開發，就是吸引用戶，要吸引用戶，確定離不開用戶體驗！此次給你們分享一個自做的炫酷qml控件：fanControler
這個控件目前有點bug，不過整體效果仍是很讚的，經過滑動劃片來控制風扇的轉動速度！
控件源碼：
FansControler.qml

import QtQuick 2.0
import QtQuick 2.4

Rectangle {
    property int progress:50
    color: "#00000000"
    Image {
        id: fanFrame
        source: "qrc:/image/fanFrame.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }
    Image {
        id: fanFrame1
        source: "qrc:/image/fanFrame1.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        rotation: 0

        RotationAnimator {
            id:fanAnimator
            target: fanFrame1;
            from: 360;
            to: 0;
            duration: 3000-2000*progress/100
            running: progress!=0
            loops: Animation.Infinite
        }
    }
    onProgressChanged: {

        fanAnimator.running=false
        fanAnimator.duration=3000-2000*progress/100
        fanAnimator.running=true
        if(progress===0){
            fanAnimator.stop()
            fanAnimator.complete()
        }
    }


    Image {
        id: fanSlider
        source: "qrc:/image/fanSlider.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        transform: Rotation { origin.x: fanSlider.width/2; origin.y: fanSlider.width/2; axis { x: 0; y: 0; z: 1 } angle: -(180*progress/100) }
    }
    MouseArea{
        anchors.fill: parent
        id:ma
        onPressed: {
            if(ma.mouseX>=ma.width/2){
                if(ma.mouseY>=ma.width/2){
                    var angle=Math.atan((ma.mouseX-ma.width/2)/(ma.mouseY-ma.width/2))
                    var angle360=360*angle/(2*Math.PI)
//                    console.log(angle360)
                    progress=50-Math.round(angle360*100/180)
                }else{
                    var angle=Math.PI/2+Math.atan((ma.mouseX-ma.width/2)/(ma.width/2-ma.mouseY))

                    var angle360=360*angle/(2*Math.PI)
//                    console.log(angle360)
                    progress=Math.round(angle360*100/180)
                }
            }
        }
        onPositionChanged: {
            if(ma.mouseX>=ma.width/2){
                if(ma.mouseY>=ma.width/2){
                    var angle=Math.atan((ma.mouseY-ma.width/2)/(ma.mouseX-ma.width/2))
                    var angle360=360*angle/(2*Math.PI)
//                    console.log(angle360)
                    progress=50-Math.round(angle360*100/180)
                }else{
                    var angle=Math.PI/2+Math.atan((ma.width/2-ma.mouseY)/(ma.mouseX-ma.width/2))
                    var angle360=360*angle/(2*Math.PI)
//                    console.log(angle360)
                    progress=Math.round(angle360*100/180)
                }
            }
        }
    }

}

效果截圖：