首页 > 其他分享 >Qml中使用动画Animation

Qml中使用动画Animation

时间:2023-01-30 21:56:43浏览次数:55  
标签:动画 target Animation Qml 100 PropertyAnimation rect

Animation是Qml中所有动画类的基类。

Qml中动画的分类

  • PropertyAnimation:改变控件的属性来产生动画。
  • NumberAnimation:专门改变数字类型的动画,效率优于PropertyAnimation。
  • ColorAnimation:专门改变颜色的动画,效率优于PropertyAnimation。
  • RotationAnimation:专门旋转的动画,效率优于PropertyAnimation。
  • PathAnimation:沿给定路径的动画。
  • SpringAnimation:类似弹簧运动的动画。
  • SequentialAnimation:一些列组合动画。

使用方式1-指定动画的target

import QtQuick 2.0

 

Item {

    anchors.fill: parent

    

    Rectangle{

        id:rect

        y:100

        width: 100

        height: 100

        color: "lightgreen"

    }

    

    //属性动画关联指定控件,就可以实现动画效果

    PropertyAnimation {

        //指定对象

        target: rect

        //指定属性

        property: "x"

        running: true

        from: 0

        to:400

        duration:2000

        loops: Animation.Infinite

    }

}

使用方式2-作为信号,也需要指定target

import QtQuick 2.0

 

Item {

    anchors.fill: parent

 

    Rectangle{

        id:rect

        y:100

        width: 100

        height: 100

        radius: 50

        color: "lightgreen"

        visible: false

 

        onVisibleChanged: PropertyAnimation{

            target: rect

            properties: "x"

            from:0

            to:400

            loops: Animation.Infinite

            running: true

        }

    }

 

    Component.onCompleted: {

        rect.visible=true

    }

}

使用方法3-在控件中Animation on <property>来实现

import QtQuick 2.0

 

Item {

    anchors.fill: parent

    

    Rectangle{

        id:rect

        y:100

        width: 100

        height: 100

        radius: 50

        color: "lightgreen"

        

        PropertyAnimation on x{

            from: 0

            to:400

            duration: 3000

            loops: Animation.Infinite

        }

    }

}

方式3更为简洁,无需指定target和property,但该方式的running默认为true,会自动执行。

注意点

  • 其它的Animation使用方式和PropertyAnimation类似,但可以通过trandformOrigin(Item属性)来设置动画的中心点。
  • easing可以设置动画过渡的类型

https://blog.csdn.net/quietbxj/article/details/108285418

 

https://blog.csdn.net/gongjianbo1992/article/details/102135779

4.参考:

QML Book:http://qmlbook.github.io/ch05-fluid/fluid.html

文档:https://doc.qt.io/qt-5/qtquick-statesanimations-topic.html

文档:https://doc.qt.io/qt-5/qtquick-statesanimations-animations.html

 

标签:动画,target,Animation,Qml,100,PropertyAnimation,rect
From: https://www.cnblogs.com/im18620660608/p/17077337.html

相关文章