| 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 |