qml image size negative value - image

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. ;)