QML动画分组(Grouped Animations)

这篇具有很好参考价值的文章主要介绍了QML动画分组(Grouped Animations)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通常使用的动画比一个属性的动画更加复杂。例如你想同时运行几个动画并把他们连接起来,或者在一个一个的运行,或者在两个动画之间执行一个脚本。动画分组提供了很好的帮助,作为命名建议可以叫做一组动画。有两种方法来分组:平行与连续。你可以使用SequentialAnimation(连续动画)和ParallelAnimation(平行动画)来实现它们,它们作为动画的容器来包含其它的动画元素。

QML动画分组(Grouped Animations)

当开始时,平行元素的所有子动画都会平行运行,它允许你在同一时间使用不同的属性来播放动画。

1.// parallelanimation.qml
2.import QtQuick 2.0
3.
4.BrightSquare {
5.    id: root
6.    width: 300
7.    height: 200
8.    property int duration: 3000
9.
10.    ClickableImageV3 {
11.        id: rocket
12.        x: 20; y: 120
13.        source: "assets/rocket2.png"
14.        onClicked: anim.restart()
15.    }
16.
17.    ParallelAnimation {
18.        id: anim
19.        NumberAnimation {
20.            target: rocket
21.            properties: "y"
22.            to: 20
23.            duration: root.duration
24.        }
25.        NumberAnimation {
26.            target: rocket
27.            properties: "x"
28.            to: 160
29.            duration: root.duration
30.        }
31.    }
32.}

 QML动画分组(Grouped Animations)

一个连续的动画将会一个一个的运行子动画。

1.// sequentialanimation.qml
2.import QtQuick 2.0
3.
4.BrightSquare {
5.    id: root
6.    width: 300
7.    height: 200
8.    property int duration: 3000
9.
10.    ClickableImageV3 {
11.        id: rocket
12.        x: 20; y: 120
13.        source: "assets/rocket2.png"
14.        onClicked: anim.restart()
15.    }
16.
17.    SequentialAnimation {
18.        id: anim
19.        NumberAnimation {
20.            target: rocket
21.            properties: "y"
22.            to: 20
23.            // 60% of time to travel up
24.            duration: root.duration*0.6
25.        }
26.        NumberAnimation {
27.            target: rocket
28.            properties: "x"
29.            to: 160
30.            // 40% of time to travel sideways
31.            duration: root.duration*0.4
32.        }
33.    }
34.}

 QML动画分组(Grouped Animations)

分组动画也可以被嵌套,例如一个连续动画可以拥有两个平行动画作为子动画。我们来看看这个足球的例子。这个动画描述了一个从左向右扔一个球的行为:

QML动画分组(Grouped Animations)

要弄明白这个动画我们需要剖析这个目标的运动过程。我们需要记住这个动画是通过属性变化来实现的动画,下面是不同部分的转换:

从左向右的x坐标转换(X1)。

从下往上的y坐标转换(Y1)然后跟着一个从上往下的Y坐标转换(Y2)。

整个动画过程中360度旋转。

这个动画将会花掉3秒钟的时间。

QML动画分组(Grouped Animations)

我们使用一个空的基本元素对象(Item)作为根元素,它的宽度为480,高度为300。

1.import QtQuick 1.1
2.
3.Item {
4.    id: root
5.    width: 480
6.    height: 300
7.    property int duration: 3000
8.
9.    ...
10.}

我们定义动画的总持续时间作为参考,以便更好的同步各部分的动画。

下一步我们需需要添加一个背景,在我们这个例子中有两个矩形框分别使用了绿色渐变和蓝色渐变填充。

1. Rectangle {
2.        id: sky
3.        width: parent.width
4.        height: 200
5.        gradient: Gradient {
6.            GradientStop { position: 0.0; color: "#0080FF" }
7.            GradientStop { position: 1.0; color: "#66CCFF" }
8.        }
9.    }
10.    Rectangle {
11.        id: ground
12.        anchors.top: sky.bottom
13.        anchors.bottom: root.bottom
14.        width: parent.width
15.        gradient: Gradient {
16.            GradientStop { position: 0.0; color: "#00FF00" }
17.            GradientStop { position: 1.0; color: "#00803F" }
18.        }
19.    }

QML动画分组(Grouped Animations)

上面部分的蓝色区域高度为200像素,下面部分的区域使用上面的蓝色区域的底作为锚定的顶,使用根元素的底作为底。

让我们将足球加入到屏幕上,足球是一个图片,位于路径“assets/soccer_ball.png”。首先我们需要将它放置在左下角接近边界处。

1.    Image {
2.        id: ball
3.        x: 20; y: 240
4.        source: "assets/soccer_ball.png"
5.
6.        MouseArea {
7.            anchors.fill: parent
8.            onClicked: {
9.                ball.x = 20; ball.y = 240
10.                anim.restart()
11.            }
12.        }
13.    }

 QML动画分组(Grouped Animations)

图片与鼠标区域连接,点击球将会重置球的状态,并且动画重新开始。

首先使用一个连续的动画来播放两次的y轴变换。

1.   SequentialAnimation {
2.        id: anim
3.        NumberAnimation {
4.            target: ball
5.            properties: "y"
6.            to: 20
7.            duration: root.duration * 0.4
8.        }
9.        NumberAnimation {
10.            target: ball
11.            properties: "y"
12.            to: 240
13.            duration: root.duration * 0.6
14.        }
15.    }

QML动画分组(Grouped Animations)

在动画总时间的40%的时间里完成上升部分,在动画总时间的60%的时间里完成下降部分,一个动画完成后播放下一个动画。目前还没有使用任何缓冲曲线。缓冲曲线将在后面使用easing curves来添加,现在我们只关心如何使用动画来完成过渡。

现在我们需要添加x轴坐标转换。x轴坐标转换需要与y轴坐标转换同时进行,所以我们需要将y轴坐标转换的连续动画和x轴坐标转换一起压缩进一个平行动画中。

1.    ParallelAnimation {
2.        id: anim
3.        SequentialAnimation {
4.            // ... our Y1, Y2 animation
5.        }
6.        NumberAnimation { // X1 animation
7.            target: ball
8.            properties: "x"
9.            to: 400
10.            duration: root.duration
11.        }
12.    }

QML动画分组(Grouped Animations)

最后我们想要旋转这个球,我们需要向平行动画中添加一个新的动画,我们选择RotationAnimation来实现旋转。

1.   ParallelAnimation {
2.        id: anim
3.        SequentialAnimation {
4.            // ... our Y1, Y2 animation
5.        }
6.        NumberAnimation { // X1 animation
7.            // X1 animation
8.        }
9.        RotationAnimation {
10.            target: ball
11.            properties: "rotation"
12.            to: 720
13.            duration: root.duration
14.        }
15.    }

我们已经完成了整个动画链表,然后我们需要给动画提供一个正确的缓冲曲线来描述一个移动的球。对于Y1动画我们使用Easing.OutCirc缓冲曲线,它看起来更像是一个圆周运动。Y2使用了Easing.OutBounce缓冲曲线,因为在最后球会发生反弹。(试试使用Easing.InBounce,你会发现反弹将会立刻开始。)。X1和ROT1动画都使用线性曲线。

下面是这个动画最后的代码,提供给你作为参考:文章来源地址https://www.toymoban.com/news/detail-448648.html

    ParallelAnimation {
        id: anim
        SequentialAnimation {
            NumberAnimation {
                target: ball
                properties: "y"
                to: 20
                duration: root.duration * 0.4
                easing.type: Easing.OutCirc
            }
            NumberAnimation {
                target: ball
                properties: "y"
                to: 240
                duration: root.duration * 0.6
                easing.type: Easing.OutBounce
            }
        }
        NumberAnimation {
            target: ball
            properties: "x"
            to: 400
            duration: root.duration
        }
        RotationAnimation {
            target: ball
            properties: "rotation"
            to: 720
            duration: root.duration * 1.1
        }
    }

到了这里,关于QML动画分组(Grouped Animations)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Flutter】【packages】simple_animations 简单的实现动画

    导入包到项目中去 可以实现简单的动画, 快速实现,不需要自己过多的设置 有多种样式可以实现 [ ] 简单的用例:具体需要详细可以去 pub 链接地址 1. PlayAnimationBuilder 新增child 参数,静态的child ,减少资源的浪费,其他的build 同样可以这样使用 2.LoopAnimationBuilder 循环动画 该用

    2024年02月13日
    浏览(36)
  • QML Book 学习基础3(动画)

      目录 主要动画元素 例子:  非线性动画 分组动画 Qt 动画是一种在 Qt 框架下创建交互式和引人入胜的图形用户界面的方法,我们可以认为是对某个基础元素的多个设置                         PropertyAnimation-属性值变化时的动画 NumberAnimation-qreal类型值变化时的动

    2024年02月10日
    浏览(33)
  • Vue 中通用的 css 列表入场动画效果

      css 代码  封装的列表组件,我是直接循环列表组件的,并且加了一个index 属性 直接传递给子组件的第一个 元素上   这样就能实现列表一项接一项进入的效果动画了 

    2024年02月15日
    浏览(42)
  • QML动画实战指南:打造华丽且高性能的用户界面动效

    QML(Qt Meta-Object Language)是一种声明式编程语言,用于设计和实现基于Qt的用户界面。它允许开发者以更简单、高效的方式创建动态、响应式的UI。Qt Quick是Qt的一个子模块,提供了一套基于QML的UI开发框架,可以方便地创建出跨平台的图形用户界面。 动画在现代UI设计中占据着

    2024年02月09日
    浏览(62)
  • blender导出UE4用的FBX骨骼动画

    blender基础准备 部分约束修改器会在导出的时候会被烘培 blender当前帧的物体状态会变成UE4的默认状态 blender导出准备 路径模式:自动 内嵌纹理:True 批量模式:关闭 选定的物体:True 活动集合:False 物体类型:所有类型 自定义属性:False 缩放:1 应用缩放:FBX全部 前进:-X前进 向上:Z向上

    2024年02月04日
    浏览(58)
  • 可能是迄今为止最好用的WPF加载动画功能(没有之一)

    前言 当我们在开发应用程序时,用户体验往往是至关重要的一环。在应用程序加载大量数据或执行复杂操作时,为用户提供一个良好的加载体验变得至关重要。加载动画是其中一个有效的方式,它不仅能够告知用户应用程序正在进行工作,还能够缓解用户在等待过程中的焦虑

    2024年03月28日
    浏览(46)
  • Convolution operation and Grouped Convolution

    filter is not the kernel,but the kernels.that\\\'s mean a filter include one or two or more kernels.that\\\'s depend the input feature map and the output feature maps. for example, if we have an image, the shape of image is (32,32), has 3 channels,that\\\'s RGB.so the input feature maps is (1,3,32,32).the format of input feature maps is (batch_size,in_channels,H_in

    2024年02月14日
    浏览(34)
  • 论文阅读Point Transformer V2: Grouped Vector Attention and Partition-based Pooling

    Point transformer v2。 香港大学2022 在PCT的基础上进一步改进的点云处理方法,通过分组向量注意力(Grouped Vector Attention)和基于划分的池化机制,提高了对点云特征的提取和聚合能力,并在轻量级上有了新的突破。 总体来看: 1.点云网格化:将点云划分成大小相等的小块,对每个小

    2024年01月22日
    浏览(42)
  • LLaMa 原理+源码——拆解 (KV-Cache, Rotary Positional Embedding, RMS Norm, Grouped Query Attention, SwiGLU)

    Vanilla Transformer 与 LLaMa 的对比:LLaMa与普通的Transformer架构不同的地方,包括采用了 前置 了层归一化(Pre-normalization)并使用 RMSNorm 归一化函数(Normalizing Function)、使用了 旋转位置嵌入(RoPE) 、激活函数由ReLU更换为 SwiGLU ,并且将self-attention改进为 使用KV-Cache的Grouped Quer

    2024年01月25日
    浏览(45)
  • 【QML】QML与cpp交互(一)—— QML直接调用cpp函数

    目录 1、cpp 创建一个类 2、将类对象暴露给QML 3、QML通过对象直接调用cpp函数 类模板如下:  要求:  使用  Q_OBJECT 宏需要继承 QObject 类。Q_OBJECT能够启用信号和槽机制、使用动态属性系统。(使用 Q_OBJECT 宏的类需要通过Qt的元对象编译器(moc)进行处理。) 使用  Q_INVOKABLE 修

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包