# Cube-like animation

• Hello,

I`m trying to create a effect that simulates cube rotation. I`ve tried with transformation "Rotation":http://doc.qt.nokia.com/4.7-snapshot/qml-rotation.html but it`s not possible to set origin.z, so I copied "QGraphicsRotation":http://doc.qt.nokia.com/4.7-snapshot/qgraphicsrotation.html and modified

@
void CubeRotation::applyTo(QMatrix4x4 *matrix) const
{
if (m_angle == 0. || m_axis.isNull())
return;

``````matrix->translate(m_origin);
matrix->rotate(m_angle, m_axis.x(), m_axis.y(), m_axis.z()); // in QGraphicsRotation this line is matrix->projectedRotate(m_angle, m_axis.x(), m_axis.y(), m_axis.z())
matrix->translate(-m_origin);
``````

}
@

because as far as I understand projectedRotate() removes z translation.

In QML:

@
transform: CubeRotation {
angle: 0

``````            origin.x: grid_view1.width / 2.0
origin.y: grid_view1.height / 2.0
origin.z: grid_view1.width / 2.0

axis { x: 0; y: 1; z: 0 }

NumberAnimation on angle {
duration: 5000
loops: Animation.Infinite
from: -90
to: 90
}
}
``````

@

but it doesn`t work. What am I missing?

• If I was you I would be looking in Qt3D

• Should be easy to do with vertex shader program ( ShaderEffectItem qml element ).

• Hello,

Qt3D does not work for me. I have only two sides not a whole cube.

I`ve tried with ShaderEffectItem but I can figure out how to calculate transformation matrixes.

• For those who still are looking for an answer to this here's a simple example in Qt5

@import QtQuick 2.2

Rectangle {
id: root
width: 360
height: 360
property int rotationAngle

``````MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}

Rectangle{
id: rectA
width: 200
height: 200
anchors.centerIn: parent
color: "red"
scale: 1- Math.abs(Math.sin(rotA.angle/180*Math.PI)*0.075)
anchors.horizontalCenterOffset: -Math.sin(rotA.angle/180*Math.PI)*rectA.width/2
transform: Rotation{
id: rotA
angle: rotationAngle+90
axis { x: 0; y: 1; z: 0 }
origin { x:rectA.width/2; y:rectA.height/2;  }
}
}

Rectangle{
id: rectB
width: 200
height: 200
anchors.centerIn: parent
color: "blue"
scale: 1- Math.abs(Math.sin(rotB.angle/180*Math.PI)*0.075)
anchors.horizontalCenterOffset: -Math.sin(rotB.angle/180*Math.PI)*rectB.width/2
transform: Rotation{
id: rotB
angle: rotationAngle
axis { x: 0; y: 1; z: 0 }
origin { x:rectB.width/2; y:rectB.height/2; }
}
}

NumberAnimation{
property int side
from: 90
to: 180
running: true
target: root
properties: "rotationAngle"
duration: 1000
onRunningChanged: {
if (!running){
restart()
side = (side +1) % 2
if (side===1){
rectA.color = "blue"
rectB.color = "red"
}else{
rectA.color = "red"
rectB.color = "blue"
}
}
}
}
``````

}

@

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.