Nebula Effect: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(Sub-categorize) |
||
(5 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
[[Category: | {{LangSwitch}} | ||
[[Category:Snippets::QML]] | |||
Ported from this example in HTML5 [http://www.professorcloud.com/mainsite/canvas-nebula.htm example], [https://github.com/skhaz/qtquick-nebula Source code] | |||
<code> | |||
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 | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</code> | |||
[https://www.youtube.com/watch?v=ALL5KV5u5U4 YouTube Video] | |||
Latest revision as of 13:18, 28 November 2016
En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh
Ported from this example in HTML5 example, Source code
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
}
}
}
}
}