Question

I want to make a QML animation with QML Image element height property.
But negative value for Image height property does not work in Timer.

Can you tell me what is wrong with this animation?

import QtQuick 1.1

Rectangle {
    width: 300
    height: 300

    property int mySize: 10

    Image {
        x: 150; y: 150
        width: 20
        height: -mySize       // animation does not work in Timer, Why?
        //height: mySize      // animation works in Timer
        source: "Bar.jpg"
    }
    Timer {
        interval: 200
        running: true
        repeat: true
        onTriggered: mySize +=5
    }
}

Answer 1

First, (to answer your question), you can’t use negative sizes. Use scaling instead, which supports negative values.

Scale {
    yScale: ...                // <-- change this value; 1 = original size

    Image {
        x: 150; y: 150
        width: 20; height: 10  // <-- use constant size
        source: "Bar.jpg"
    }
}

Second, you clearly should read about animations in QML. In QML, you don’t need timers to implement animations. The idea is that you only tell the start and end value of the property to be animated, and activate this animation. You can also configure the speed / duration of the animation and even the easing curve (to slow the animation down at the end and fancy stuff like bouncing…). One example could be:

import QtQuick 1.1

Rectangle {
    width: 300; height:300

    Scale {
        Image {
            x: 150; y: 150
            width: 20; height: 10
            source: "Bar.jpg"
        }

        NumberAnimation on yScale {
            from: 1
            to: -1
            running: ...     // <-- Animation is running while expression is true
        }
    }
}

Or, if you don’t want to use an expression with property binding on Animation.running, you can also use the methods Animation.start(), stop(), etc. (Set an id on the animation to make it addressable from JavaScript.)

But understanding and working with property bindings in expressions is a major part of QML, so you should try to express what you want using expressions, not using method calls, events, conditions, whatever. That’s the way QML is and why it is beautiful. 😉