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 से अधिक एनिमेटेड होगा