QML类型:SmoothedAnimation、SpringAnimation、PathAnimation

SmoothedAnimation

一、描述

SmoothedAnimation 是平滑动画,继承自 NumberAnimation使用 Easing.InOutQuad 缓和曲线将属性值动画化为设定的目标值。当目标值更改时,用于在旧目标值和新目标值之间设置动画的缓动曲线会平滑地拼接在一起,以创建到新目标值的平滑移动,从而保持当前速度。

二、属性成员

1、duration : int

此属性保存跟踪源时使用的动画持续时间(以毫秒为单位)。

将此设置为 -1(默认值)将禁用持续时间值。

如果速度值和持续时间值都启用,则动画将使用持续时间较短的那个。

2、maximumEasingTime : int

此属性指定跟随期间的任何“缓动”应花费的最长时间(以毫秒为单位)。默认值为 -1。

设置此属性会导致速度在一段时间后“趋于平稳”。设置负值会在整个动画持续时间内恢复到正常的缓动模式。

3、reversingMode : enumeration

设置在动画方向反转时的行为方式。

  • SmoothedAnimation.Eased:默认值,动画会平滑减速,然后反转方向。
  • SmoothedAnimation.Immediate:动画将立即开始反向加速,从速度 0 开始。
  • SmoothedAnimation.Sync:该属性立即设置为目标值。

4、velocity : real

此属性保存跟踪“to”值时允许的平均速度。默认速度是 200 单位/秒。

将此设置为 -1 将禁用速度值。

如果速度值和持续时间值都启用,则动画将使用持续时间较短的那个。


SpringAnimation

一、描述

SpringAnimation 模仿弹簧的振荡行为,继承自 NumberAnimation。使用适当的弹簧常数来控制加速度和阻尼来控制效果消失的速度。

单击鼠标时,以下 Rectangle 使用 SpringAnimation 移动到鼠标的位置。在 x 和 y 值上使用 Behavior 表明只要这些值发生更改,就应该应用 SpringAnimation。

import QtQuick 2.0

Item 
{
    width: 300; height: 300

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

        Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
        Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
    }

    MouseArea 
    {
        anchors.fill: parent
        onClicked: (mouse)=> 
        {
            rect.x = mouse.x - rect.width/2
            rect.y = mouse.y - rect.height/2
        }
    }
}

二、属性成员

1、damping : real

该属性保存弹簧阻尼值。默认值为 0。

该值描述了类似弹簧的运动停止的速度。有用的值范围是 0 - 1.0。值越低,静止越快。

2、epsilon : real

此属性包含弹簧 epsilon。默认值为 0.01。

epsilon 是值的变化率和变化量,它足够接近 0 以被视为等于零。这将取决于该值的用途。对于像素位置,0.25 就足够了。对于比例,0.005 就足够了。

3、mass : real

此属性包含正在移动的属性的“质量”。默认值为 1.0。

当项目静止时,更大的质量会导致更慢的运动和更大的弹簧式运动。

4、modulus : real

此属性保存模数值。默认值为 0。

设置模数会强制目标值在模数处“环绕”。如将模数设置为 360 将导致值 370 环绕到 10。

5、spring : real

该属性描述了目标被拉向源的强度。默认值为 0(即禁用类似弹簧的运动)。

有用的值范围是 0 - 5.0。

当设置了该属性并且速度值大于 0 时,速度限制了最大速度。

6、velocity : real

此属性包含跟踪源时允许的最大速度。默认值为 0(无最大速度)。


PathAnimation

一、描述

路径动画,继承自 Animation,在 transition 中使用时,可以指定没有起点或终点的路径,例如:

PathAnimation 
{
    path: Path 
    {
        PathCurve {x: 100; y: 100}
        PathCurve {}
    }
}

二、属性成员

1、anchorPoint : point

此属性保存正在设置动画的项目的锚点。

默认情况下,目标的左上角(其 0,0 点)将锚定(或跟随)路径。anchorPoint 属性可用于指定不同的锚定点。 例如,为 10x10 的项目指定 5,5 的锚点意味着项目的中心将遵循路径。

2、duration : int

此属性保存动画的持续时间,以毫秒为单位。默认值为 250。

3、endRotation : real

此属性保存目标的结束旋转。

4、orientation : enumeration

此属性控制项目在沿路径设置动画时的旋转方向。

如果指定了 Fixed 以外的值,则项目将在沿路径行进时旋转项目以达到指定的方向。

  • PathAnimation.Fixed:默认,不会控制项目的旋转。
  • PathAnimation.RightFirst:项目的右侧将沿着路径引导。
  • PathAnimation.LeftFirst:项目的左侧将沿着路径引导。
  • PathAnimation.BottomFirst:项目的底部将沿着路径引导。
  • PathAnimation.TopFirst:项目的顶部将沿着路径引导。

5、orientationEntryDuration : real

此属性保存过渡到方向的持续时间(以毫秒为单位)。

如果指定了方向,并且项目的起始旋转与方向给定的不匹配,则可以使用 orientationEntryDuration 从项目的起始旋转平滑过渡到路径方向给定的旋转。

6、orientationExitDuration : real

此属性保存从方向转换的持续时间(以毫秒为单位)。

如果指定了方向和 endRotation,则可以使用 orientationExitDuration 从路径方向给定的旋转平滑过渡到指定的 endRotation。

7、path : Path

此属性包含动画路径。

8、target : Item

此属性保存要设置动画的项目。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值