examples/demos/tweetsearch/content/FlipBar.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the examples of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42
  43 Item {
  44     id: container
  45     property int animDuration: 300
  46     property int wiggleDuration: 0 // 2x time spent each side to wiggle away before shrinking in
  47     property real wiggleRoom: 0 // Size on each side it moves away before shrinking during the transition
  48     property real squeezeFactor: 0.1 // More give a greater squeeze during transition (0.0 for none)
  49     property Item above: Item {}
  50     property Item front: Item {}
  51     property Item back: Item {}
  52     property real factor: 0.1 // amount the edges fold in for the 3D effect
  53     property alias delta: effect.delta
  54
  55     property Item cur: frontShown ? front : back
  56     property Item noncur:frontShown ? back : front
  57     function swap() {
  58         var tmp = front;
  59         front = back;
  60         back = tmp;
  61         resync();
  62     }
  63
  64     width: cur.width
  65     height: cur.height
  66     onFrontChanged: resync();
  67     onBackChanged: resync();
  68     function resync() {//TODO: Are the items ever actually visible?
  69         back.parent = container;
  70         front.parent = container;
  71         frontShown ? back.visible = false : front.visible = false;
  72     }
  73     property bool frontShown: true
  74     Rectangle {
  75         anchors.fill: parent
  76         color: "white"
  77     }
  78     function flipUp(start) {
  79         effect.visible = true;
  80         effect.sourceA = effect.source1
  81         effect.sourceB = effect.source2
  82         if (start == undefined)
  83             start = 1.0;
  84         deltaAnim.from = start;
  85         deltaAnim.to = 0.0
  86         dAnim.start();
  87         frontShown = false;
  88         sizeAnim.start();
  89     }
  90     function flipDown(start) {
  91         effect.visible = true;
  92         effect.sourceA = effect.source1
  93         effect.sourceB = effect.source2
  94         if (start == undefined)
  95             start = 0.0;
  96         deltaAnim.from = start;
  97         deltaAnim.to = 1.0
  98         dAnim.start();
  99         frontShown = true;
 100         sizeAnim.start();
 101     }
 102     SequentialAnimation on height {
 103         id: sizeAnim
 104         running: false
 105         //Note: front has already swapped around when we start
 106         NumberAnimation {
 107             duration: wiggleDuration
 108             to: noncur.height + wiggleRoom
 109         }
 110         NumberAnimation {
 111             duration: animDuration/2
 112             to: noncur.height - wiggleRoom * 2
 113         }
 114         NumberAnimation {
 115             duration: animDuration/2
 116             to: cur.height + wiggleRoom
 117         }
 118         NumberAnimation {
 119             duration: wiggleDuration
 120             to: cur.height
 121         }
 122     }
 123     Binding {
 124         target: above
 125         property: "y"
 126         value: -(container.height - effect.height) / 2
 127     }
 128     ShaderEffect {
 129         id: effect
 130         //Magic is a quadratic coefficient so that we get a down pointed parabola based on delta with value +1.0 for delta 0 and 1
 131         //property real magic_x: delta - 0.5
 132         //property real magic: (magic_x * magic_x) * 2 + 0.5
 133         width: cur.width
 134         height: cur.height// * magic*squeezeFactor
 135         property real factor: container.factor * width
 136         property real delta: 1.0
 137         mesh: GridMesh { resolution: Qt.size(8,2) }//1x2 is all that's needed for the rect, but proper contents interpolation wants more
 138         SequentialAnimation on delta {
 139             id: dAnim
 140             running: false
 141             PauseAnimation { duration: wiggleDuration }
 142             NumberAnimation {
 143             id: deltaAnim
 144             duration: animDuration//expose anim
 145             //easing.type: Easing.OutQuart
 146             }
 147         }
 148         property variant sourceA: source1
 149         property variant sourceB: source1
 150         property variant source1: ShaderEffectSource {
 151             sourceItem: front
 152             hideSource: effect.visible
 153         }
 154         property variant source2: ShaderEffectSource {
 155             sourceItem: back
 156             hideSource: effect.visible
 157         }
 158
 159         fragmentShader: "
 160             uniform lowp float qt_Opacity;
 161             uniform sampler2D sourceA;
 162             uniform sampler2D sourceB;
 163             uniform highp float delta;
 164             varying highp vec2 qt_TexCoord0;
 165             void main() {
 166             /* Pre-Vertex
 167                 highp vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y / delta, qt_TexCoord0.x, (qt_TexCoord0.y-delta)/(1.0-delta));
 168                 //highp float shade = (1.0 - qt_TexCoord0.y) * delta;
 169                 //highp float shade = (1.0 - tex.w) * delta;
 170                 highp float shade = vec4(delta,delta,delta,0.0) ;
 171                 highp vec4 col;
 172                 if (delta > qt_TexCoord0.y)
 173                     col = texture2D(sourceA, tex.xy);
 174                 else
 175                     col = texture2D(sourceB, tex.zw) * (vec4(1.0,1.0,1.0,1.0) - shade);
 176                 gl_FragColor = vec4(col.x, col.y, col.z, 1.0) * qt_Opacity;
 177                 //gl_FragColor = vec4(0.0,1.0,delta,1.0) * qt_Opacity;
 178             */
 179                 highp vec4 tex = vec4(qt_TexCoord0.x, qt_TexCoord0.y * 2.0, qt_TexCoord0.x, (qt_TexCoord0.y-0.5) * 2.0);
 180                 highp float shade = clamp(delta*2.0, 0.5, 1.0);
 181                 highp vec4 col;
 182                 if (qt_TexCoord0.y < 0.5) {
 183                     col = texture2D(sourceA, tex.xy) * (shade);
 184                     //w governed by shade
 185                 } else {
 186                     col = texture2D(sourceB, tex.zw) * (1.5 - shade);
 187                     col.w = 1.0;
 188                 }
 189                 gl_FragColor = col * qt_Opacity;
 190             }
 191         "
 192         property real h: height
 193         vertexShader: "
 194         uniform highp float delta;
 195         uniform highp float factor;
 196         uniform highp float h;
 197         uniform highp mat4 qt_Matrix;
 198         attribute highp vec4 qt_Vertex;
 199         attribute highp vec2 qt_MultiTexCoord0;
 200         varying highp vec2 qt_TexCoord0;
 201         void main() {
 202             highp vec4 pos = qt_Vertex;
 203             if (qt_MultiTexCoord0.y == 0.0)
 204                 pos.x += factor * (1. - delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
 205             else if (qt_MultiTexCoord0.y == 1.0)
 206                 pos.x += factor * (delta) * (qt_MultiTexCoord0.x * -2.0 + 1.0);
 207             else // (qt_MultiTexCoord0.y == 0.5 )
 208                 pos.y = delta * h;
 209             gl_Position = qt_Matrix * pos;
 210             //highp vec2 tex = qt_MultiTexCoord0;
 211             qt_TexCoord0 = qt_MultiTexCoord0;
 212         }"
 213
 214     }
 215 }