on xenial help sign in
add fade animation
50d40beNick Dedekind
qml/Stages/Animations/BaseSurfaceAnimation.qml+24
@@ -16,18 +16,42 @@
16
16
17import QtQuick 2.0
17import QtQuick 2.0
18
18
19+/* This is the base case for surface animations, used when adding/removing * child surfaces.
20+ * The class is meant to be overridden and changes/animations provided for state changes.
21+ * NB. It is important to release the surface at the end of the "out" animation.
22+ *
23+ * Example - Simple fade in/out
24+ *
25+ * BaseSurfaceAnimation {
26+ * outChanges: [ PropertyChanges { target: animation.surface; opacity: 0.0 } ]
27+ * outAnimations: [
28+ SequentialAnimation {
29+ * NumberAnimation { target: animation.surface; property: "opacity"; duration: 300 }
30+ * ScriptAction { script: { if (animation.parent.removing) animation.surface.release(); } }
31+ * }
32+ * ]
33+ *
34+ * inChanges: [ PropertyChanges { target: animation.surface; opacity: 1.0 } ]
35+ * inAnimations: [ NumberAnimation { target: animation.surface; property: "opacity"; duration: 300 } ]
36+ * }
37+ */
19Item {
38Item {
20 id: base
39 id: base
21 property Item surface: null
40 property Item surface: null
22 property Item surfaceArea: null
41 property Item surfaceArea: null
23
42
43+ // changes applied when state changes to "in"
24 property list<QtObject> outChanges
44 property list<QtObject> outChanges
45+ // transition animations when changing state to "in"
25 property list<QtObject> outAnimations
46 property list<QtObject> outAnimations
26
47
48+ // changes applied when state changes to "out"
27 property list<QtObject> inChanges
49 property list<QtObject> inChanges
50+ // transition animations when changing state to "out"
28 property list<QtObject> inAnimations
51 property list<QtObject> inAnimations
29
52
30 function start() {
53 function start() {
54+ // "prep" state forces outChanges without transition animations.
31 state = "prep"
55 state = "prep"
32 state = "in";
56 state = "in";
33 }
57 }
qml/Stages/Animations/DarkenAndFadeInAnimation.qmlnew file+42
@@ -0,0 +1,42 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.0
18+import Ubuntu.Components 1.1
19+
20+BaseSurfaceAnimation {
21+ id: animation
22+
23+ outChanges: [ PropertyChanges { target: animation.surface; opacity: 0.0 } ]
24+ outAnimations: [
25+ SequentialAnimation {
26+ UbuntuNumberAnimation { target: animation.surface; property: "opacity"; duration: UbuntuAnimation.FastDuration }
27+ ColorAnimation { target: animation.surfaceArea; duration: UbuntuAnimation.FastDuration }
28+ ScriptAction { script: { if (animation.parent.removing) animation.surface.release(); } }
29+ }
30+ ]
31+
32+ inChanges: [
33+ PropertyChanges { target: animation.surfaceArea; color: Qt.rgba(0,0,0,0.7) },
34+ PropertyChanges { target: animation.surface; opacity: 1.0 }
35+ ]
36+ inAnimations: [
37+ SequentialAnimation {
38+ ColorAnimation { target: animation.surfaceArea; duration: UbuntuAnimation.FastDuration }
39+ UbuntuNumberAnimation { target: animation.surface; property: "opacity"; duration: UbuntuAnimation.FastDuration }
40+ }
41+ ]
42+}
qml/Stages/Animations/SwipeFromBottomAnimation.qml+1−1
@@ -26,7 +26,7 @@ BaseSurfaceAnimation {
26 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
26 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
27 PropertyAction { target: animation.surface; property: "visible"; value: !animation.parent.removing }
27 PropertyAction { target: animation.surface; property: "visible"; value: !animation.parent.removing }
28 PropertyAction { target: animation.parent; property: "clip"; value: false }
28 PropertyAction { target: animation.parent; property: "clip"; value: false }
29− ScriptAction { script: { if (animation.parent.removing) animation.surface.release() } }
29+ ScriptAction { script: { if (animation.parent.removing) animation.surface.release(); } }
30 }
30 }
31 ]
31 ]
32
32
qml/Stages/Animations/SwipeUpAnimation.qml+1−1
@@ -25,7 +25,7 @@ BaseSurfaceAnimation {
25 PropertyAction { target: animation.surface; property: "visible"; value: true }
25 PropertyAction { target: animation.surface; property: "visible"; value: true }
26 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
26 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
27 PropertyAction { target: animation.parent; property: "clip"; value: false }
27 PropertyAction { target: animation.parent; property: "clip"; value: false }
28− ScriptAction { script: { if (animation.parent.removing) animation.surface.release() } }
28+ ScriptAction { script: { if (animation.parent.removing) animation.surface.release(); } }
29 }
29 }
30 ]
30 ]
31
31
qml/Stages/SurfaceContainer.qml+6−1
@@ -31,9 +31,10 @@ Item {
31 }
31 }
32 }
32 }
33
33
34− Item {
34+ Rectangle {
35 id: _surfaceArea
35 id: _surfaceArea
36 anchors.fill: parent
36 anchors.fill: parent
37+ color: Qt.rgba(0,0,0,0)
37 }
38 }
38
39
39 Connections {
40 Connections {
@@ -108,6 +109,10 @@ Item {
108 id: swipeUp
109 id: swipeUp
109 SwipeUpAnimation {}
110 SwipeUpAnimation {}
110 }
111 }
112+ Component {
113+ id: darkenFade
114+ DarkenAndFadeInAnimation {}
115+ }
111
116
112 states: [
117 states: [
113 State {
118 State {