Qt特效-进场动画合集

2019-6-15 13:36| 发布者: admin| 查看: 11702| 评论: 0

摘要: 12种进场动画效果，参考了WPS版ppt的动画。效果使用Qml实现，主要使用了动画组件和ShadeEffect。QtQuick动画系统动画组件Qt动画系统，在帮助文档有详细的介绍，搜索关键词”Animation”，涛哥在这里说一些重点。涛哥 ...

12种进场动画效果，参考了WPS版ppt的动画。

效果使用Qml实现，主要使用了动画组件和ShadeEffect。

QtQuick动画系统

动画组件

Qt动画系统，在帮助文档有详细的介绍，搜索关键词”Animation”，涛哥在这里说一些重点。

涛哥用思维导图列出了Qml中所有的动画组件:

右边带虚线框的部分比较常用，是做动画必须要掌握的，尤其是属性动画PropertyAnimation和数值动画NumberAinmation。
常见的各种坐标动画、宽高动画、透明度动画、颜色动画等等，都可以用这些组件来实现。
底下的States、Behavior 和 Traisitions，也是比较常用的和动画相关的组件。可在帮助文档搜索
关键词”Qt Quick States”、”Behavior”、”Animation and Transitions”。后续的文章，涛哥会专门讲解。
左边的Animator系列，属于Scene Graph渲染层面的优化，其属性Change信号只在最终值时发出，不发出中间值，使用的时候需要注意。
顶上的AnimationController，属于高端玩家，用来控制整个动画的进度。

动画的使用

用例一直接声明动画

直接声明动画，指定target和property，之后可以在槽函数/js脚本中通过id控制动画的运行。

也可以通过设定loops 和 running属性来控制动画

  Rectangle {
      id: flashingblob
      width: 75; height: 75
      color: "blue"
      opacity: 1.0

      MouseArea {
          anchors.fill: parent
          onClicked: {
              animateColor.start()
              animateOpacity.start()
          }
      }

      PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}

      NumberAnimation {
          id: animateOpacity
          target: flashingblob
          properties: "opacity"
          from: 0.99
          to: 1.0
          loops: Animation.Infinite
          easing {type: Easing.OutBack; overshoot: 500}
     }
  }

用例二 on语法

on语法可以使用动画组件，也可以用Behavior，直接on某个特定的属性即可。效果一样。

on动画中，如果直接指定了running属性，默认就会执行这个动画。

也可以不指定running属性，其它地方修改这个属性时，会自动按照动画来执行。

示例代码 on动画

  Rectangle {
      width: 100; height: 100; color: "green"
      RotationAnimation on rotation {
          loops: Animation.Infinite
          from: 0
          to: 360
          running: true
      }
  }

示例代码 Behavior 动画

  import QtQuick 2.0

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"

      Behavior on width {
          NumberAnimation { duration: 1000 }
      }

      MouseArea {
          anchors.fill: parent
          onClicked: rect.width = 50
      }
  }

用例三 Transitions或状态机

过渡动画和状态机动画，本质还是直接使用动画组件。

只不过是把动画声明并存储起来，以在状态切换时使用。

这里先不细说了，后面会有系列文章，会专门讲解。

ShaderEffect

动画只能控制组件的属性整体的变化，做特效需要精确到像素。

Qml中提供了ShaderEffect这个组件，就能实现像素级别的操作。

Qml中有一个模块QtGraphicalEffects，提供了部分特效，就是使用ShaderEffect实现的。

使用ShaderEffect实现特效，需要有一些OpenGL/DirectX知识，了解GPU渲染管线，同时也需要一些数学知识。

12种动画特效的具体原理和代码有专门的教程，以下网址都有收录：

涛哥的博客 https://jaredtao.github.io

涛哥的知乎专栏-Qt进阶之路 https://zhuanlan.zhihu.com/TaoQt

涛哥的微信公众号 Qt进阶之路

----------------------------------------------------------------------------------------------------------------------
我们尊重原创，也注重分享，文章来源于微信公众号：Qt进阶之路，建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------