aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quick/multieffect/itemswitcher/qml/SwitchEffect3DFlip.qml
blob: bb33b8c6b6806a63363c300a190afb7a0255b960 (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
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Effects

Item {
    id: rootItem
    // We expect all effects to be placed under ItemSwitcher
    property Item switcher: rootItem.parent

    anchors.fill: parent

    MultiEffect {
        source: switcher.fromItem
        width: parent.width
        height: parent.height
        x: switcher.inAnimation * rootItem.width
        blurEnabled: true
        blur: switcher.inAnimation
        blurMax: 32
        blurMultiplier: 0.5
        opacity: switcher.outAnimation

        saturation: -switcher.inAnimation * 1.5

        maskEnabled: true
        maskSource: Image {
            source: "images/smoke.png"
            visible: false
        }
        maskThresholdMin: switcher.inAnimation * 0.6
        maskSpreadAtMin: 0.1
        maskThresholdMax: 1.0 - (switcher.inAnimation * 0.6)
        maskSpreadAtMax: 0.1

        shadowEnabled: true
        shadowOpacity: 0.5
        shadowBlur: 0.8
        shadowVerticalOffset: 5
        shadowHorizontalOffset: 10 + (x * 0.2)
        shadowScale: 1.02

        transform: Rotation {
            origin.x: parent.width / 2
            origin.y: parent.height / 2
            axis { x: 0; y: 1; z: 0 }
            angle: switcher.inAnimation * 60
        }
        rotation: -switcher.inAnimation * 20
        scale: 1.0 + (switcher.inAnimation * 0.2)
    }

    MultiEffect {
        source: switcher.toItem
        width: parent.width
        height: parent.height
        x: -switcher.outAnimation * rootItem.width
        blurEnabled: true
        blur: switcher.outAnimation * 2
        blurMax: 32
        blurMultiplier: 0.5
        opacity: switcher.inAnimation

        saturation: -switcher.outAnimation * 1.5

        maskEnabled: true
        maskSource: Image {
            source: "images/smoke.png"
            visible: false
        }
        maskThresholdMin: switcher.outAnimation * 0.6
        maskSpreadAtMin: 0.1
        maskThresholdMax: 1.0 - (switcher.outAnimation * 0.6)
        maskSpreadAtMax: 0.1

        shadowEnabled: true
        shadowOpacity: 0.5
        shadowBlur: 0.8
        shadowVerticalOffset: 5
        shadowHorizontalOffset: 10 + (x * 0.2)
        shadowScale: 1.02

        transform: Rotation {
            origin.x: parent.width / 2
            origin.y: parent.height / 2
            axis { x: 0; y: 1; z: 0 }
            angle: -switcher.outAnimation * 60
        }
        rotation: switcher.outAnimation * 20
        scale: 1.0 - (switcher.outAnimation * 0.4)
    }
}