PauseAnimation (暂停动画)
为动画提供暂停
Rectangle{
id:rect1
width: 100;height: 100;x:100;y:100
color: "lightBlue"
SequentialAnimation{
running: true
ColorAnimation {
target: rect1;property: "color";from: "white";to: "black";duration: 2000
}
PauseAnimation {
duration: 2000 //暂停2s
}
ColorAnimation {
target: rect1;property: "color";from: "black";to: "white";duration: 2000
}
}
}
SmoothedAnimation(平滑动画)
平滑动画使用缓入/缓出四缓曲线将属性值动画化为设定的目标值。当目标值更改时,用于在新旧目标值之间进行动画处理的缓动曲线将平滑地拼接在一起,以创建到保持当前速度的新目标值的平滑运动。
属性:
duration | 持续时间 |
maximumEasingTime | 最大缓动时间 |
reversingMode | 缓动模型 |
velocity | 移动速度(默认速度为 200 个单位/秒) |
reversingMode:enumeration
SmoothedAnimation.Eased (default) | 动画将平滑减速,然后反转方向 |
SmoothedAnimation.Immediate | 动画将立即开始向相反方向加速,从速度 0 开始 |
SmoothedAnimation.Sync | 属性立即设置为目标值 |
按下上下左右按键,移动小方块。
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
id:window1
visible: true
width: 700
height: 700
title: qsTr("Hello World")
Rectangle{
anchors.fill:parent
Rectangle {
id:rect1
width: 60; height: 60
x: 50; y: 50
color: "green"
Behavior on x {
SmoothedAnimation { velocity: 500 } }
Behavior on y { SmoothedAnimation { velocity: 500 } }
}
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
}
}
PropertyAction(属性操作)
属性操作用于指定动画期间的即时属性更改。属性更改不会以动画形式显示。它可用于在动画期间设置非动画属性值。
属性:
exclude | 排除属性 |
property properties | 属性 |
target targets | 对象 |
value | 数值 |
动画中修改透明度和缩放
Rectangle{
id:rect1
width:100;height: 100;x:100;y:100;color: "lightBlue"
SequentialAnimation{
running: true
ColorAnimation {
target: rect1;property: "color";from: "white";to: "black";duration: 2000
}
PropertyAction{
target: rect1;property: "opacity";value: 0.2//透明度
}
PropertyAction{
target: rect1;property: "scale";value: 0.5//缩放
}
ColorAnimation {
target: rect1;property: "color";from: "black";to: "white";duration: 2000
}
}
}
使用State来定义过渡时出现的问题:
采用 State 来定义过渡结束时的值。动画将以默认值旋转,然后跳转到指定位置。
Item {
width: 400; height: 400
Rectangle {
id: rect
width: 200; height: 100
color: "red"
states: State {
name: "rotated"
//围绕右下角旋转
PropertyChanges { target: rect; rotation: 180; transformOrigin: Item.BottomRight }
}
transitions: Transition {
//设置过渡动画
RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
}
MouseArea {
anchors.fill: parent
onClicked: rect.state = "rotated"
}
}
}
解决方法:
在旋转动画开始前插入一个属性操作,这会立即将属性设置为过渡的结束状态中定义的值,以便旋转动画从正确的变换原点开始。
transitions: Transition {
SequentialAnimation {
PropertyAction { target: rect; property: "transformOrigin" }
RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
}
}
ScriptAction (脚本操作)
脚本操作可用于在动画中的特定点运行脚本。
属性:
script | 脚本 |
scriptName | 脚本名称 |
直接使用脚本操作:
function fun1(){
console.log("脚本已执行")
}
Rectangle{
id:rect1
width:100;height: 100;x:100;y:100;color: "lightBlue"
SequentialAnimation{
running: true
NumberAnimation{}
ScriptAction{script:fun1()} //执行脚本
NumberAnimation{}
}
}
使用state使用动画:
function fun1(){
console.log("脚本已执行")
}
Rectangle{
id:rect1
focus:true
width:100;height: 100;x:100;y:100;color: "lightBlue"
states: State {
name: "some"
StateChangeScript{
name:"myScript"
script: fun1()//执行脚本
}
}
transitions: Transition {
to:"some"
SequentialAnimation{
NumberAnimation{}
ScriptAction{scriptName: "myScript"}
NumberAnimation{}
}
}
Keys.onSpacePressed: {
rect1.state="some"
}
}
SpringAnimation(弹簧动画)
SpringAnimation模仿弹簧的振荡行为,使用适当的弹簧常数来控制加速度,使用阻尼来控制效果消失的速度。您还可以限制动画的最大速度。
属性:
damping | 保存弹簧阻尼值, 描述类似弹簧的运动停止的速度。默认值为 0。 有用的值范围为 0 - 1.0。值越低,休息得越快 |
epsilon | 值的变化率和变化量,该值足够接近 0 以被视为等于零 对于像素位置,0.25 就足够了。对于比例,0.005 就足够了。 默认值为 0.01。 |
mass | 质量,默认情况下,该值为 1.0 |
modulus | 保存模值。默认值为 0,设置模数会强制目标值在模数处“环绕”。例如,将模数设置为 360 将导致值 370 环绕为 10。 |
spring | 描述目标被拉向源的强度。默认值为 0(即禁用类似弹簧的运动)。有用值范围为 0 - 5.0。 如果设置此属性并且速度值大于 0,则速度会限制最大速度。 |
velocity | 此属性保持跟踪源时允许的最大速度。默认值为 0(无最大速度) |
鼠标点到哪里,图形移动到哪里,有点震荡的效果。
Item{
anchors.fill:parent
Rectangle{
id:rect1
width: 100;height: 100;color: "lightBlue"
Behavior on x{SpringAnimation{spring: 2;damping: 0.2}}
Behavior on y{SpringAnimation{spring: 2;damping: 0.2}}
}
MouseArea{
anchors.fill:parent
onPressed: {
rect1.x=mouse.x
rect1.y=mouse.y
}
}
}
AnchorAnimation(锚点动画)
锚点动画用于对锚点更改进行动画处理,锚点动画只能在过渡中以及与锚点更改结合使用。它不能用于行为和其他类型的动画。
属性:
duration | 持续时间 |
easing | 缓和 |
targets | 项目列表 |
使用AnchorChageds(锚点更改)
Item{
id:item1
width: 500;height: 500
focus:true
Rectangle{
id:rect1
width: 100;height: 100;color: "lightBlue"
}
states:State{
name:"some"
AnchorChanges{ //锚的修改
target: rect1
anchors.top:item1.top
anchors.bottom:item1.bottom
}
PropertyChanges {
target: rect1
anchors.topMargin: 10
anchors.bottom: 10
}
}
Keys.onPressed: {
item1.state="some"
}
}
使用锚点动画:
Item{
id:item1
width: 500;height: 500
focus:true
Rectangle{
id:rect1
width: 100;height: 100;color: "lightBlue"
}
states:State{
name:"some"
AnchorChanges{ //锚的修改
target: rect1
anchors.top:item1.top
anchors.bottom:item1.bottom
}
PropertyChanges {
target: rect1
anchors.topMargin: 10
anchors.bottom: 10
}
}
transitions: Transition {
AnchorAnimation{duration: 1000}//设置持续时间
}
Keys.onPressed: {
item1.state="some"
}
}
ParentAnimation(父动画)
对父值中的更改进行动画处理,父动画可以包含任意数量的动画,父动画一般在过渡中与父更改一起使用,以这种方式使用时,它会对状态更改期间发生的任何父级更改进行动画处理。这可以通过使用目标属性设置特定目标项来覆盖。
属性:
parent | 父项 |
target | 对象 |
via | 通过其重新设置父级的项目。这提供了一种在剪切旧父项和新父项时执行未剪裁动画的方法 |
例子:
Item{
id:item1
width: 500;height: 500
Rectangle{
id:rect1
width: 100;height: 100;color: "lightBlue"
}
Rectangle{
id:rect2
focus:true
width:50;height:50;x:200;y:200;color:"lightGreen"
states:State{
name:"some"
ParentChange{target: rect2;parent: rect1;x:50;y:50}
}
transitions: Transition {
ParentAnimation{ //使用父类动画
NumberAnimation{properties: "x,y";duration:2000}
ColorAnimation{property:"color";from:"lightGreen";to:"red";duration: 2000}
}
}
Keys.onPressed: {
rect2.state="some"
}
}
}
PathAnimation(路径动画)
在过渡中使用时,可以指定不带起点或终点的路径
属性:
anchrorPoint | 锚点 |
duration | 持续时间,默认值为 250 |
easing | 缓和 |
endRotation | 结束旋转 |
orientation | 方向 |
oritationEntryDuration | 方向进入的持续时间 |
oritationExitDuration | 方向退出的持续时间 |
path | 保存要沿其进行动画处理的路径。 |
target | 项目 |
orientation:enumerate
PathAnimation.Fixed (default) | 不会控制项目的旋转 |
PathAnimation.RightFirst | 项目的右侧将沿着路径引导 |
PathAnimation.LeftFirst | 项目的左侧将沿着路径引导 |
PathAnimation.BottomFirst | 项目的底部将沿着路径引导 |
PathAnimation.TopFirst | 项目的顶部将沿着路径引导 |
例子:
Window {
id:window1
visible: true
width: 700
height: 700
title: qsTr("Hello World")
Rectangle{
id:rect1
width: 100;height: 100;color: "lightBlue"
}
PathAnimation{
id:path
target:rect1
duration: 4000
orientationEntryDuration: 2000
orientationExitDuration: 2000
easing.type: Easing.InQuart
path:Path{
startX: 0 //起点
startY: 0
pathElements: PathArc{ //绘制圆弧
x:360 //终点
y:0
useLargeArc: true
radiusX: 160
radiusY: 160
direction: PathArc.Counterclockwise
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
path.start()//启动路径绘制
}
}
}
参考文章: