devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

qtqml中PropertyAnimation的几种用法_qpropertyanimation用法

作者：羊村懒王 | 2024-02-14 20:20:29

赞

踩

qpropertyanimation用法

qml文章 qt qml中PropertyAnimation的几种用法

动画应用场景有下面几种：

首先假设一个Rectangle，动画是要改变它的x和y值

1，Rectangle一旦被创建，就要移动到一个特定的位置

2，动画只有在某一个特定的外部行为触发时候才会被触发，例如，鼠标单击某一个控件时候，产生动画，使目标移动到指定的位置

3，只有在某一个特定的信号后才触发

4，做为一个独立的动画，虽然没有绑定rectangle的运动，但是可以在脚本中加载，开始和停止

5，只有在状态改变时候才会触发

6，只有在某一个属性改变时候才触发，无论这个属性是通过什么样的方法来改变的

7，在一个特定的信号处理器中创建，当接收到对应的信号时候就触发，类似于3

 

下面分别用代码来看几种实现方法：

【1】首先是对第一种场景

 

  1.   Rectangle{
  2.         color:"red"
  3.         width:360
  4.         height:50
  5.  
  6.         PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }
  7.         PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }
  8.     }

 

Rectangle一旦被创建，就立刻从（0，0）坐标移动到（50，250），在一秒时间内

【2】第二种场景代码，行为动画，在某一个属性值发生变化时候触发

 

  1.     Rectangle{
  2.         color:"red"
  3.         width:360
  4.         height:50
  5.         id:rect
  6.         Behavior on x {
  7.             PropertyAnimation{ duration : 1000 }
  8.         }
  9.  
  10.         Behavior on y {
  11.             PropertyAnimation{ duration : 1000 }
  12.         }
  13.  
  14.  
  15.     }
  16.  
  17.     MouseArea{
  18.         anchors.fill: parent
  19.         onClicked:{
  20.             rect.x=mouse.x;
  21.             rect.y=mouse.y;
  22.         }
  23.     }

这段代码实现了，在点击了屏幕上的一点后，rect会在一秒的时间内触发动画，到达鼠标所点击的位置，因为在onClicked里面，我们修改了rect的x和y值。

 

 

【3】在信号处理器中触发动画

 

  1.    Rectangle{
  2.         color:"red"
  3.         width:360
  4.         height:50
  5.         id:rect
  6.  
  7.         MouseArea{
  8.             anchors.fill: parent
  9.             onClicked:
  10.  
  11.                 PropertyAnimation{
  12.                     target:rect ;  properties:"y"
  13.                     to:250
  14.                     duration:1000
  15.                 }
  16.  
  17.         }
  18.     }

当点击rect的时候，就会触发动画，使rect的y从0运动到250

 

 

【4】动画作为一个独立的动画，可以像创建普通的QML对象一样创建，而不需要绑定特定的对象和属性。

 

  1.  Rectangle{
  2.             color:"red"
  3.             width:360
  4.             height:50
  5.             id:rect
  6.  
  7.             PropertyAnimation{
  8.                 id:animation
  9.                 target:rect
  10.                 properties: "width"
  11.                 duration: 1000
  12.  
  13.             }
  14.  
  15.             MouseArea{
  16.                 anchors.fill: parent
  17.                 onClicked: {
  18.                     animation.to=50
  19.                     animation.running=true;
  20.                 }
  21.             }
  22.  
  23.  
  24.         }

 

一个独立的动画对象默认是没有运行的，必须使用running属性，或者start() stop（）来运行它。

 

【5】切换，切换用来设置当状态发生改变时候，需要创建一个切换，Transition对象。然后把它添加到对象的transition属性下面，代码

 

 

  1.  Rectangle{
  2.         Rectangle{
  3.             color:"gray"
  4.             y:100
  5.             width:360
  6.             height:80
  7.             id:rect1
  8.         }
  9.     
  10.         //切换状态
  11.         Rectangle{
  12.             color:"steelblue"
  13.             width:360
  14.             height:80
  15.             id:rect
  16.     
  17.             MouseArea{
  18.                 anchors.fill: parent
  19.                 onClicked: {
  20.                     console.log("dddd")
  21.                     rect.state="move"
  22.                     rect1.height=50
  23.                     rect1.state="move"
  24.                 }
  25.             }
  26.     
  27.                 states:[
  28.                     State{
  29.                     name:"move"
  30.                     PropertyChanges{
  31.                         target:rect
  32.                         y:250
  33.                     }
  34.                     PropertyChanges{
  35.                         target:rect1
  36.                         y:330
  37.                     }
  38.                 }
  39.     
  40.                 ]
  41.     
  42.                 transitions: [
  43.                     Transition {
  44.                         PropertyAnimation{
  45.                             properties: "y"
  46.                             duration:5000
  47.                         }
  48.                     }
  49.                 ]
  50.     
  51.         }
  52.     }

当点击rect的时候，rect和rect1的状态切换到move状态，move状态中的两个PropertyChanges对象定义了rect和rect1的属性改变值，这时候Transition会自动被执行，Transition里面的PropertyAnimation对象会自动将rect和rect1的属性值y切换到对应的值，这里并没有设置from和to值，在状态开始和结束的时候已经设置了他们的值。另外propertyAnimation并不需要指定target属性，这样任何对象的y值在状态切换时候都会使用这个动画，不过也可以指定一个target来使用这个动画，另外在Transition里面的东辉会并行执行，如果要串行执行，可以使用SequentiaAnimation.这个代码也可以这样来写：

 

 

 

  1. Rectangle{
  2.         Rectangle{
  3.             color:"gray"
  4.             y:100
  5.             width:360
  6.             height:80
  7.             id:rect1
  8.         }
  9.  
  10.         //切换状态
  11.         Rectangle{
  12.             color:"steelblue"
  13.             width:360
  14.             height:80
  15.             id:rect
  16.  
  17.             MouseArea{
  18.                 anchors.fill: parent
  19.                 onClicked: {
  20.                     console.log("dddd")
  21.                     rect.state="move"
  22.                     rect1.height=50
  23.                     rect1.state="move"
  24.                 }
  25.             }
  26.  
  27.                 states:[
  28.                     State{
  29.                     name:"move"
  30.                 }
  31.  
  32.                 ]
  33.  
  34.                 transitions: [
  35.                     Transition {
  36.                         PropertyAnimation{
  37.                             target:rect
  38.                             from:0
  39.                             to:250
  40.                             properties: "y"
  41.                             duration:5000
  42.                         }
  43.  
  44.                         PropertyAnimation{
  45.                             target:rect1
  46.                             properties: "y"
  47.                             from:100
  48.                             to:330
  49.                             duration:2000
  50.                         }
  51.                     }
  52.                 ]
  53.  
  54.         }
  55.     }

[6]属性动画元素

 

PropertyAnimation元素是用来为属性提供动画最基本动画元素，他可以为real ,int ,color,rect,point,sized,vector3d来提供动画设置。它可以被NumberAnimation,ColorAnimation,RotationAnimation,Vector3dAnimation等继承，他们分别提供了更高效的属性动画实现方式。并且任何基于PropertyAnimation的对象都可以设置easing属性来动画中使用的缓和曲线。

例如：

 

  1.  Rectangle{
  2.             color:"gray"
  3.             y:100
  4.             width:360
  5.             height:80
  6.             id:rect1
  7.  
  8.             ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }
  9.             RotationAnimation on rotation{
  10.                 from:0
  11.                 to:360
  12.                 direction: RotationAnimation.Clockwise
  13.                 duration:5000
  14.             }
  15.         }

 

 

下面是代码整体合起来和运行效果：

 

  1. import QtQuick 2.2
  2. import QtQuick.Controls 1.1
  3.  
  4. ApplicationWindow {
  5.     visible: true
  6.     width: 360
  7.     height: 480
  8.     title: qsTr("Hello World")
  9.  
  10.     menuBar: MenuBar {
  11.         Menu {
  12.             title: qsTr("File")
  13.             MenuItem {
  14.                 text: qsTr("Exit")
  15.                 onTriggered: Qt.quit();
  16.             }
  17.         }
  18.     }
  19.  
  20.  
  21.  
  22.     Rectangle{
  23.         Rectangle{
  24.             color:"gray"
  25.             y:100
  26.             width:360
  27.             height:80
  28.             id:rect1
  29.  
  30.             ColorAnimation on color { from: "white"; to: "red"; duration: 5000 }
  31.             RotationAnimation on rotation{
  32.                 from:0
  33.                 to:360
  34.                 direction: RotationAnimation.Clockwise
  35.                 duration:5000
  36.             }
  37.         }
  38.  
  39.         //切换状态
  40.         Rectangle{
  41.             color:"steelblue"
  42.             width:360
  43.             height:80
  44.             id:rect
  45.  
  46.             MouseArea{
  47.                 anchors.fill: parent
  48.                 onClicked: {
  49.                     console.log("dddd")
  50.                     rect.state="move"
  51.                     rect1.height=50
  52.                     rect1.state="move"
  53.                 }
  54.             }
  55.  
  56.                 states:[
  57.                     State{
  58.                     name:"move"
  59.                 //    PropertyChanges{
  60.                  //       target:rect
  61.                      //   y:250
  62.                  //   }
  63.                  //   PropertyChanges{
  64.                  //       target:rect1
  65.                     //    y:330
  66.                  //   }
  67.  
  68.                 }
  69.  
  70.                 ]
  71.  
  72.                 transitions: [
  73.                     Transition {
  74.                         PropertyAnimation{
  75.                             target:rect
  76.                             from:0
  77.                             to:250
  78.                             properties: "y"
  79.                             duration:5000
  80.                              easing.type: Easing.OutBounce
  81.                         }
  82.  
  83.                         PropertyAnimation{
  84.                             target:rect1
  85.                             properties: "y"
  86.                             from:100
  87.                             to:330
  88.                             duration:2000
  89.                             easing.type: Easing.OutBounce
  90.                         }
  91.                     }
  92.                 ]
  93.  
  94.         }
  95.     }
  96.  
  97.     /*
  98.     //初始化就触发的动画
  99.     Rectangle{
  100.         color:"red"
  101.         width:360
  102.         height:50
  104.         PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite }
  105.         PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite }
  106.     }
  107.     */
  108.  
  109.     /*
  110.     Rectangle{
  111.         color:"red"
  112.         width:360
  113.         height:50
  114.         id:rect
  115.         Behavior on x {
  116.             PropertyAnimation{ duration : 1000 }
  117.         }
  119.         Behavior on y {
  120.             PropertyAnimation{ duration : 1000 }
  121.         }
  124.     }
  126.     MouseArea{
  127.         anchors.fill: parent
  128.         onClicked:{
  129.             rect.x=mouse.x;
  130.             rect.y=mouse.y;
  131.         }
  132.     }
  134.     */
  135.     /*
  136.     Rectangle{
  137.         color:"red"
  138.         width:360
  139.         height:50
  140.         id:rect
  142.         MouseArea{
  143.             anchors.fill: parent
  144.             onClicked:
  145.                 PropertyAnimation{
  146.                     target:rect ;  properties:"y"
  147.                     to:250
  148.                     duration:1000
  149.                 }
  151.         }
  152.     }
  153.     */
  154.     /*
  155.     Column{
  156.         Rectangle{
  157.             color:"blue"
  158.             width:360
  159.             height:50
  160.             TextInput{
  161.                 anchors.fill: parent
  162.             }
  163.         }
  165.         Rectangle{
  166.             color:"red"
  167.             width:360
  168.             height:50
  169.             id:rect
  171.             PropertyAnimation{
  172.                 id:animation
  173.                 target:rect
  174.                 properties: "width"
  175.                 duration: 1000
  177.             }
  179.             MouseArea{
  180.                 anchors.fill: parent
  181.                 onClicked: {
  182.                     animation.to=50
  183.                     animation.running=true;
  184.                 }
  185.             }
  188.         }
  189.     }
  190.     */
  191.  
  192.     Text {
  193.         text: qsTr("Hello World")
  194.         anchors.centerIn: parent
  195.     }
  196. }

 

 

 

红色的巨型首先经过一个360旋转和变色，然后点击蓝色的巨型，就会像弹簧一样落下来。

刚刚提到Transition中的组合动画，ParalleAnimation和SequentialAnimation分别提供并行和串行的动画表现方案。

查看更多qml文章 qt qml中PropertyAnimation的几种用法

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号