@@ -26,6 +26,9 @@ Item {
2626
2727 property int animDuration: 10
2828
29+ property bool __useDotAnimation: true
30+ property int __circleModifier: __useDotAnimation ? 1 : 2
31+
2932 Connections {
3033 target: model
3134
@@ -41,19 +44,24 @@ Item {
4144
4245 function startShowAnimation() {
4346 dotHideAnimTimer.stop()
44− circleShrinkAnimTimer.stop()
4547 notification.hideAnim.stop()
4648
47− dotShowAnimTimer.startFromBeginning()
49+ if (__useDotAnimation) {
50+ dotShowAnimTimer.startFromBeginning()
51+ }
4852 notification.showAnim.start()
4953 }
5054
5155 function startHideAnimation() {
5256 dotShowAnimTimer.stop()
53− circleGrowAnimTimer.stop()
57+ circleChangeAnimTimer.stop()
5458 notification.showAnim.stop()
5559
56− dotHideAnimTimer.startFromBeginning()
60+ if (__useDotAnimation) {
61+ dotHideAnimTimer.startFromBeginning()
62+ } else {
63+ circleChangeAnimTimer.startFromBeginning()
64+ }
5765 notification.hideAnim.start()
5866 }
5967
@@ -73,22 +81,22 @@ Item {
7381 anchors.centerIn: parent
7482
7583 Timer {
76− id: circleGrowAnimTimer
84+ id: circleChangeAnimTimer
7785
7886 property int pastCircleCounter
7987 property int presentCircleCounter
8088
81− interval: animDuration
89+ interval: notification.duration
8290 running: false
8391 repeat: true
8492 onTriggered: {
8593 if (pastCircleCounter < pastCircles.count) {
8694 var nextCircle = pastCircles.itemAt(pastCircleCounter++)
87− if (nextCircle !== null) nextCircle.pastCircleGrowAnim.start()
95+ if (nextCircle !== null) nextCircle.pastCircleChangeAnim.start()
8896 }
8997 if (pastCircleCounter > pastCircles.count / 2) {
9098 var nextCircle = presentCircles.itemAt(presentCircleCounter++)
91− if (nextCircle !== null) nextCircle.presentCircleGrowAnim.start()
99+ if (nextCircle !== null) nextCircle.presentCircleChangeAnim.start()
92100 }
93101 if (presentCircleCounter > infographic.model.currentDay && pastCircleCounter >= pastCircles.count) {
94102 stop()
@@ -96,39 +104,8 @@ Item {
96104 }
97105
98106 function startFromBeginning() {
99− circleGrowAnimTimer.pastCircleCounter = 0
100− circleGrowAnimTimer.presentCircleCounter = 0
101− start()
102− }
103− }
104−
105− Timer {
106− id: circleShrinkAnimTimer
107−
108− property int pastCircleCounter
109− property int presentCircleCounter
110−
111− interval: animDuration
112− running: false
113− repeat: true
114− onTriggered: {
115− if (pastCircleCounter >= 0) {
116− var nextCircle = pastCircles.itemAt(pastCircleCounter--)
117− if (nextCircle !== null) nextCircle.pastCircleShrinkAnim.start()
118− }
119− if (pastCircleCounter < pastCircles.count / 2) {
120− var nextCircle = presentCircles.itemAt(presentCircleCounter--)
121− if (nextCircle !== null) nextCircle.presentCircleShrinkAnim.start()
122− }
123− if (presentCircleCounter < 0) {
124− stop()
125− infographic.model.readyForDataChange()
126− }
127− }
128−
129− function startFromBeginning() {
130− pastCircleCounter = pastCircles.count - 1
131− presentCircleCounter = model.currentDay
107+ circleChangeAnimTimer.pastCircleCounter = 0
108+ circleChangeAnimTimer.presentCircleCounter = 0
132109 start()
133110 }
134111 }
@@ -139,8 +116,7 @@ Item {
139116 model: infographic.model.secondMonth
140117
141118 delegate: ObjectPositioner {
142− property alias pastCircleGrowAnim: pastCircleGrowAnim
143− property alias pastCircleShrinkAnim: pastCircleShrinkAnim
119+ property alias pastCircleChangeAnim: pastCircleChangeAnim
144120
145121 index: model.index
146122 count: pastCircles.count
@@ -160,52 +136,33 @@ Item {
160136 opacity: 0.0
161137 scale: 0.0
162138 visible: modelData !== undefined
163− color: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
139+ color: "transparent"
164140
165141 SequentialAnimation {
166− id: pastCircleGrowAnim
142+ id: pastCircleChangeAnim
167143
168144 loops: 1
169145 ParallelAnimation {
170146 PropertyAnimation {
171147 target: pastCircle
172148 property: "opacity"
173− from: 0.0
174149 to: pastCircle.circleOpacity
175150 easing.type: Easing.OutCurve
176− duration: circleGrowAnimTimer.interval * 4
151+ duration: circleChangeAnimTimer.interval * __circleModifier
177152 }
178153 PropertyAnimation {
179154 target: pastCircle
180155 property: "scale"
181− from: 0.0
182156 to: modelData
183157 easing.type: Easing.OutCurve
184− duration: circleGrowAnimTimer.interval * 4
185− }
186− }
187− }
188−
189− SequentialAnimation {
190− id: pastCircleShrinkAnim
191−
192− loops: 1
193− ParallelAnimation {
194− PropertyAnimation {
195− target: pastCircle
196− property: "opacity"
197− from: pastCircle.circleOpacity
198− to: 0.0
199− easing.type: Easing.OutCurve
200− duration: circleShrinkAnimTimer.interval * 4
158+ duration: circleChangeAnimTimer.interval * __circleModifier
201159 }
202− PropertyAnimation {
160+ ColorAnimation {
203161 target: pastCircle
204− property: "scale"
205− from: modelData
206− to: 0.0
162+ property: "color"
163+ to: Gradient.threeColorByIndex(index, count, infographic.model.secondColor)
207164 easing.type: Easing.OutCurve
208− duration: circleShrinkAnimTimer.interval * 4
165+ duration: circleChangeAnimTimer.interval * __circleModifier
209166 }
210167 }
211168 }
@@ -219,8 +176,7 @@ Item {
219176 model: infographic.model.firstMonth
220177
221178 delegate: ObjectPositioner {
222− property alias presentCircleGrowAnim: presentCircleGrowAnim
223− property alias presentCircleShrinkAnim: presentCircleShrinkAnim
179+ property alias presentCircleChangeAnim: presentCircleChangeAnim
224180
225181 index: model.index
226182 count: presentCircles.count
@@ -240,10 +196,10 @@ Item {
240196 opacity: 0.0
241197 scale: 0.0
242198 visible: modelData !== undefined
243− color: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
199+ color: "transparent"
244200
245201 SequentialAnimation {
246− id: presentCircleGrowAnim
202+ id: presentCircleChangeAnim
247203
248204 loops: 1
249205
@@ -253,36 +209,21 @@ Item {
253209 property: "opacity"
254210 to: presentCircle.circleOpacity
255211 easing.type: Easing.OutCurve
256− duration: circleGrowAnimTimer.interval * 4
212+ duration: circleChangeAnimTimer.interval * __circleModifier
257213 }
258214 PropertyAnimation {
259215 target: presentCircle
260216 property: "scale"
261217 to: modelData
262218 easing.type: Easing.OutCurve
263− duration: circleGrowAnimTimer.interval * 4
219+ duration: circleChangeAnimTimer.interval * __circleModifier
264220 }
265− }
266− }
267−
268− SequentialAnimation {
269− id: presentCircleShrinkAnim
270−
271− loops: 1
272− ParallelAnimation {
273− PropertyAnimation {
221+ ColorAnimation {
274222 target: presentCircle
275− property: "opacity"
276− to: 0.0
223+ property: "color"
224+ to: Gradient.threeColorByIndex(index, infographic.model.currentDay, infographic.model.firstColor)
277225 easing.type: Easing.OutCurve
278− duration: circleShrinkAnimTimer.interval * 4
279− }
280− PropertyAnimation {
281− target: presentCircle
282− property: "scale"
283− to: 0.0
284− easing.type: Easing.OutCurve
285− duration: circleShrinkAnimTimer.interval * 4
226+ duration: circleChangeAnimTimer.interval * __circleModifier
286227 }
287228 }
288229 }
@@ -313,7 +254,7 @@ Item {
313254 stop()
314255 }
315256 if (dotCounter == Math.round(dots.count / 2)) {
316− circleGrowAnimTimer.startFromBeginning()
257+ circleChangeAnimTimer.startFromBeginning()
317258 }
318259 }
319260
@@ -340,8 +281,8 @@ Item {
340281 } else {
341282 stop()
342283 }
343− if (dotCounter == Math.round(dots.count / 2)) {
344− circleShrinkAnimTimer.startFromBeginning()
284+ if (dotCounter == 0) {
285+ infographic.model.readyForDataChange()
345286 }
346287 }
347288
@@ -413,6 +354,7 @@ Item {
413354 property alias showAnim: increaseOpacity
414355
415356 property real baseOpacity: 0.6
357+ property real duration: dotShowAnimTimer.interval * 5
416358
417359 height: 0.7 * backgroundCircle.width
418360 width: notification.height
@@ -432,7 +374,7 @@ Item {
432374 property: "opacity"
433375 from: 0.0
434376 to: notification.baseOpacity
435− duration: dotShowAnimTimer.interval * dots.count * 5
377+ duration: notification.duration * dots.count
436378 }
437379
438380 PropertyAnimation {
@@ -442,7 +384,8 @@ Item {
442384 property: "opacity"
443385 from: notification.baseOpacity
444386 to: 0.0
445− duration: dotShowAnimTimer.interval * dots.count * 5
387+ duration: notification.duration * dots.count
388+ onStopped: if (!__useDotAnimation) infographic.model.readyForDataChange()
446389 }
447390 }
448391 }
@@ -453,9 +396,10 @@ Item {
453396 onDoubleClicked: {
454397 if (!dotHideAnimTimer.running &&
455398 !dotShowAnimTimer.running &&
456− !circleShrinkAnimTimer.running &&
457− !circleGrowAnimTimer.running)
399+ !circleChangeAnimTimer.running) {
400+ __useDotAnimation = false
458401 infographic.model.nextDataSource()
402+ }
459403 }
460404
461405 onClicked: mouse.accepted = false