shader实现弯曲收缩效果

import QtQuick 2.2

//Rectangle {
//    width: 800; height: 480
//    color: '#1e1e1e'

//    Image {
//        id: sourceImage
//        width: 320; height: width
//        source: "qrc:/3.jpg"
//        visible: false
//    }
//    Rectangle {
//        width: 320; height: width
//        anchors.centerIn: parent
//        color: '#333333'
//    }
//    ShaderEffect {
//        id: genieEffect
//        width: 320; height: width
//        anchors.centerIn: parent
//        property variant source: sourceImage
//        property real minimize: 0.0
//        property bool minimized: false
//        MouseArea {
//            anchors.fill: parent
//            onClicked: genieEffect.minimized = !genieEffect.minimized
//        }

//                SequentialAnimation on minimize {
//                    id: animMinimize
//                    running: genieEffect.minimized
//                    PauseAnimation { duration: 300 }
//                    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
//                    PauseAnimation { duration: 1000 }
//                }

//                SequentialAnimation on minimize {
//                    id: animNormalize
//                    running: !genieEffect.minimized
//                    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
//                    PauseAnimation { duration: 1300 }
//                }
//        vertexShader: "
//            uniform highp mat4 qt_Matrix;
//            uniform highp float minimize;
//            uniform highp float height;
//            uniform highp float width;
//            attribute highp vec4 qt_Vertex;
//            attribute highp vec2 qt_MultiTexCoord0;
//            varying highp vec2 qt_TexCoord0;
//            void main() {
//                qt_TexCoord0 = qt_MultiTexCoord0;
//                // M1>>
//                highp vec4 pos = qt_Vertex;
//                pos.y = mix(qt_Vertex.y, 320.0, minimize);//320.0=height
//                //highp float t = pos.y / height;
//                pos.x = mix(qt_Vertex.x, width,  minimize);//t * minimize    pos.x = qt_Vertex.x(1-minimize) + width*minimize //width*minimize偏移量
//                gl_Position = qt_Matrix * pos;
//        }"
//    }
//}

Rectangle {
    width: 800; height: 480
    color: '#1e1e1e'

    Image {
        id: sourceImage
        width: 320; height: width
        source: "qrc:/3.jpg"
        visible: false
    }
    Rectangle {
        width: 320; height: width
        anchors.centerIn: parent
        color: '#333333'
    }
    ShaderEffect {
        id: genieEffect
        width: 320; height: width
        anchors.centerIn: parent
        property variant source: sourceImage
        mesh: GridMesh { resolution: Qt.size(10, 10) }
        property real minimize: 0.0
        property bool minimized: false
        MouseArea {
            anchors.fill: parent
            onClicked: genieEffect.minimized = !genieEffect.minimized
        }
        property real side: 0.5
        property real bend: 0.0
        // change to parallel animation
        ParallelAnimation {
            id: animMinimize
            running: genieEffect.minimized
            SequentialAnimation {
                PauseAnimation { duration: 300 }
                NumberAnimation {
                    target: genieEffect; property: 'minimize';
                    to: 1; duration: 700;
                    easing.type: Easing.InOutSine
                }
                PauseAnimation { duration: 1000 }
            }
            // adding bend animation
            SequentialAnimation {
                NumberAnimation {
                    target: genieEffect; property: 'bend'
                    to: 1; duration: 700;
                    easing.type: Easing.InOutSine }
                PauseAnimation { duration: 1300 }
            }
        }
        ParallelAnimation {
            id: animMinimizeMax
            running: !genieEffect.minimized
            SequentialAnimation {
                PauseAnimation { duration: 300 }
                NumberAnimation {
                    target: genieEffect; property: 'minimize';
                    to: 0; duration: 700;
                    easing.type: Easing.InOutSine
                }
                PauseAnimation { duration: 1000 }
            }
            // adding bend animation
            SequentialAnimation {
                PauseAnimation { duration: 500 }
                NumberAnimation {
                    target: genieEffect; property: 'bend'
                    to: 0; duration: 700;
                    easing.type: Easing.InOutSine }
                PauseAnimation { duration: 300 }
            }
        }

        vertexShader: "
            uniform highp mat4 qt_Matrix;
            uniform highp float minimize;
            uniform highp float bend;
            uniform highp float height;
            uniform highp float side;
            uniform highp float width;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 qt_TexCoord0;
            void main() {
                qt_TexCoord0 = qt_MultiTexCoord0;
                // M1>>
                highp vec4 pos = qt_Vertex;
                pos.y = mix(qt_Vertex.y, 320.0, minimize);//320.0=height
                highp float t = pos.y / height;
                t = (3.0 - 2.0 * t) * t * t;
                pos.x = mix(qt_Vertex.x,side* width, t * bend);
                gl_Position = qt_Matrix * pos;
        }"
    }
}