Nebula Effect: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(5 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:snippets]]
{{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]


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


<code><br />import QtQuick 1.1
Rectangle {
    width: 570
    height: 570
    color: "black"


Rectangle {<br /> width: 570<br /> height: 570<br /> color: &quot;black&amp;quot;
    Repeater {
        id: repeater
        model: 8


Repeater {<br /> id: repeater<br /> 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


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


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


width: 285; height: 285<br /> x: parent.width / 2 - width / 2<br /> y: parent.height / 2 - height / 2
            ParallelAnimation {
                id: animation
                running: false
                loops: Animation.Infinite


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 /> }
                SequentialAnimation {
                    NumberAnimation {
                        target: rect
                        property: "opacity"
                        from: .0
                        to: 1.0
                        duration: 3000
                    }


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 /> }
                    NumberAnimation {
                        target: rect
                        property: "opacity"
                        from: 1.0
                        to: .0
                        duration: 500
                    }
                }


ParallelAnimation {<br /> id: animation<br /> running: false<br /> loops: Animation.Infinite
                NumberAnimation {
                    target: rect
                    property: "scale"
                    from: 2.0
                    to: 4.0
                    duration: 4000
                }
            }
        }
    }
}
</code>


SequentialAnimation {<br /> NumberAnimation {<br /> target: rect<br /> property: &quot;opacity&amp;quot;<br /> from: .0; to: 1.0<br /> duration: 3000<br /> }
[https://www.youtube.com/watch?v=ALL5KV5u5U4 YouTube Video]
 
NumberAnimation {<br /> target: rect<br /> property: &quot;opacity&amp;quot;<br /> from: 1.0; to: .0<br /> duration: 500<br /> }<br /> }
 
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>
 
[YouTubeID:ALL5KV5u5U4]

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