qt android 插件开发,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)

}

}

}

}

}

效果截图：