Nebula Effect: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:snippets]]
[[Category:snippets]]


Ported from this example in HTML5 "example":http://www.professorcloud.com/mainsite/canvas-nebula.htm, "Source code":https://github.com/skhaz/qtquick-nebula
Ported from this example in HTML5 "example":http://www.professorcloud.com/mainsite/canvas-nebula.htm, "Source code":https://github.com/skhaz/qtquick-nebula


<code><br />import QtQuick 1.1
<code>
import QtQuick 1.1


Rectangle {<br /> width: 570<br /> height: 570<br /> color: &quot;black&amp;quot;
Rectangle {
width: 570
height: 570
color: "black"


Repeater {<br /> id: repeater<br /> model: 8
Repeater {
id: repeater
model: 8


Rectangle {<br /> id: rect
Rectangle {
id: rect


visible: false<br /> color: &quot;transparent&amp;quot;<br /> clip: true
visible: false
color: "transparent"
clip: true


width: 285; height: 285<br /> x: parent.width / 2 - width / 2<br /> y: parent.height / 2 - height / 2
width: 285; height: 285
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2


Timer {<br /> id: timer<br /> interval: 500 * index<br /> running: true<br /> repeat: false<br /> onTriggered: {<br /> rect.visible = true<br /> animation.running = true<br /> }<br /> }
Timer {
id: timer
interval: 500 * index
running: true
repeat: false
onTriggered: {
rect.visible = true
animation.running = true
}
}


Image {<br /> source: &quot;nebula.jpg&amp;quot;<br /> smooth: true<br /> x: –1 * (Math.random() * 285) &gt;&gt; 0<br /> y: –1 * (Math.random() * 285) &gt;&gt; 0<br /> }
Image {
source: "nebula.jpg"
smooth: true
x: –1 * (Math.random() * 285) >> 0
y: –1 * (Math.random() * 285) >> 0
}


ParallelAnimation {<br /> id: animation<br /> running: false<br /> loops: Animation.Infinite
ParallelAnimation {
id: animation
running: false
loops: Animation.Infinite


SequentialAnimation {<br /> NumberAnimation {<br /> target: rect<br /> property: &quot;opacity&amp;quot;<br /> from: .0; to: 1.0<br /> duration: 3000<br /> }
SequentialAnimation {
NumberAnimation {
target: rect
property: "opacity"
from: .0; to: 1.0
duration: 3000
}


NumberAnimation {<br /> target: rect<br /> property: &quot;opacity&amp;quot;<br /> from: 1.0; to: .0<br /> duration: 500<br /> }<br /> }
NumberAnimation {
target: rect
property: "opacity"
from: 1.0; to: .0
duration: 500
}
}


NumberAnimation {<br /> target: rect<br /> property: &quot;scale&amp;quot;<br /> from: 2.0; to: 4.0<br /> duration: 4000<br /> }<br /> }<br /> }<br /> }<br />}<br /></code>
NumberAnimation {
target: rect
property: "scale"
from: 2.0; to: 4.0
duration: 4000
}
}
}
}
}
</code>


[YouTubeID:ALL5KV5u5U4]
[YouTubeID:ALL5KV5u5U4]

Revision as of 10:49, 25 February 2015


Ported from this example in HTML5 "example":http://www.professorcloud.com/mainsite/canvas-nebula.htm, "Source code":https://github.com/skhaz/qtquick-nebula

import QtQuick 1.1

Rectangle {
 width: 570
 height: 570
 color: "black"

Repeater {
 id: repeater
 model: 8

Rectangle {
 id: rect

visible: false
 color: "transparent"
 clip: true

width: 285; height: 285
 x: parent.width / 2 - width / 2
 y: parent.height / 2 - height / 2

Timer {
 id: timer
 interval: 500 * index
 running: true
 repeat: false
 onTriggered: {
 rect.visible = true
 animation.running = true
 }
 }

Image {
 source: "nebula.jpg"
 smooth: true
 x: 1 * (Math.random() * 285) >> 0
 y: 1 * (Math.random() * 285) >> 0
 }

ParallelAnimation {
 id: animation
 running: false
 loops: Animation.Infinite

SequentialAnimation {
 NumberAnimation {
 target: rect
 property: "opacity"
 from: .0; to: 1.0
 duration: 3000
 }

NumberAnimation {
 target: rect
 property: "opacity"
 from: 1.0; to: .0
 duration: 500
 }
 }

NumberAnimation {
 target: rect
 property: "scale"
 from: 2.0; to: 4.0
 duration: 4000
 }
 }
 }
 }
}

[YouTubeID:ALL5KV5u5U4]