Nebula Effect: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(YouTube link fixed)
(Sub-categorize)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{LangSwitch}}
 
[[Category:Snippets::QML]]
[[Category:snippets]]
 
Ported from this example in HTML5 [http://www.professorcloud.com/mainsite/canvas-nebula.htm example], [https://github.com/skhaz/qtquick-nebula Source code]
Ported from this example in HTML5 [http://www.professorcloud.com/mainsite/canvas-nebula.htm example], [https://github.com/skhaz/qtquick-nebula Source code]


Line 9: Line 7:


Rectangle {
Rectangle {
width: 570
    width: 570
height: 570
    height: 570
color: "black"
    color: "black"
 
Repeater {
id: repeater
model: 8
 
Rectangle {
id: rect


visible: false
    Repeater {
color: "transparent"
        id: repeater
clip: true
        model: 8


width: 285; height: 285
        Rectangle {
x: parent.width / 2 - width / 2
            id: rect
y: parent.height / 2 - height / 2
            visible: false
            color: "transparent"
            clip: true
            width: 285
            height: 285
            x: parent.width / 2 - width / 2
            y: parent.height / 2 - height / 2


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


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


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


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


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


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


[https://www.youtube.com/watch?v=ALL5KV5u5U4 YouTube Video]
[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
                }
            }
        }
    }
}

YouTube Video