Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.

Nebula Effect: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Sub-categorize)
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Ported from this example in HTML5 [http://www.professorcloud.com/mainsite/canvas-nebula.htm example] ''[professorcloud.com]'', [https://github.com/skhaz/qtquick-nebula Source code] ''[github.com]''
{{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]


===Categories:===
<code>
import QtQuick 1.1


* [[:Category:snippets|snippets]]
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
                }
            }
        }
    }
}

YouTube Video