summaryrefslogtreecommitdiffstats
path: root/examples/shadereffectitem/test-directional-4point.qml
blob: 1593475b72cf0add39c9fb55652ed57eae3cc9df (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import QtQuick 2.0
import "Effectoids"


Item {
    width: 360
    height: 540

    Directional4PointBlur {
        id: blurEffect

        yStep: 0
        xStep: 1 / width
        blending: false
        spread: 0

        source: effectRoot

    }

    Item {
        id: effectRoot
        width: 360
        height: 540

        Directional4PointBlur {
            source: innerEffectRoot
            spread: blurEffect.spread
            blending: false
            yStep: 1 / height
            xStep: 0
        }

        Item {
            id: innerEffectRoot
            anchors.fill: parent

            Image {
                anchors.fill: parent
                source: "bg.png"
                smooth: true
            }

            MovingBox {}
        }
    }


    Rectangle {
        id: popup
        anchors.centerIn: blurEffect
        gradient: Gradient {
            GradientStop { position: 0; color: "white" }
            GradientStop { position: 1; color: "gray" }
        }
        width: 250
        height: 100
        radius: 40
        border.color: "black"
        border.width: 2
        smooth: true
        scale: 0
        opacity: 0
        rotation: 90
        Text {
            anchors.centerIn: parent
            text: "SMS!!!!"
            font.pixelSize: 60
        }
    }

    property real transitionTime: 300;

    SequentialAnimation {
        loops: Animation.Infinite
        ParallelAnimation { // fade in
            NumberAnimation { target: popup; property: "opacity"; to: 0.7; duration: transitionTime }
            NumberAnimation { target: popup; property: "scale"; to: 1; duration: transitionTime * 3; easing.type: Easing.OutElastic}
            NumberAnimation { target: blurEffect; property: "spread"; to: 1; duration: transitionTime }
        }
        PauseAnimation { duration: 2000 }
        ParallelAnimation { // fade out
            NumberAnimation { target: popup; property: "opacity"; to: 0; duration: transitionTime }
            NumberAnimation { target: popup; property: "scale"; to: 0; duration: transitionTime; easing.type: Easing.InOutCubic }
            NumberAnimation { target: blurEffect; property: "spread"; to: 0; duration: transitionTime }
        }
        running: true
    }

    Rectangle { x: 360; width: 1000; height: 1000; color: "black" }
    Rectangle { y: 540; width: 1000; height: 1000; color: "black" }

}