on xenial help sign in
add fade animation
commit50d40be5b48e05ad5a5b1753078d93d019e04b4f authorNick Dedekind <nicholas.dedekind@gmail.com> dateWed 23 Jul 2014, 12:59 (12 years ago) parent1e08db9
5 files changed+74−3
qml/Stages/Animations/BaseSurfaceAnimation.qml+24 qml/Stages/Animations/DarkenAndFadeInAnimation.qml+42 qml/Stages/Animations/SwipeFromBottomAnimation.qml+1−1 qml/Stages/Animations/SwipeUpAnimation.qml+1−1 qml/Stages/SurfaceContainer.qml+6−1
qml/Stages/Animations/BaseSurfaceAnimation.qml+24
@@ -16,18 +16,42 @@
1616
1717import QtQuick 2.0
1818
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+ */
1938Item {
2039 id: base
2140 property Item surface: null
2241 property Item surfaceArea: null
2342
43+ // changes applied when state changes to "in"
2444 property list<QtObject> outChanges
45+ // transition animations when changing state to "in"
2546 property list<QtObject> outAnimations
2647
48+ // changes applied when state changes to "out"
2749 property list<QtObject> inChanges
50+ // transition animations when changing state to "out"
2851 property list<QtObject> inAnimations
2952
3053 function start() {
54+ // "prep" state forces outChanges without transition animations.
3155 state = "prep"
3256 state = "in";
3357 }
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 {
2626 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
2727 PropertyAction { target: animation.surface; property: "visible"; value: !animation.parent.removing }
2828 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(); } }
3030 }
3131 ]
3232
qml/Stages/Animations/SwipeUpAnimation.qml+1−1
@@ -25,7 +25,7 @@ BaseSurfaceAnimation {
2525 PropertyAction { target: animation.surface; property: "visible"; value: true }
2626 AnchorAnimation { easing.type: Easing.InOutQuad; duration: 400 }
2727 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(); } }
2929 }
3030 ]
3131
qml/Stages/SurfaceContainer.qml+6−1
@@ -31,9 +31,10 @@ Item {
3131 }
3232 }
3333
34− Item {
34+ Rectangle {
3535 id: _surfaceArea
3636 anchors.fill: parent
37+ color: Qt.rgba(0,0,0,0)
3738 }
3839
3940 Connections {
@@ -108,6 +109,10 @@ Item {
108109 id: swipeUp
109110 SwipeUpAnimation {}
110111 }
112+ Component {
113+ id: darkenFade
114+ DarkenAndFadeInAnimation {}
115+ }
111116
112117 states: [
113118 State {