前言:
属性值的改变能够通过一个动画来控制,缓冲曲线属性影响了一个属性值改变的插值算法。在已经定义的动画都使用了一种线性的插值算法,因为一个动画的默认缓冲类型是Easing.Linear。在一个小场景下的x轴与y轴坐标改变可以得到最好
的视觉效果。一个线性插值算法将会在动画开始时使用from的值到动画结束时使用的to值绘制一条直线,所以缓冲类型定义了曲线的变化情况。
代码实例:
// M1>>
// easingtypes.qml
import QtQuick 2.0
DarkSquare {
id: root
width: 600
height: 340
// A list of easing types
property variant easings : [
"Linear", "InQuad", "OutQuad", "InOutQuad",
"InCubic", "InSine", "InCirc", "InElastic",
"InBack", "InBounce" ]
Grid {
id: container
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.margins: 16
height: 200
columns: 5
spacing: 16
// iterates over the 'easings' list
Repeater {
//设置Repeater的模型
model: easings
ClickableImageV3 {
framed: true
// the current data entry from 'easings' list
text: modelData
source: "curves/" + modelData + ".png"
onClicked: {
// set the easing type on the animation
anim.easing.type = modelData
// restart the animation
anim.restart()
}
}
}
}
// The square to be animated
GreenSquare {
id: square
x: 40; y: 260
}
// The animation to test the easing types
NumberAnimation {
id: anim
target: square
from: 40; to: root.width - 40 - square.width
properties: "x"
duration: 2000
}
}
// <<M1
注意:
除了duration属性与easing.type属性,也可以对动画进行微调。例如PropertyAnimation属性,大多数动画都支持附加的easing.amplitude(缓冲振幅) ,easing.overshoot(缓冲溢出) ,easing.period(缓冲周期) ,这些属性允许你对个别的缓冲曲线进行微调。不是所有的缓冲曲线都支持这些参数。可以查看Qt PropertyAnimation文档中的缓冲列表(easing table) 来查看一个缓冲曲线的相关参数。