Cube-like animation



  • Hello,

    Im trying to create a effect that simulates cube rotation. Ive 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"
                }
            }
        }
    }
    

    }

    @


Log in to reply
 

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