代码片段:
shaders.qml
mport QtQuick 1.0
Rectangle {
property int current : 0 //当前tab页
width: 640
height: 480
//主页面
Rectangle {
id: tabContentArea
width: parent.width
anchors.top: parent.top
anchors.bottom: tabButtonArea.top
Repeater {
model: tabsModel
}
}
//包含可视化的元素,不需要delegate
VisualItemModel {
id: tabsModel
Collapsing { }
Images { }
Interpolate { }
Bouncing { }
}
//tab区域
Rectangle {
id: tabButtonArea
height: 64
width: parent.width
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
//定义一个颜色渐变
gradient: Gradient {
GradientStop {position: 0.0; color: "#CCCCCC"}
GradientStop {position: 1.0; color: "#000000"}
}
//定义一个tab组件
Component {
id: tabButton
Rectangle {
height: tabButtonArea.height
width: tabs.width / tabsModel.count
color: "transparent"
Image {
source: tabsModel.children[index].icon
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 4
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
color: "white"
text: tabsModel.children[index].name
}
MouseArea {
anchors.fill: parent
onClicked: { tabClicked(index); }
}
}
}
Row {
id: tabs
anchors.fill: parent
Repeater {
model: tabsModel.count
delegate: tabButton
}
}
}
//tab点击事件
function tabClicked(index)
{
tabs.children[current].color = "transparent";
tabsModel.children[current].visible = false;
current = index;
tabs.children[current].color = "#30ffffff";
tabsModel.children[current].visible = true;
}
//当组件加载完成后调用
//设置第一个为默认当前
Component.onCompleted:
{
for(var i = 0; i < tabsModel.children.length; i++)
tabsModel.children[i].visible = false;
tabClicked(current);
}
}
Collapsing.qml
import QtQuick 1.0
import Qt3D 1.0
Viewport {
property string name: "Collapsing Shader"
property string icon: "images/teapot-logo.png"
width: 640; height: 480
Item3D {
mesh: Mesh { source: "meshes/teapot.bez" }
effect: program
//旋转
transform: Rotation3D {
angle:45
NumberAnimation on angle{
running: true
loops: Animation.Infinite
from: 0; to: 360; duration: 8000
}
axis: Qt.vector3d(1, -0.3, 0)
}
//Qt3D中使用ShaderProgram元素来着色
ShaderProgram {
id: program
property real collapseFactor : 0.0
//纹理
texture: "images/qtlogo.png"
//爆炸效果
SequentialAnimation on collapseFactor {
running: true
loops: Animation.Infinite
PauseAnimation { duration: 700 }
NumberAnimation { from: 0.0; to: 1.0; duration: 1500; easing.type:"OutBounce" }
PauseAnimation { duration: 700 }
NumberAnimation { from: 1.0; to: 0.0; duration: 1500; easing.type:"OutBounce" }
}
//颜色变化
SequentialAnimation on color{
running: true
loops: Animation.Infinite
ColorAnimation { from: "red"; to: "green"; duration: 500 }
ColorAnimation { from: "green"; to: "red"; duration: 500 }
}
//顶点着色器运行在在一个模型中的每个顶点(例如,一个立方体的8个角)来计算各点的最终位置
vertexShader: "
attribute highp vec4 qt_Vertex;
attribute highp vec4 qt_MultiTexCoord0;
uniform mediump mat4 qt_ModelViewProjectionMatrix;
varying highp vec4 texCoord;
uniform highp float collapseFactor;
void main(void)
{
// Interpolate between the actual position of the input vertex
// and treating the tex-coordinates as vertex positions to
// create a neat collapsing effect.
vec4 workingPosition = mix( qt_Vertex, vec4(-qt_MultiTexCoord0.xyz, 1.0) , collapseFactor);
gl_Position = qt_ModelViewProjectionMatrix * workingPosition;
texCoord = -qt_MultiTexCoord0;
}
"
//片段着色器运行在屏幕每个可见像素上,来计算它的颜色
fragmentShader: "
varying highp vec4 texCoord;
uniform sampler2D qt_Texture0;
uniform mediump vec4 qt_Color;
void main(void)
{
mediump vec4 col = texture2D(qt_Texture0, texCoord.st);
gl_FragColor = vec4(clamp(qt_Color.rgb * (1.0 - col.a) +
col.rgb, 0.0, 1.0), 1.0);
}
"
}
}
}
1. 动画效果
SequentialAnimationon collapseFactor ??
问题:
1. vertexShader,fragmentShader 具体细节可以看OpenGL着色语言