Roson的Qt之旅#51 QML之平滑动画(SmoothedAnimation)

刺骨的言语ヽ痛彻心扉 2022-09-15 05:49 126阅读 0赞

# 1.继承关系 #

父类：NumberAnimation

子类：无

# 2.详细描述 #

一个SmoothedAnimation动画的属性值，以一个设置的目标值，使用一个ease in/out quad easing curve。当目标值改变时，用于在旧目标值和新目标值之间动画的缓和曲线将平滑地拼接在一起，以创建到新目标值的平滑移动，从而保持当前速度。  
下面的例子展示了一个矩形使用SmoothedAnimation跟踪另一个矩形的位置。绿色矩形的x和y值与红色矩形的x和y值绑定在一起。当这些值改变时，绿色矩形平滑地动画到它的新位置:

import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 1000
        height: 700
        title: qsTr("Hello World")
    
        Rectangle {
              width: 800; height: 600
              color: "blue"
    
              Rectangle {
                  width: 60; height: 60
                  x: rect1.x - 5; y: rect1.y - 5
                  color: "green"
    
                  Behavior on x { SmoothedAnimation { velocity: 2000 } }
                  Behavior on y { SmoothedAnimation { velocity: 2000 } }
              }
    
              Rectangle {
                  id: rect1
                  width: 50; height: 50
                  color: "red"
              }
    
              focus: true
              Keys.onRightPressed: rect1.x = rect1.x + 100
              Keys.onLeftPressed: rect1.x = rect1.x - 100
              Keys.onUpPressed: rect1.y = rect1.y - 100
              Keys.onDownPressed: rect1.y = rect1.y + 100
          }
    
    }

![0bd251f9e01940b8909a3519ff1a58fa.gif][]

可以通过设置动画应该出现的速度(velocity)或动画应该持续的时间(duration)来配置SmoothedAnimation。如果同时指定了速度和持续时间，那么对于目标值的每次更改，都会选择导致最快动画的那个。  
例如，如果只设置速度为200，动画从0到800将花费4秒;如果只设置持续时间为8000，动画将花费8秒;如果设置速度为200，并且同时将持续时间设置为8000，动画将花费4秒。  
SmoothedAnimation的默认速度是200单位/秒。注意，如果动画值的范围很小，那么需要适当地调整速度。例如，项目的不透明度范围为0 - 1.0。为了使动画在这个范围内流畅，速度需要设置为0.5单位/秒。以0.5的速度制作从0到1.0的动画需要2000毫秒才能完成。  
像任何其他动画类型一样，smootheanimation可以以多种方式应用，包括过渡、行为和属性值源。Qt Quick文档中的动画和过渡显示了创建动画的各种方法。  
想要了解更多信息，请查阅SpringAnimation, NumberAnimation, Animation and Transitions in Qt Quick, and Qt Quick Examples - Animation。

# 3.数据成员 #

## 3.1 duration : int ##

此属性保存在跟踪源时使用的动画持续时间(以毫秒为单位)。  
将此设置为-1(默认值)禁用持续时间值。  
如果速度值和持续时间值都是启用的，动画将使用较短的持续时间。

##  ##

## 3.2 maximumEasingTime : int ##

这个属性指定了在接下来的操作中任何“eases”应该花费的最大时间(以毫秒为单位)。设置此属性会使速度在某一时刻后“趋于平稳”。设置负值将在整个动画期间恢复到正常的缓动模式。  
默认值为-1。

##  ##

## 3.3 reversingMode : enumeration ##

设置动画方向反转时平滑动画的行为。  
可能的值是:

*  SmoothedAnimation.Eased (default)-动画将平滑地减速，然后反转方向
 *  SmoothedAnimation.Immediate-立即-动画将立即开始反向加速，起始速度为0
 *  SmoothedAnimation.Sync-属性立即设置为目标值

##  ##

## 3.4 velocity : real ##