OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <!-- | 2 <!-- |
3 Copyright (c) 2013 The Chromium Authors. All rights reserved. | 3 Copyright (c) 2013 The Chromium Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
5 found in the LICENSE file. | 5 found in the LICENSE file. |
6 --> | 6 --> |
7 <link rel="import" href="/tracing/base/utils.html"> | 7 <link rel="import" href="/tracing/base/utils.html"> |
8 <link rel="import" href="/tracing/ui/base/animation.html"> | 8 <link rel="import" href="/tracing/ui/base/animation.html"> |
9 | 9 |
10 <script> | 10 <script> |
11 'use strict'; | 11 'use strict'; |
12 | 12 |
13 tr.exportTo('tr.ui', function() { | 13 tr.exportTo('tr.ui', function() { |
14 var kDefaultPanAnimationDurationMs = 100.0; | 14 var kDefaultPanAnimationDurationMs = 100.0; |
| 15 const lerp = tr.b.math.lerp; |
15 | 16 |
16 /** | 17 /** |
17 * Pans a TimelineDisplayTransform by a given amount. | 18 * Pans a TimelineDisplayTransform by a given amount. |
18 * @constructor | 19 * @constructor |
19 * @extends {tr.ui.b.Animation} | 20 * @extends {tr.ui.b.Animation} |
20 * @param {Number} deltaX The total amount of change to the transform's panX. | 21 * @param {Number} deltaX The total amount of change to the transform's panX. |
21 * @param {Number} deltaY The total amount of change to the transform's panY. | 22 * @param {Number} deltaY The total amount of change to the transform's panY. |
22 * @param {Number=} opt_durationMs How long the pan animation should run. | 23 * @param {Number=} opt_durationMs How long the pan animation should run. |
23 * Defaults to kDefaultPanAnimationDurationMs. | 24 * Defaults to kDefaultPanAnimationDurationMs. |
24 */ | 25 */ |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
60 }, | 61 }, |
61 | 62 |
62 start: function(timestamp, target) { | 63 start: function(timestamp, target) { |
63 this.startTimeMs = timestamp; | 64 this.startTimeMs = timestamp; |
64 this.startPanX = target.panX; | 65 this.startPanX = target.panX; |
65 this.startPanY = target.panY; | 66 this.startPanY = target.panY; |
66 }, | 67 }, |
67 | 68 |
68 tick: function(timestamp, target) { | 69 tick: function(timestamp, target) { |
69 var percentDone = (timestamp - this.startTimeMs) / this.durationMs; | 70 var percentDone = (timestamp - this.startTimeMs) / this.durationMs; |
70 percentDone = tr.b.clamp(percentDone, 0, 1); | 71 percentDone = tr.b.math.clamp(percentDone, 0, 1); |
71 | 72 |
72 target.panX = tr.b.lerp(percentDone, this.startPanX, this.goalPanX); | 73 target.panX = lerp(percentDone, this.startPanX, this.goalPanX); |
73 if (this.affectsPanY) | 74 if (this.affectsPanY) { |
74 target.panY = tr.b.lerp(percentDone, this.startPanY, this.goalPanY); | 75 target.panY = lerp(percentDone, this.startPanY, this.goalPanY); |
| 76 } |
75 return timestamp >= this.startTimeMs + this.durationMs; | 77 return timestamp >= this.startTimeMs + this.durationMs; |
76 }, | 78 }, |
77 | 79 |
78 get goalPanX() { | 80 get goalPanX() { |
79 return this.startPanX + this.deltaX; | 81 return this.startPanX + this.deltaX; |
80 }, | 82 }, |
81 | 83 |
82 get goalPanY() { | 84 get goalPanY() { |
83 return this.startPanY + this.deltaY; | 85 return this.startPanY + this.deltaY; |
84 } | 86 } |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
143 | 145 |
144 start: function(timestamp, target) { | 146 start: function(timestamp, target) { |
145 this.startTimeMs = timestamp; | 147 this.startTimeMs = timestamp; |
146 this.startScaleX = target.scaleX; | 148 this.startScaleX = target.scaleX; |
147 this.goalScaleX = this.zoomInRatioX * target.scaleX; | 149 this.goalScaleX = this.zoomInRatioX * target.scaleX; |
148 this.startPanY = target.panY; | 150 this.startPanY = target.panY; |
149 }, | 151 }, |
150 | 152 |
151 tick: function(timestamp, target) { | 153 tick: function(timestamp, target) { |
152 var percentDone = (timestamp - this.startTimeMs) / this.durationMs; | 154 var percentDone = (timestamp - this.startTimeMs) / this.durationMs; |
153 percentDone = tr.b.clamp(percentDone, 0, 1); | 155 percentDone = tr.b.math.clamp(percentDone, 0, 1); |
154 | 156 |
155 target.scaleX = tr.b.lerp(percentDone, this.startScaleX, this.goalScaleX); | 157 target.scaleX = lerp(percentDone, this.startScaleX, this.goalScaleX); |
156 if (this.affectsPanY) { | 158 if (this.affectsPanY) { |
157 target.panY = tr.b.lerp( | 159 target.panY = lerp(percentDone, this.startPanY, this.goalFocalPointY); |
158 percentDone, this.startPanY, this.goalFocalPointY); | |
159 } | 160 } |
160 | 161 |
161 target.xPanWorldPosToViewPos( | 162 target.xPanWorldPosToViewPos( |
162 this.goalFocalPointXWorld, this.goalFocalPointXView); | 163 this.goalFocalPointXWorld, this.goalFocalPointXView); |
163 return timestamp >= this.startTimeMs + this.durationMs; | 164 return timestamp >= this.startTimeMs + this.durationMs; |
164 } | 165 } |
165 }; | 166 }; |
166 | 167 |
167 return { | 168 return { |
168 TimelineDisplayTransformPanAnimation: | 169 TimelineDisplayTransformPanAnimation: |
169 TimelineDisplayTransformPanAnimation, | 170 TimelineDisplayTransformPanAnimation, |
170 TimelineDisplayTransformZoomToAnimation: | 171 TimelineDisplayTransformZoomToAnimation: |
171 TimelineDisplayTransformZoomToAnimation | 172 TimelineDisplayTransformZoomToAnimation |
172 }; | 173 }; |
173 }); | 174 }); |
174 </script> | 175 </script> |
OLD | NEW |