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: 0origin.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 rotationAngleMouseArea { 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" } } } }
}
@