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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
// Copyright 2017 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Contains currently active progress bar animation.
* @type {ProgressBarAnimation}
*/
let activeProgressAnimation = null;
/**
* Provides animation for set of div elements that looks similar to paper
* progress animation. This class performs animation with the fixed rate that
* can save CPU resources on low-end machines.
* TODO(crbug.com/752349): Use paper progress animation.
*/
class ProgressBarAnimation {
/**
* @param {Element} progressContainer The root div element for the two child
* div elements that are used in animation.
*/
constructor(progressContainer) {
this.primaryProgress_ =
progressContainer.querySelector('.progress-primary');
this.secondaryProgress_ =
progressContainer.querySelector('.progress-secondary');
this.updateInterval_ = null;
this.animationDurationMs_ = 2000;
this.fps_ = 10;
}
/**
* Called periodically to perform animation update.
*/
update_() {
// Calculate animation time in range 0..1.
const currentAnimationRatio =
((new Date().getTime() - this.startTime_) / this.animationDurationMs_) %
1;
// Ranges and constants are taken from paper progress implementation.
// Animate the primary progress.
if (currentAnimationRatio <= 0.5) {
const translate = -100 + 200 * currentAnimationRatio;
this.primaryProgress_.style.transform =
'scaleX(1) translateX(' + translate + '%)';
} else if (currentAnimationRatio <= 0.75) {
this.primaryProgress_.style.transform = 'scaleX(1) translateX(0%)';
} else {
const scale = 4.0 * (1.0 - currentAnimationRatio);
this.primaryProgress_.style.transform =
'scaleX(' + scale + ') translateX(0%)';
}
// Animate the secondary progress.
if (currentAnimationRatio < 0.3) {
this.secondaryProgress_.style.transform =
'scaleX(0.75) translateX(-125%)';
} else if (currentAnimationRatio < 0.9) {
const translate = -125.0 + 250.0 * (currentAnimationRatio - 0.3) / 0.6;
this.secondaryProgress_.style.transform =
'scaleX(0.75) translateX(' + translate + '%)';
} else {
this.secondaryProgress_.style.transform = 'scaleX(0.75) translateX(125%)';
}
}
/**
* Starts animation.
*/
start() {
this.startTime_ = new Date().getTime();
this.stop();
this.updateInterval_ = setInterval(() => this.update_(), 1000 / this.fps_);
}
/**
* Stops animation.
*/
stop() {
if (!this.updateInterval_) {
return;
}
clearInterval(this.updateInterval_);
this.updateInterval_ = null;
}
}
/**
* Stops current progress bar animation if it exists.
*/
function stopProgressAnimation() {
if (!activeProgressAnimation) {
return;
}
activeProgressAnimation.stop();
activeProgressAnimation = null;
}
/**
* Starts new progress bar animation and optionally stops previous one.
* @param {string} pageDivId Page id that contains progress bar to animate.
*/
function startProgressAnimation(pageDivId) {
stopProgressAnimation();
const page = $(pageDivId);
activeProgressAnimation =
new ProgressBarAnimation(page.querySelector('.progress-container'));
activeProgressAnimation.start();
}
|
