From b54f8679745b87cfbacf0ac66becfbfeb730e3cc Mon Sep 17 00:00:00 2001 From: Gunnar Sletta Date: Fri, 13 May 2011 14:46:39 +0200 Subject: updated with nicer background --- .../animatedbackground/AnimatedPresentation.qml | 79 ++++++++++++++++++++++ examples/animatedbackground/BackgroundSwirls.qml | 77 +++++++++++++++++++++ examples/animatedbackground/SlideDeck.qml | 72 +------------------- 3 files changed, 157 insertions(+), 71 deletions(-) create mode 100644 examples/animatedbackground/AnimatedPresentation.qml create mode 100644 examples/animatedbackground/BackgroundSwirls.qml diff --git a/examples/animatedbackground/AnimatedPresentation.qml b/examples/animatedbackground/AnimatedPresentation.qml new file mode 100644 index 0000000..7c02544 --- /dev/null +++ b/examples/animatedbackground/AnimatedPresentation.qml @@ -0,0 +1,79 @@ +import QtQuick 2.0 +import Prezo 1.0 + +Presentation { + + id: deck + + width: 600 + height: 400 + + + property bool inTransition: false; + + property variant fromSlide; + property variant toSlide; + + property int transitionTime: 2000; + + BackgroundSwirls {} + + ShaderEffectItem { + id: effect + anchors.fill: parent + visible: deck.inTransition + property variant source: ShaderEffectSource { sourceItem: fromSlide; smooth: true } + property real ratio: 0 + property real amplitude: 0.1 * ratio + property real frequency: 20 + property real time: 0 + NumberAnimation on time { loops: Animation.Infinite; from: 0; to: Math.PI * 2; duration: 2000 } + fragmentShader: + "uniform highp float amplitude;" + + "uniform highp float frequency;" + + "uniform highp float time;" + + "uniform lowp float ratio;" + + "uniform sampler2D source;" + + "varying highp vec2 qt_TexCoord0;" + + "void main() {" + + " highp vec2 p = sin(time + frequency * qt_TexCoord0);" + + " gl_FragColor = texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x)) * (1. - ratio);" + + "}" + } + + SequentialAnimation { + id: transition + ScriptAction { script: { + deck.inTransition = true + fromSlide.opacity = 0 + toSlide.visible = true + } + } + + ParallelAnimation { + NumberAnimation { target: effect; property: "ratio"; from: 0; to: 1; duration: deck.transitionTime; } + NumberAnimation { target: toSlide; property: "opacity"; from: 0; to: 1; duration: deck.transitionTime; easing.type: Easing.InQuart } + } + + ScriptAction { script: { + deck.inTransition = false + fromSlide.visible = false + fromSlide.opacity = 0 + toSlide.opacity = 1 + } + } + } + + function switchSlides(from, to) + { + if (deck.inTransition) + return false + + deck.fromSlide = from + deck.toSlide = to + + transition.running = true; + + return true + } +} diff --git a/examples/animatedbackground/BackgroundSwirls.qml b/examples/animatedbackground/BackgroundSwirls.qml new file mode 100644 index 0000000..8227932 --- /dev/null +++ b/examples/animatedbackground/BackgroundSwirls.qml @@ -0,0 +1,77 @@ +import QtQuick 2.0 +import Qt.labs.particles 2.0 + +Item { + anchors.fill: parent + + Rectangle { + anchors.fill: parent + gradient: Gradient { + GradientStop { position: 0; color: "lightsteelblue" } + GradientStop { position: 1; color: "black" } + } + } + + Rectangle { + id: colorTableItem + width: 16 + height: 16 + anchors.fill: parent + + property color color1: Qt.rgba(0.8, 0.8, 1, 0.3) + property color color2: Qt.rgba(0.8, 0.8, 1, 0.3) + + gradient: Gradient { + GradientStop { position: 0; color: colorTableItem.color1 } + GradientStop { position: 0.3; color: "transparent" } + GradientStop { position: 0.7; color: "transparent" } + GradientStop { position: 1; color: colorTableItem.color2 } + } + + visible: false + } + + ShaderEffectSource { + id: colorTableSource + sourceItem: colorTableItem + smooth: true + } + + Repeater { + model: 4 + Swirl { + + width: parent.width + anchors.bottom: parent.bottom + height: parent.height / (2 + index) + opacity: 0.3 + speed: (index + 1) / 5 + colorTable: colorTableSource + } + } + + ParticleSystem{ + id: particles + } + ColoredParticle{ + anchors.fill: parent + system: particles + image: "particle.png" + alpha: 0 + colorVariation: 0.3 + } + TrailEmitter{ + anchors.fill: parent + system: particles + particlesPerSecond: Math.sqrt(parent.width * parent.height) / 30 + particleDuration: 2000 + emitting: true + particleSize: 4 + particleSizeVariation: 2 + + acceleration: AngleVector{ angle: 90; angleVariation: 360; magnitude: 20; } + speed: AngleVector{ angle: -90; angleVariation: 360; magnitude: 10; } + + } + +} diff --git a/examples/animatedbackground/SlideDeck.qml b/examples/animatedbackground/SlideDeck.qml index 6abc374..4b763cf 100644 --- a/examples/animatedbackground/SlideDeck.qml +++ b/examples/animatedbackground/SlideDeck.qml @@ -3,80 +3,10 @@ import Prezo 1.0 import Qt.labs.particles 2.0 -Presentation { +AnimatedPresentation { width: 640 height: 360 - Rectangle { - anchors.fill: parent - gradient: Gradient { - GradientStop { position: 0; color: "lightsteelblue" } - GradientStop { position: 1; color: "black" } - } - } - - Rectangle { - id: colorTableItem - width: 16 - height: 16 - anchors.fill: parent - - property color color1: Qt.rgba(0.8, 0.8, 1, 0.5) - property color color2: Qt.rgba(0.8, 0.8, 1, 0.5) - - gradient: Gradient { - GradientStop { position: 0; color: colorTableItem.color1 } - GradientStop { position: 0.3; color: "transparent" } - GradientStop { position: 0.7; color: "transparent" } - GradientStop { position: 1; color: colorTableItem.color2 } - } - - visible: false - } - - ShaderEffectSource { - id: colorTableSource - sourceItem: colorTableItem - smooth: true - } - - Repeater { - model: 4 - Swirl { - - width: parent.width - anchors.bottom: parent.bottom - height: parent.height / (2 + index) - opacity: 0.3 - speed: index + 1 - colorTable: colorTableSource - } - } - - ParticleSystem{ - id: particles - } - ColoredParticle{ - anchors.fill: parent - system: particles - image: "particle.png" - alpha: 0 - colorVariation: 0.3 - } - TrailEmitter{ - anchors.fill: parent - system: particles - particlesPerSecond: Math.sqrt(parent.width * parent.height) / 30 - particleDuration: 2000 - emitting: true - particleSize: 4 - particleSizeVariation: 2 - - acceleration: AngleVector{ angle: 90; angleVariation: 360; magnitude: 20; } - speed: AngleVector{ angle: -90; angleVariation: 360; magnitude: 10; } - - } - property color textColor: "white" Slide { -- cgit v1.2.3