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)
}
}
|
