qml
생기

간단한 숫자 애니메이션

가장 기본적인 애니메이션 중 하나가 NumberAnimation 입니다. 이 애니메이션은 항목의 속성 값을 초기 상태에서 최종 상태로 변경하여 작동합니다. 다음과 같은 완전한 예제를 고려하십시오.

import QtQuick 2.7    
import QtQuick.Controls 2.0    

ApplicationWindow {
    visible: true
    width: 400
    height: 640

    Rectangle{
        id: rect
        anchors.centerIn: parent
        height: 100
        width: 100
        color: "blue"
        MouseArea{
            anchors.fill: parent
            onClicked: na.running = true
        }

        NumberAnimation {
            id: na    //ID of the QML Animation type  
            target: rect    //The target item on which the animation should run  
            property: "height"    //The property of the target item which should be changed by the animator to show effect  
            duration: 200    //The duration for which the animation should run  
            from: rect.height    //The initial numeric value of the property declared in 'property'
            to: 200    //The final numeric value of the property declared in 'property'
        }
    }
}

행동 기반 애니메이션

비헤이비어 기반 애니메이션을 사용하면 속성이 변경되면 변경 사항이 시간 경과에 따라 애니메이션으로 지정되어야한다는 것을 지정할 수 있습니다.

ProgressBar {
    id: progressBar
    from: 0
    to: 100
    Behavior on value {
        NumberAnimation {
            duration: 250
        }
    }
}

이 예제에서 진행 막대 값이 변경되면 변경 사항은 250ms 이상 움직입니다.