1. 程式人生 > >QML中ParallelAnimation組合動畫

QML中ParallelAnimation組合動畫

組合動畫有兩種,這個只是其中一種而已,ParallelAnimation自己並不會產生動畫,而是把其它的動畫放進來。另外呢,在ParallelAnimation裡面的動畫也都是同時執行的。當然,別的方法也能實現,但是在大部分時候ParallelAnimation的方法是比其它方式更好的。

一個小矩形框邊移動邊變色的例子:

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true
    width: 300
    height: 300
    Rectangle{
    id:rect
    width: 100
    height: 100
    color: "red"
    }

   ParallelAnimation{
       id:test
       NumberAnimation {
           target: rect
           property: "x"
           duration: 2000
           easing.type: Easing.InOutQuad
           from:0
           to:200
       }
       NumberAnimation {
           target: rect
           property: "y"
           duration: 2000
           easing.type: Easing.InOutQuad
           from:0
           to:200
       }
       ColorAnimation {
           target: rect
           property: "color"
           duration: 2000
           easing.type: Easing.InOutQuad
           from:"red"
           to:"blue"
       }
   }
   MouseArea{
   anchors.fill: parent
   onClicked: test.start()
   }
}

效果圖:

我在上面定義了三個動畫,在這裡他們是同時在變化的。