ズームイン！

Qt ロゴをクリックしたときに、そのロゴにズームインしていくような動きを QtQuick で作ってみました。

import QtQuick 2.0

Item {
    id: root
    width: 360
    height: 360

    property int count: 4

    Grid {
        columns: root.count

        Repeater {
            model: root.count * root.count

            MouseArea {
                id: me
                width: root.width / root.count
                height: root.width / root.count

                Image {
                    anchors.fill: parent
                    source: 'http://qt5.jp/upload/29/logo_qt.png'
                    smooth: true
                    fillMode: Image.PreserveAspectFit
                }
                onClicked: {
                    if (root.to) {
                        root.to = null
                    } else {
                        root.to = me
                    }
                }
            }
        }
    }

    property Item to

    transform: [
        Scale { id: rootScale }
        , Translate { id: rootTranslate }
    ]

    states: State {
        when: root.to !== null
        PropertyChanges {
            target: rootTranslate
            x: -root.to.x * rootScale.xScale
            y: -root.to.y * rootScale.yScale
        }
        PropertyChanges {
            target: rootScale
            xScale: root.width / root.to.width
            yScale: root.height / root.to.height
        }
    }

    transitions: Transition {
        NumberAnimation {
            properties: 'x, y, xScale, yScale'
            easing.type: Easing.InExpo
        }
    }
}

Item 要素の transform プロパティ を使ってスケールと位置を変えています。アニメーションの easing.type によって結構雰囲気が変わりますね。

Rotation にも対応するとさらに面白い動きになると思います。