QML动画使用总结

来源：互联网发布：淘宝开店有年龄限制吗编辑：程序博客网时间：2024/04/29 03:35

QML使用动画元素改变对象的属性值，并通过插值使属性的改变平滑过渡。

Rectangle{   id: box   width: 100; height: 100   color: "blue"   opacity: 1.0}

使用动画的方法：

直接使用属性动画

PropertyAnimation{id: animateColor; target: box; properties:”color”; to:” green”; duration:100}
NumerAnimation{id: animateOpacity; target: box; properties: “opacity”; to: 0; duration: 100; loops: Animation.Infinite; easing{type:Easing.OutBack; overshoot: 500}
animateColor.start();
animateOpacity.start();

注意：使用特定动画元素（NumberAnimation, ColorAnimation, RotationAnimation, ParentAnimation, ParentAnimation）比单独使用属性动画元素(PropertyAnimation)会更加有效率

使用Transition和State

State变化会导致属性值突然变化，使用Transition并引入动画可以使这种变化平滑

states:[    State{        name:"pressed"        PropertyChanges{ target: box; color:"blue"}    }    State{        name:"released"        PropertyChanges{ target: box; color:"red"}    }]transitions:[    Transition{        from: "pressed"        to: "released"        ColorAnimation{ target: box; duration: 100}    }]

使用Behaviors定义默认动画

Behavior on y{    animation: NumberAnimation{        id: bouncebehavior        easing{type: Easing.OutElastic; amplitude: 1.0; period: 0.5}    }}Behavior on x{    animation: animationid    }Behavior {    ColorAnimation{ target: box; duration:100}}

结合ParallelAnimation和SequenceAnimation使用动画

SequnceAnimation/ParallelAnimation{    id: playbanner    running: false    NumberAnimation{target: xx; property: "xx"; to:xx; duration:200}    NumberAnimation{target: xx; property: "xx"; to:xx; duration:200}}

动画控制

播放控制

所有的动画都继承自Animation，所以能够通过start(), stop(), resume(), pause(), restart(), complete() 能够控制动画

弹性控制(Easing)

不常用的Animation Elements

PauseAnimation

用于将动画停止一段时间
SequenceAnimation{
NumberAnimation{}
PauseAnimation{}
NumberAnimation{}
}

ScriptAction

用在AnimationGroup中
SequenceAnimation{
NumberAnimation{}
ScriptAction{ script: scriptfunc();}
NumberAnimation{}
}
或者用在Transition/State中结合StateChangeScript使用
states:[
State{
name: “state1”
StateChangeScript{
name: “myscript”
script: scriptfunc();
}
}
]
transitions: [
Transition{
SequentialAnimation{
NumberAnimation{}
ScriptAction{scriptName: “myscript”}
}
}
]

PropertyAction

用于在动画中立即改变属性
SequentialAnimation{
NumberAnimation{}
PropertyAction{ target:img; property:”smooth”; value:true}
}
或者在Transition中，改变Animation的默认行为
states: [
State{name:”rotated”;
propertyChanges{target: rotation:180; transformOrigin:Item.BottomRight}
}
]
transitions:[
Transition{
PropertyAction{
target:
property:”transformOrigin”
}
RotationAnimation{
duration:1000
direction: RotationAnimation.Couterclockwise
}
}
]
上面若没有PropertyAction, 则会先执行RotationAnimation，完成后才执行propertyChanges。使用PropertyAction能够改变这种顺序

SmoothedAnimation

一种特殊的NumberAnimation，更加优化

SpringAnimation

提供弹簧的行为

ParentAnimation

改变parent触发动画

AnchorAnimation

改变锚点触发动画

0 0