Scale Element in StateELement

Question

I can write lines below and got it work:

states: State {
name: "active"; when:myitem.activeFocus;
                                            PropertyChanges { target: myitem; z:1000; scale: 1.2 }
                                            }
                                            transitions: Transition {
                                            NumberAnimation { properties: scale; duration: 1000 }
}

But in these lines i can not give specific origin to scale property!

I found Scale Element

transform: Scale { origin.x: 25; origin.y: 25; xScale: 3}

How can i inject this into state property above, because i want to use "when" property of state,

i want scaling to run on that "when" condition.

Or is there any other way to scale in a condition with specifying origins?

Thanks for any idea.

Answer 1

You should set an id for the Scale element. Then you can change its properties in the "active" state.

Here a minimal working example:

import QtQuick 1.0

Item {
    height: 200; width: 500

    Rectangle {
        id: myitem

        height: 10; width: 100
        anchors.centerIn: parent
        color: "blue"

        transform: Scale { id: scaleTransform; origin.x: 25; origin.y: 25 }

        states: State {
            name: "active"; when: mouseArea.pressed
            PropertyChanges { target: scaleTransform; xScale: 3 }
        }
        transitions: Transition {
            NumberAnimation { property: "xScale"; duration: 1000 }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

Another possibility without states could be:

import QtQuick 1.0

Item {
    height: 200; width: 500

    Rectangle {
        id: myitem

        height: 10; width: 100
        anchors.centerIn: parent
        color: "blue"

        transform: Scale {
            id: scaleTransform
            origin.x: 25; origin.y: 25
            xScale: mouseArea.pressed ? 3 : 1  // <-

            Behavior on xScale {  // for animation
                NumberAnimation { duration: 1000 }
            }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
}

xScale is set to 3 when mouse is pressed, else to 1 (if you don't know the " ternary operation" look here).