devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QML动画和过度_sequentialanimation

作者：菜鸟追梦旅行 | 2024-02-14 20:41:57

赞

踩

sequentialanimation

动画（Animation）和过度（Transition）元素

  • Transition - 状态改变的过度动画
  • SequentialAnimation - 串行执行动画
  • ParallelAnimation - 并行执行动画
  • Behavior - 为属性变化指定默认动画
  • PropertyAction - 动画中设置立即改变的属性值（Sets immediate property changes during animation）
  • PauseAnimation - 在动画中引入暂停
  • SmoothedAnimation - 运行属性平滑的过渡到一个新的值
  • SpringAnimation - 以弹跳式的方式给属性设置一个新值
  • ScriptAction - 动画中执行脚本

动画属性元素的数据类型

  • PropertyAnimation - 属性改变动画
  • NumberAnimation - qreal类型属性改变动画
  • Vector3dAnimation - QVector3d类型属性改变动画
  • ColorAnimation - 颜色改变动画
  • RotationAnimation -旋转动画
  • ParentAnimation - parent更改动画
  • AnchorAnimation - 描点改变动画

在QML中,向属性值应用animation元素来创建动画.Animation元素通过篡改属性的值来产生平滑的过度.同样,也可使用状态过度(state transition)向状态变化设置一个动画.

要创建动画,需要使用与要创建动画的属性类型相匹配的animation元素,应用的动画(animation)与需要的行为类型有关.

触发动画

有很多种方式在对象上设置动画.

直接的属性动画Direct Property Animation

要实现立即移动或动画移动,可直接设置属性值.这可以在信号处理函数或附加属性中实现

  1.  Rectangle {
  2.      id: blob
  3.      width: 75; height: 75
  4.      color: "blue"
  5.  
  6.      MouseArea {
  7.          anchors.fill: parent
  8.          onClicked: blob.color = "green"
  9.      }
  10.  }

然而,为产生更多控制,属性动画(property animation)使用在属性变化值之间进行插值实现了平滑移动.属性动画提供了定时控制和由easing curves指定的不同插值曲线.

  1.  Rectangle {
  2.      id: flashingblob
  3.      width: 75; height: 75
  4.      color: "blue"
  5.      opacity: 1.0
  6.  
  7.      MouseArea {
  8.          anchors.fill: parent
  9.          onClicked: {
  10.              animateColor.start()
  11.              animateOpacity.start()
  12.          }
  13.      }
  14.  
  15.      PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}
  16.  
  17.      NumberAnimation {
  18.          id: animateOpacity
  19.          target: flashingblob
  20.          properties: "opacity"
  21.          from: 0.99
  22.          to: 1.0
  23.          loops: Animation.Infinite
  24.          easing {type: Easing.OutBack; overshoot: 500}
  25.     }
  26.  }

特定的属性动画元素(property animation elements)与PropertyAnimation元素的实现相比效率更好.他们向不同的QML类型如int,color,rotation设置动画,PropertyAnimation可以设置parent改变动画

状态变化的过度

States是属性的配置集合,针对不同的状态设置不同的属性值.状态变化直接导致其中的属性变化;动画平滑过度可产生生动的状态变化效果.

Transition元素自动实现了动画元素(animation elements)的功能,为状态变化引起的属性变化产生插值.要设置一个对象的过度(transition),可构造其transitions属性.

按钮可能有两个状态,用户点击时为pressed状态,用户释放鼠标后为released状态.我们可以为每个状态设置不同的属性配置.过度(transition)可以为状态从pressed改变为released产生动画.同样也可为状态从released改变为pressed产生动画

  1.  Rectangle {
  2.      width: 75; height: 75
  3.      id: button
  4.      state: "RELEASED"
  5.  
  6.      MouseArea {
  7.          anchors.fill: parent
  8.          onPressed: button.state = "PRESSED"
  9.          onReleased: button.state = "RELEASED"
  10.      }
  11.  
  12.      states: [
  13.          State {
  14.              name: "PRESSED"
  15.              PropertyChanges { target: button; color: "lightblue"}
  16.          },
  17.          State {
  18.              name: "RELEASED"
  19.              PropertyChanges { target: button; color: "lightsteelblue"}
  20.          }
  21.      ]
  22.  
  23.      transitions: [
  24.          Transition {
  25.              from: "PRESSED"
  26.              to: "RELEASED"
  27.              ColorAnimation { target: button; duration: 100}
  28.          },
  29.          Transition {
  30.              from: "RELEASED"
  31.              to: "PRESSED"
  32.              ColorAnimation { target: button; duration: 100}
  33.          }
  34.      ]
  35.  }

to和from属性绑定到特定的状态名称上,可以设置过度(transition)针对的属性变化.为简化或使过度对称,可设置to属性为通配符星号("*"),指示这个过度可用于所有的状态改变

  1.      transitions:
  2.          Transition {
  3.              to: "*"
  4.              ColorAnimation { target: button; duration: 100}
  5.          }

默认的行为动画(Default Animation as Behaviors)

默认的属性动画使用行为动画(behavior animations)来设置.使用指定属性的Behavior元素声明的动画,使属性值变化时产生动画.然而,Behavior元素有一个enabled属性可设置行为动画的使能.

下面是一个球(ball)组件,可对其x,y,color属性设置行为动画(behavior animation).行为动画被设置为模拟弹性效果.当球移动时就会在属性值变化上应用这个弹性效果

  1.  Rectangle {
  2.      width: 75; height: 75; radius: width
  3.      id: ball
  4.      color: "salmon"
  5.  
  6.      Behavior on x {
  7.          NumberAnimation {
  8.              id: bouncebehavior
  9.              easing {
  10.                  type: Easing.OutElastic
  11.                  amplitude: 1.0
  12.                  period: 0.5
  13.              }
  14.          }
  15.      }
  16.      Behavior on y {
  17.          animation: bouncebehavior
  18.      }
  19.      Behavior {
  20.          ColorAnimation { target: ball; duration: 100 }
  21.      }
  22.  }

有很多种方式给属性设置行为动画.Behavior on <property>声明是给属性设置行为动画的便利方式

串行或并行执行动画

动画可并行或串行运行.并行动画可同时执行一组动画,而串行动画按顺序执行一组动画:一个执行完毕后在执行另一个.在SequentialAnimation 和ParallelAnimation中分组的动画将串行或并行执行.

下面的banner组件需要一个挨一个的显示多个图标或广告.opacity属性变为1.0来表示一个不透明对象.使用SequentialAnimation元素,前一个动画执行完毕后才会执行opacity动画.ParallelAnimation元素将同时执行动画

  1.  Rectangle {
  2.      id: banner
  3.      width: 150; height: 100; border.color: "black"
  4.  
  5.      Column {
  6.          anchors.centerIn: parent
  7.          Text {
  8.              id: code
  9.              text: "Code less."
  10.              opacity: 0.01
  11.          }
  12.          Text {
  13.              id: create
  14.              text: "Create more."
  15.              opacity: 0.01
  16.          }
  17.          Text {
  18.              id: deploy
  19.              text: "Deploy everywhere."
  20.              opacity: 0.01
  21.          }
  22.      }
  23.  
  24.      MouseArea {
  25.          anchors.fill: parent
  26.          onPressed: playbanner.start()
  27.      }
  28.  
  29.      SequentialAnimation {
  30.          id: playbanner
  31.          running: false
  32.          NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
  33.          NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
  34.          NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
  35.      }
  36.  }

一旦有动画被放在了SequentialAnimation 或 ParallelAnimation中, 他们就不会再独立的启动或停止.串行或并行动画必须作为一个组合来启动或停止.

SequentialAnimation元素在执行过度动画(transition animations)时也很有效,因为在过度中的动画是并行执行的.

有关在QML中创建和组合多个动画的演示请见Animation basics example.

控制动画

有不同的方式控制动画.

动画回放

所有的动画元素都是从Animation元素继承的;这些元素为动画元素提供了必要的属性和方法.动画元素具有start(),stop(),resume(),pause()和complete()方法--这些方法控制了动画的执行.

Easing

Easing曲线定义动画如何在起始值和终止值间产生插值.不同的easing曲线定义了一系列的插值.easing曲线简化了创建动画的效果--如弹跳效果, 加速, 减速, 和周期动画.

QML对象中可能对每个属性动画都设置了不同的easing曲线.同时也有不同的参数用于控制曲线,有些是特除曲线独有的.更多信息见easing 文档.

easing example 可视化的演示了不同easing曲线类型效果.

其他动画元素

此外,QML提供了几个对动画有用的其他元素:

  • PauseAnimation: 允许停止动画
  • ScriptAction: 允许在动画期间执行JavaScript,可与StateChangeScript配合来重用已存在的脚本.
  • PropertyAction: 在动画期间直接修改属性,而不会产生属性变化动画

下面是针对不同属性类型的特殊动画元素

  • SmoothedAnimation: 特殊的NumberAnimation,当目标值发生改变时提供平滑的动画效果
  • SpringAnimation: 指定mass, damping 和epsilon等特殊属性来提供一个弹簧效果的动画
  • ParentAnimation: 用在parent变化时的动画
  • AnchorAnimation: 用在描点变化时的动画

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/81554
推荐阅读
相关标签

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

  

闽ICP备14008679号