其他分享
首页 > 其他分享> > qml 定时器以及几种简单动画

qml 定时器以及几种简单动画

作者:互联网

Timer

定时器,以指定的时间间隔触发处理程序。

属性

interval: int

设置触发器之间的时间间隔(以毫秒为单位)。默认间隔为1000毫秒。

repeat: bool

定时器是否重复触发,值为true,则按照时间间隔重复触发;为false,则在指定时间间隔触发一次后就停止(即running被置位false)。

running: bool

为true时,启动定时器,否则停止定时器。默认为false。

triggeredOnStart: bool

启动定时器时,通常是在指定时间间隔之后才会第一次触发,有时候希望能在启动定时器时立即触发。如果值为true,则在定时器启动时立即触发处理程序,并随后按照指定是时间间隔触发。

注意:如果repeat设置为false,则定时器将触发两次,一次是启动,然后时间间隔后一次。

信号

triggered()

定时器触发的信号。

注意对应的处理程序是onTriggered。

方法

restart()

重新启动定时器。

如果定时器未运行,则启动该定时器;如果定时器正则运行,则会先停止定时器,然后马上又启动。

   Item {

        visible: true

        width: 500

        height: 300

        Timer {

            id:timer

            interval: 500  //设置定时器定时时间为500ms,默认1000ms

            running: true  //是否开启定时,默认是false,当为true的时候,进入此界面就开始定时

            repeat: true   //是否重复定时,默认为false

            onTriggered: time.text = Date().toString() //定时触发槽,定时完成一次就进入一次

        }

 

        Text {

            id: time

            font.pixelSize: 20

            verticalAlignment: Text.AlignVCenter

            anchors.top: parent.top

            anchors.horizontalCenter: parent.horizontalCenter

            anchors.topMargin: 200

        }

        MouseArea{

            anchors.fill: parent

            onClicked: timer.stop(); //开启定时器

            onDoubleClicked: timer.start();

        }

    }

Animation

在qml中, Animation是所有动画类的基类,其中有一个属性应该注意,那就是alwaysRunToEnd.它默认为false,如果设置了true,那么无论你是调用了Animation的stop()或者设置running属性为false,动画都会从头到尾的执行完毕。

一些常⽤的动画:

PropertyAnimation(属性动画)- 使⽤属性值改变播放的动画

Rectangle{
        id: rootItem
        width: 360
        height: 240
        color: "#EEEEEE"
 
        Rectangle{
            id: rect
            width: 50
            height: 150
            anchors.centerIn: parent
            color: "blue"
 
            PropertyAnimation{
                id: animation
                target: rect
                property:  "width"
                //  改变多个属性可以用properties来设置,不过to属性设置的值会将应用你设置的多个属性,因此,用这种方法时,最后设置同一类的属性。比如高度和宽度
                //  propeties: "width, height"  //属性名之间用英文逗号个离开
                //  针对单一目标不仅如此,同时可以通过targets设置同时对多个目标的操作:targets: [rectA, rectB]
                to: 220
                duration: 2000
            }
 
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    animation.running = true
                }
            }
            //要同时改变多个属性,但是又不是同一类的
            //Animation on <property>将一个PropertyAnimation与一个属性关联起来
                        MouseArea{
                            anchors.fill: parent
                            id: mouseArea
                        }
 
                        PropertyAnimation on width{
                            target: rect
                            to: 150
                            duration: 1000
                            running: mouseArea.pressed  //如果不设置此属性,那么在Item加载完后就会立即执行
                        }
        }

}

 

   // 增加信号控制属性动画
/*
    Rectangle{
    id: rootItem
    width: 360
    height: 240
    color: "#EEEEEE"
 
    Rectangle{
        id: rect
        width: 50
        height: 150
        anchors.centerIn: parent
        color: "blue"
 
        property var animation
        PropertyAnimation{
            id: toSquare
            target: rect
            property: "width"
            to: 150
            duration: 4000
            onStarted: {
                rect.animation = toSquare
                rect.color = "red"
            }
 
            onStopped: {
                rect.color = "blue"
            }
        }
 
        PropertyAnimation{
            id: toRect
            target: rect
            properties: "width"
            to: 50
            duration: 4000
            onStarted: {
                rect.animation = toRect
                rect.color = "red"
            }
 
            onStopped: {
                rect.color = "blue"
            }
        }
 
        MouseArea{
            anchors.fill: parent
            onClicked: {
                if(rect.animation == toRect ||
                   rect.animation == undefined)
                {
                    toSquare.start()
                }
                else
                    toRect.start()
            }
        }
    }
}

*/

NumberAnimation(数字动画)- 使⽤数字改变播放的动画

    Rectangle {
        id:win
        visible: true
        width: 600
        height: 300
        Rectangle{
            y:win.height/2
            id:source
            width: 100
            height: 100
            color: "red"
        }
        NumberAnimation {
            id:xChange
            target: source
            to:win.width-source.width
            property: "x"
            duration: 5000
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            id:rotationChange
            target: source
            to:360*5
            property: "rotation"
            duration: 5000
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            id:radiusChange
            target: source
            to:100
            property: "radius"
            duration: 5000
            easing.type: Easing.InOutQuad
        }
        MouseArea{
            anchors.fill: parent
            onClicked:{
                xChange.start()
                rotationChange.start()
                radiusChange.start()
            }
 

      

ColorAnimation(颜⾊动画)- 使⽤颜⾊改变播放的动画

    //颜色动画渐变
    Item {
            id: container
            width:200
            height:200
 
            Rectangle {
                 id: gradientRect;
                 width:80
                 height: 80
                 gradient: Gradient {
                     GradientStop { position: 0; color: "red" }
                     GradientStop { position: 1; color: "steelblue" }
                 }
                 visible: false
                 layer.enabled: true;
                 layer.smooth: true
             }
 
            Text {
                id: text
                anchors.centerIn: parent
                color: "pink"
                text: "Hello world!"
                font.pixelSize: 32
                layer.samplerName: "maskSource"
                layer.enabled: true
                     layer.effect: ShaderEffect {
                         property var colorSource: gradientRect;
                         fragmentShader: "
                                   uniform lowp sampler2D colorSource;
                                   uniform lowp sampler2D maskSource;
                                   uniform lowp float qt_Opacity;
                                   varying highp vec2 qt_TexCoord0;
                                   void main() {
                                       gl_FragColor =
                                           texture2D(colorSource, qt_TexCoord0)
                                           * texture2D(maskSource, qt_TexCoord0).a
                                           * qt_Opacity;
                                   }
                               "
                     }
 
 
 
                SequentialAnimation on font.letterSpacing {
                    loops: Animation.Infinite;
                    NumberAnimation { from: 0; to: 50; easing.type: Easing.InQuad; duration: 3000 }
                    ScriptAction {
                        script: {
                            container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
                            container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
                        }
                    }
                }
 
                SequentialAnimation on opacity {
                    loops: Animation.Infinite;
                    NumberAnimation { from: 1; to: 0; duration: 2600 }
                    PauseAnimation { duration: 400 }
                }
            }

        }

RotationAnimation(旋转动画)- 使⽤旋转改变播放的动画

Rectangle
    {
        id:colorChanged
        color: "green"
        width: 200
        height: 200
        radius: 30
        anchors.centerIn: parent
       // transformOrigin: item.right
 
    }
    RotationAnimation
    {
        id:rotationAnimation
        target: colorChanged
        to:900
        direction: rotationAnimation.Clockwise
        duration: 3000
 
    }
    MouseArea
    {
        anchors.fill: parent
        onClicked: rotationAnimation.start()

    }

除了上⾯这些基本和通常使⽤的动画元素,QtQuick还提供了⼀些特殊场景下 使⽤的动画:

PauseAnimation(停⽌动画)- 运⾏暂停⼀个动画

SequentialAnimation(顺序动画)- 允许动画有序播放

ParallelAnimation(并⾏动画)- 允许动画同时播放

AnchorAnimation(锚定动画)- 使⽤锚定改变播放的动画

parentAnimation(⽗元素动画)- 使⽤⽗对象改变播放的动画 SmotthedAnimation(平滑动画)- 跟踪⼀个平滑值播放的动画 SpringAnimation(弹簧动画)- 跟踪⼀个弹簧变换的值播放的动画 PathAnimation(路径动画)- 跟踪⼀个元素对象的路径的动画 Vector3dAnimation(3D容器动画)- 使⽤QVector3d值改变播放的动画PropertyAction(属性动作)- 在播放动画时改变属性

ScriptAction(脚本动作)- 在播放动画时运⾏脚本

 

标签:动画,定时器,height,width,qml,id,rect
来源: https://www.cnblogs.com/lllion/p/16325792.html