Qt 5 の未来は明るいブログ

ズームイン!

Published: 2013-01-29

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 にも対応するとさらに面白い動きになると思います。