QML学习——QML动画元素（二）

最新推荐文章于 2024-07-30 11:33:12 发布

Taiga_

最新推荐文章于 2024-07-30 11:33:12 发布

阅读量799

点赞数 11

分类专栏： Qt For Everything # Qt With QML 文章标签：学习 qt5 开发语言

本文链接：https://blog.csdn.net/taiga_/article/details/139417958

版权

Qt For Everything 同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

Qt With QML

12 篇文章 0 订阅

订阅专栏

QML动画元素

所有的动画元素都继承自Animation元素

不要过度的使用动画。用户界面动画的设计应该尽量小心，动画是让界面更加生动而不是充满整个界面。眼睛对于移动的东西非常敏感，很容易干扰用户的使用。

① PropertyAnimation

属性动画元素可以通过不同的方式来使用，取决于应用场景：（In a Transition、In a Behavior、As a property value source、In a signal handler、Standalone）
- 作为属性值的来源：可以立即为一个指定的属性使用动画；
- 在信号处理器中创建：当接收到一个信号时触发动画；
- 作为独立动画元素：像一个普通的QML对象一样，不需要绑定到任何特定的对象和属性；
- 在属性值改变的行为中创建：当一个属性改变时触发动画；
例子①如下：
- ```
PropertyAnimation on x {
   from: 50                        //动画的起点
   to: 500                         //动画的终点
   duration: 30000                 //运动时间为30秒
   loops: Animation.Infinite       //无限循环
   easing.type: Easing.OutBounce   //反弹
}
```
- 这里在某个Rectangle的x属性上应用了PropertyAnimation，来使它从起始值50在30000毫秒中使用动画变化到500；
- Rectangle一旦加载完成就会立即开启该动画；
- loops属性设定为Animation.Infinite表明该动画是无限循环的；
- 对于任何基于PropertyAnimation的动画都可以通过设置easing属性来控制在属性值动画中使用的缓和曲线；
  - 缓和曲线可以影响这些属性值的动画效果，提供反弹、加速、减速等视觉效果；
- 这里通过使用Easing.OutBounce创建了一个动画达到目标值时的反弹效果；

例子②如下：

MouseArea {
    anchors.fill: parent
    //可以在一个信号处理器中创建一个动画，并在接收到信号时触发这个动画
    //
    //
    onClicked: PropertyAnimation {
        target: rect2_ID                //动画应用的目标（目标对象）
        property: y                   //y轴方向的动画
        from: 30                        //动画的起点
        to: 300                         //动画的终点
        duration: 3000                  //运动时间为3秒
        loops: 3                        //运动3个周期
        easing.type: Easing.Linear      //匀速线性运动
    }
}

可以在一个信号处理器中创建一个动画，并在接收到信号时触发这个动画；
当MouseArea被单击时触发，在3000毫秒内使用动画将某个控件的y坐标属性由30改为300，并往复运动3次；
因为该动画没有绑定到一个特定的对象或属性，所以必须指定target和property（properties）；

例子③如下：

PropertyAnimation {
    id: animation_ID
    target: rect3_ID                //动画应用的目标（目标对象）
    properties: "x,y"               //同时在x、y轴两个方向上运动
    duration: 5000                  //运动时间为5秒
    easing.type: Easing.InOutBack   //运动到半程增加过冲，然后减少
}

MouseArea {
    anchors.fill: parent
    //鼠标点击时触发动画
    onClicked: {
        animation_ID.from = 20      //设置起点
        animation_ID.to = 200       //设置终点
        animation_ID.running = true //开启动画
    }
}

这是一个独立的动画元素，它不会绑定到任何对象或属性上；
一个独立的动画元素默认是不会运行的，需使用running属性或者start()/stop()方法来明确运行状态；
独立动画元素使用在不是对某个单一的对象属性且需要明确控制开始和停止动画的情况下非常有用；

例子④如下：
- ```
//定义x属性上的行为动画
Behavior on x {
    PropertyAnimation {
        duration: 1000              //运动时间为1秒
        easing.type: Easing.InQuart //加速运动
    }
}

Behavior on y {
    PropertyAnimation {
        duration: 1000
        easing.type: Easing.InQuart
    }
}
```
- 经常在一个特定的属性值改变时要应用一个动画，在这种情况下，可以使用一个Behavior为一个属性改变指定一个默认动画；
- 这里当x改变时（例如鼠标点击位置设置为矩形的位置），使Rectangle使用该动画效果移动到新的位置（鼠标点击的位置）上；
- 行为动画时在每次响应一个属性值的变化时触发的，对这些属性的任何改变都会触发他们的动画；
- 注意，这里PropertyAnimation的from/to是不需要指定的；
效果：
可以把①理解为“使”，④理解为“被”，第一个例子是使得x属性（PropertyAnimation on x）发生变化，第四个例子是当x属性（Behavior on x）被改变时。

② 其他动画元素

其他的动画元素大多继承自PropertyAnimation，其中主要有：

NumberAnimation：为实数和整数等数值类属性提供了更高效的实现；
ColorAnimation：为颜色动画提供特定支持；
RotationAnimation：为旋转动画提供特定支持；
Vector3dAnimation：为矢量3D提供更高效的支持；

除了上面这些基本和通常使用的动画元素，QtQuick还提供了一切特殊场景下使用的动画：
- PauseAnimation（停止动画）- 运行暂停一个动画
SequentialAnimation（顺序动画）- 允许动画有序播放
- ParallelAnimation（并行动画）- 允许动画同时播放
AnchorAnimation（锚定动画）- 使用锚定改变播放的动画
- ParentAnimation（父元素动画）- 使用父对象改变播放的动画
SmotthedAnimation（平滑动画）- 跟踪一个平滑值播放的动画
- SpringAnimation（弹簧动画）- 跟踪一个弹簧变换的值播放的动画
PathAnimation（路径动画）- 跟踪一个元素对象的路径的动画
- Vector3dAnimation（3D容器动画）- 使用QVector3d值改变播放的动画
当使用更加复杂的动画时，我们可能需要在播放一个动画时中改变一个属性或者运行一个脚本。对于这个问题，QtQuick提供了一个动作元素：
- PropertyAction（属性动作）- 在播放动画时改变属性
- ScriptAction（脚本动作）- 在播放动画时运行脚本
例子：简单的从一个矩形滚动变成一个圆形

Rectangle {
    id: transitionRect_ID
    x: 50
    y: 50
    width: 100
    height: 100
    
    //颜色值的变换
    ColorAnimation on color {
        from: "blue"
        to: "aqua"
        duration: 10000
        loops: Animation.Infinite
    }
    
    //旋转的变换
    RotationAnimation on rotation {
        from: 0
        to: 360
        duration: 10000
        loops: Animation.Infinite
        direction: RotationAnimation.Clockwise //表示顺时针
    }
    
    //数值的变换
    NumberAnimation on radius {
        from: 0
        to: 50
        duration: 10000
        loops: Animation.Infinite
    }
    
    PropertyAnimation on x {
        from: 50
        to: (rectangle_ID.width - 100) //得设最小宽度
        duration: 10000
        loops: Animation.Infinite
        easing.type: Easing.InSine
    }
}

③ Animator

Animator有以下几种具体的动画：

OpacityAnimator：作用于透明的动画；
RotationAnimator：作用于旋转角度的动画；
ScaleAnimator：作用于缩放的动画；
UniformAnimator：作用于着色器uniform变量的动画；
XAnimator：作用于水平方向的动画；
YAnimator：作用于垂直方向的动画；

Animator是一类特殊的动画元素，自Qt5.2引入，比传统的基于对象和属性的Animation元素给用户的视觉体验更佳；
它能直接作用于Qt Quick的场景图形（scene graph），这使得基于Animator元素的动画即使在UI界面线程阻塞的情况下也能通过场景图形系统的渲染线程来工作；
例子：

Rectangle {
    id: rect_ID
    width: 200
    height: 200
    color: "cadetblue"

    //XAnimator类型是元素在水平方向上移动的动画
    XAnimator on x {
        from: 10;
        to: 600;
        duration: 7000
        loops: Animator.Infinite
    }

    //同上，垂直方向的动画
    YAnimator{
        target: rect_ID
        from: 10;
        to: 600;
        duration: 7000
        loops: Animator.Infinite
    }

    //ScaleAnimator改变一个元素的尺寸因子，产生使元素尺寸缩放的动画
    ScaleAnimator on scale {
        from: 0.2;
        to: 1;
        duration: 7000
        loops: Animator.Infinite
    }

    //旋转
    RotationAnimator on rotation {
        from: 0;
        to: 360;
        duration:7000
        loops: Animator.Infinite
    }

    //透明度
    OpacityAnimator on opacity {
        from: 0.2;
        to: 1;
        duration: 7000
        loops: Animator.Infinite
    }
}