Nebula Effect: Difference between revisions
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 | Ported from this example in HTML5 "example":http://www.professorcloud.com/mainsite/canvas-nebula.htm, "Source code":https://github.com/skhaz/qtquick-nebula | ||
<code> | <code> | ||
import QtQuick 1.1 | |||
Rectangle { | Rectangle { | ||
width: 570 | |||
height: 570 | |||
color: "black" | |||
Repeater { | Repeater { | ||
id: repeater | |||
model: 8 | |||
Rectangle { | Rectangle { | ||
id: rect | |||
visible: false | visible: false | ||
color: "transparent" | |||
clip: true | |||
width: 285; height: 285 | width: 285; height: 285 | ||
x: parent.width / 2 - width / 2 | |||
y: parent.height / 2 - height / 2 | |||
Timer { | Timer { | ||
id: timer | |||
interval: 500 * index | |||
running: true | |||
repeat: false | |||
onTriggered: { | |||
rect.visible = true | |||
animation.running = true | |||
} | |||
} | |||
Image { | Image { | ||
source: "nebula.jpg" | |||
smooth: true | |||
x: –1 * (Math.random() * 285) >> 0 | |||
y: –1 * (Math.random() * 285) >> 0 | |||
} | |||
ParallelAnimation { | ParallelAnimation { | ||
id: animation | |||
running: false | |||
loops: Animation.Infinite | |||
SequentialAnimation { | SequentialAnimation { | ||
NumberAnimation { | |||
target: rect | |||
property: "opacity" | |||
from: .0; to: 1.0 | |||
duration: 3000 | |||
} | |||
NumberAnimation { | NumberAnimation { | ||
target: rect | |||
property: "opacity" | |||
from: 1.0; to: .0 | |||
duration: 500 | |||
} | |||
} | |||
NumberAnimation { | 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]