QML动画使用总结

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

改变锚点触发动画