qml动画实现..docVIP

动画应用场景有下面几种： 首先假设一个Rectangle，动画是要改变它的x和y值 1，Rectangle一旦被创建，就要移动到一个特定的位置 2，动画只有在某一个特定的外部行为触发时候才会被触发，例如，鼠标单击某一个控件时候，产生动画，使目标移动到指定的位置 3，只有在某一个特定的信号后才触发 4，做为一个独立的动画，虽然没有绑定rectangle的运动，但是可以在脚本中加载，开始和停止 5，只有在状态改变时候才会触发 6，只有在某一个属性改变时候才触发，无论这个属性是通过什么样的方法来改变的 7，在一个特定的信号处理器中创建，当接收到对应的信号时候就触发，类似于3 下面分别用代码来看几种实现方法： 【1】首先是对第一种场景 Rectangle{ color:red width:360 height:50 PropertyAnimation on x{to: 50 ;duration:1000; loops:Animation.Infinite } PropertyAnimation on y{to: 250 ;duration:1000; loops:Animation.Infinite } } Rectangle一旦被创建，就立刻从（0，0）坐标移动到（50，250），在一秒时间内 【2】第二种场景代码，行为动画，在某一个属性值发生变化时候触发 Rectangle{ color:red width:360 height:50 id:rect Behavior on x { PropertyAnimation{ duration : 1000 } } Behavior on y { PropertyAnimation{ duration : 1000 } } } MouseArea{ anchors.fill: parent onClicked:{ rect.x=mouse.x; rect.y=mouse.y; } } 这段代码实现了，在点击了屏幕上的一点后，rect会在一秒的时间内触发动画，到达鼠标所点击的位置，因为在onClicked里面，我们修改了rect的x和y值。 【3】在信号处理器中触发动画 Rectangle{ color:red width:360 height:50 id:rect MouseArea{ anchors.fill: parent onClicked: PropertyAnimation{ target:rect ; properties:y to:250 duration:1000 } } } 当点击rect的时候，就会触发动画，使rect的y从0运动到250 【4】动画作为一个独立的动画，可以像创建普通的QML对象一样创建，而不需要绑定特定的对象和属性。 Rectangle{ color:red width:360 height:50 id:rect PropertyAnimation{ id:animation target:rect properties: width duration: 1000 } MouseArea{ anchors.fill: parent onClicked: { animation.to=50 animation.running=true;