剧幕效果（Curtain Effect）

在最后的自定义效果例子中，我们将带来一个剧幕效果。这个效果是2011年5月Qt实验室发布的着色器效果中的一部分。目前网址已经转到blog.qt.digia.com，不知道还能不能找到。

剧幕效果（Curtain Effect） - 图1

当时我非常喜欢这些效果，剧幕效果是我最喜爱的一个。我喜欢剧幕打开然后遮挡后面的背景对象。

我将代码移植适配到Qt5上，这非常简单。同时我做了一些简化让它能够更好的展示。如果你对整个例子有兴趣，可以访问Qt实验室的博客。

只有一个小组件作为背景，剧幕实际上是一张图片，叫做fabric.jpg，它是ShaderEffect的资源。整个效果使用顶点着色器来摆动剧幕，使用片段着色器提供阴影的效果。下面是一个简单的图片，让你更加容易理解代码。

剧幕效果（Curtain Effect） - 图2

剧幕的波形阴影通过一个在剧幕宽度上的sin曲线使用7的振幅来计算（7*PI=221.99..）另一个重要的部分是摆动，当剧幕打开或者关闭时，使用动画来播放剧幕的topWidth。bottomWidth使用SpringAnimation来跟随topWidth变化。这样我们就能创建出底部摆动的剧幕效果。计算得到的swing提供了摇摆的强度，用来对顶点的y值进行插值。

剧幕效果放在CurtainEffect.qml组件中，fabric图像作为纹理资源。在阴影的使用上没有新的东西加入，唯一不同的是在顶点着色器中操作gl_Postion和片段着色器中操作gl_FragColor。

  1. import QtQuick 2.0
  3. ShaderEffect {
  4.     anchors.fill: parent
  6.     mesh: GridMesh {
  7.         resolution: Qt.size(50, 50)
  8.     }
  10.     property real topWidth: open?width:20
  11.     property real bottomWidth: topWidth
  12.     property real amplitude: 0.1
  13.     property bool open: false
  14.     property variant source: effectSource
  16.     Behavior on bottomWidth {
  17.         SpringAnimation {
  18.             easing.type: Easing.OutElastic;
  19.             velocity: 250; mass: 1.5;
  20.             spring: 0.5; damping: 0.05
  21.         }
  22.     }
  24.     Behavior on topWidth {
  25.         NumberAnimation { duration: 1000 }
  26.     }
  29.     ShaderEffectSource {
  30.         id: effectSource
  31.         sourceItem: effectImage;
  32.         hideSource: true
  33.     }
  35.     Image {
  36.         id: effectImage
  37.         anchors.fill: parent
  38.         source: "assets/fabric.jpg"
  39.         fillMode: Image.Tile
  40.     }
  42.     vertexShader: "
  43.         attribute highp vec4 qt_Vertex;
  44.         attribute highp vec2 qt_MultiTexCoord0;
  45.         uniform highp mat4 qt_Matrix;
  46.         varying highp vec2 qt_TexCoord0;
  47.         varying lowp float shade;
  49.         uniform highp float topWidth;
  50.         uniform highp float bottomWidth;
  51.         uniform highp float width;
  52.         uniform highp float height;
  53.         uniform highp float amplitude;
  55.         void main() {
  56.             qt_TexCoord0 = qt_MultiTexCoord0;
  58.             highp vec4 shift = vec4(0.0, 0.0, 0.0, 0.0);
  59.             highp float swing = (topWidth - bottomWidth) * (qt_Vertex.y / height);
  60.             shift.x = qt_Vertex.x * (width - topWidth + swing) / width;
  62.             shade = sin(21.9911486 * qt_Vertex.x / width);
  63.             shift.y = amplitude * (width - topWidth + swing) * shade;
  65.             gl_Position = qt_Matrix * (qt_Vertex - shift);
  67.             shade = 0.2 * (2.0 - shade ) * ((width - topWidth + swing) / width);
  68.         }"
  70.     fragmentShader: "
  71.         uniform sampler2D source;
  72.         varying highp vec2 qt_TexCoord0;
  73.         varying lowp float shade;
  74.         void main() {
  75.             highp vec4 color = texture2D(source, qt_TexCoord0);
  76.             color.rgb *= 1.0 - shade;
  77.             gl_FragColor = color;
  78.         }"
  79. }

这个效果在curtaindemo.qml文件中使用。

  1. import QtQuick 2.0
  3. Rectangle {
  4.     id: root
  5.     width: 480; height: 240
  6.     color: '#1e1e1e'
  8.     Image {
  9.         anchors.centerIn: parent
  10.         source: 'assets/wiesn.jpg'
  11.     }
  13.     CurtainEffect {
  14.         id: curtain
  15.         anchors.fill: parent
  16.     }
  18.     MouseArea {
  19.         anchors.fill: parent
  20.         onClicked: curtain.open = !curtain.open
  21.     }
  22. }

剧幕效果通过自定义的open属性打开。我们使用了一个MouseArea来触发打开和关闭剧幕。