OLD | NEW |
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 * @param {!WebInspector.StylesSidebarPane} stylesPane | 8 * @param {!WebInspector.StylesSidebarPane} stylesPane |
9 */ | 9 */ |
10 WebInspector.AnimationTimeline = function(stylesPane) | 10 WebInspector.AnimationTimeline = function(stylesPane) |
(...skipping 259 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
270 /** | 270 /** |
271 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation | 271 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation |
272 * @return {boolean} | 272 * @return {boolean} |
273 */ | 273 */ |
274 _resizeWindow: function(animation) | 274 _resizeWindow: function(animation) |
275 { | 275 { |
276 var resized = false; | 276 var resized = false; |
277 if (!this._startTime) | 277 if (!this._startTime) |
278 this._startTime = animation.startTime(); | 278 this._startTime = animation.startTime(); |
279 | 279 |
280 // This shows at most 2 iterations | 280 // This shows at most 3 iterations |
281 var iterations = animation.source().iterations() || 1; | 281 var duration = animation.source().duration() * Math.min(3, animation.sou
rce().iterations()); |
282 var duration = animation.source().duration() * Math.min(3, iterations); | 282 var requiredDuration = animation.startTime() + animation.source().delay(
) + duration + animation.source().endDelay() - this.startTime(); |
283 var requiredDuration = animation.startTime() + duration + animation.sour
ce().delay() - this.startTime(); | |
284 if (requiredDuration > this._duration * 0.8) { | 283 if (requiredDuration > this._duration * 0.8) { |
285 resized = true; | 284 resized = true; |
286 this._duration = requiredDuration * 1.5; | 285 this._duration = requiredDuration * 1.5; |
287 this._animateTime(animation.startTime() - this.startTime()); | 286 this._animateTime(animation.startTime() - this.startTime()); |
288 } | 287 } |
289 return resized; | 288 return resized; |
290 }, | 289 }, |
291 | 290 |
292 /** | 291 /** |
293 * @param {number=} time | 292 * @param {number=} time |
294 */ | 293 */ |
295 _animateTime: function(time) | 294 _animateTime: function(time) |
296 { | 295 { |
297 var oldPlayer = this._scrubberPlayer; | 296 var oldPlayer = this._scrubberPlayer; |
298 | 297 |
299 this._scrubberPlayer = this._timelineScrubber.animate([ | 298 this._scrubberPlayer = this._timelineScrubber.animate([ |
300 { transform: "translateX(0px)" }, | 299 { transform: "translateX(0px)" }, |
301 { transform: "translateX(" + (this._cachedTimelineWidth - this._scr
ubberRadius) + "px)" } | 300 { transform: "translateX(" + (this.width() - this._scrubberRadius)
+ "px)" } |
302 ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRati
o(), fill: "forwards" }); | 301 ], { duration: this.duration() - this._scrubberRadius / this.pixelMsRati
o(), fill: "forwards" }); |
303 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate; | 302 this._scrubberPlayer.playbackRate = this._animationsPlaybackRate; |
304 | 303 |
305 if (time !== undefined) | 304 if (time !== undefined) |
306 this._scrubberPlayer.currentTime = time; | 305 this._scrubberPlayer.currentTime = time; |
307 else if (oldPlayer.playState === "finished") | 306 else if (oldPlayer.playState === "finished") |
308 this._scrubberPlayer.finish(); | 307 this._scrubberPlayer.finish(); |
309 else | 308 else |
310 this._scrubberPlayer.startTime = oldPlayer.startTime; | 309 this._scrubberPlayer.startTime = oldPlayer.startTime; |
311 | 310 |
312 if (oldPlayer) | 311 if (oldPlayer) |
313 oldPlayer.cancel(); | 312 oldPlayer.cancel(); |
314 this._timelineScrubber.classList.remove("animation-timeline-end"); | 313 this._timelineScrubber.classList.remove("animation-timeline-end"); |
315 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); | 314 this._timelineScrubberHead.window().requestAnimationFrame(this._updateSc
rubber.bind(this)); |
316 }, | 315 }, |
317 | 316 |
318 /** | 317 /** |
319 * @return {number} | 318 * @return {number} |
320 */ | 319 */ |
321 pixelMsRatio: function() | 320 pixelMsRatio: function() |
322 { | 321 { |
323 return this._cachedTimelineWidth / this.duration() || 0; | 322 return this.width() / this.duration() || 0; |
324 }, | 323 }, |
325 | 324 |
326 /** | 325 /** |
327 * @param {number} timestamp | 326 * @param {number} timestamp |
328 */ | 327 */ |
329 _updateScrubber: function(timestamp) | 328 _updateScrubber: function(timestamp) |
330 { | 329 { |
| 330 if (!this._scrubberPlayer) |
| 331 return; |
331 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(this._scrubberPlayer.currentTime)); | 332 this._timelineScrubberHead.textContent = WebInspector.UIString(Number.mi
llisToString(this._scrubberPlayer.currentTime)); |
332 if (this._scrubberPlayer.playState === "pending" || this._scrubberPlayer
.playState === "running") { | 333 if (this._scrubberPlayer.playState === "pending" || this._scrubberPlayer
.playState === "running") { |
333 this._timelineScrubberHead.window().requestAnimationFrame(this._upda
teScrubber.bind(this)); | 334 this._timelineScrubberHead.window().requestAnimationFrame(this._upda
teScrubber.bind(this)); |
334 } else if (this._scrubberPlayer.playState === "finished") { | 335 } else if (this._scrubberPlayer.playState === "finished") { |
335 this._timelineScrubberHead.textContent = WebInspector.UIString(". .
."); | 336 this._timelineScrubberHead.textContent = WebInspector.UIString(". .
."); |
336 this._timelineScrubber.classList.add("animation-timeline-end"); | 337 this._timelineScrubber.classList.add("animation-timeline-end"); |
337 } | 338 } |
338 }, | 339 }, |
339 | 340 |
340 /** | 341 /** |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
387 __proto__: WebInspector.VBox.prototype | 388 __proto__: WebInspector.VBox.prototype |
388 } | 389 } |
389 | 390 |
390 /** | 391 /** |
391 * @constructor | 392 * @constructor |
392 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode | 393 * @param {!WebInspector.AnimationModel.AnimationNode} animationNode |
393 */ | 394 */ |
394 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { | 395 WebInspector.AnimationTimeline.NodeUI = function(animationNode) { |
395 /** | 396 /** |
396 * @param {?WebInspector.DOMNode} node | 397 * @param {?WebInspector.DOMNode} node |
| 398 * @this {WebInspector.AnimationTimeline.NodeUI} |
397 */ | 399 */ |
398 function nodeResolved(node) | 400 function nodeResolved(node) |
399 { | 401 { |
400 description.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeRef
erence(node)); | 402 this._description.appendChild(WebInspector.DOMPresentationUtils.linkifyN
odeReference(node)); |
401 } | 403 } |
402 | 404 |
403 this._rows = []; | 405 this._rows = []; |
404 this.element = createElementWithClass("div", "animation-node-row"); | 406 this.element = createElementWithClass("div", "animation-node-row"); |
405 var description = this.element.createChild("div", "animation-node-descriptio
n"); | 407 this._description = this.element.createChild("div", "animation-node-descript
ion"); |
406 animationNode.getNode(nodeResolved); | 408 animationNode.getNode(nodeResolved.bind(this)); |
407 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); | 409 this._timelineElement = this.element.createChild("div", "animation-node-time
line"); |
408 } | 410 } |
409 | 411 |
410 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}
} */ | 412 /** @typedef {{element: !Element, animations: !Array<!WebInspector.AnimationUI>}
} */ |
411 WebInspector.AnimationTimeline.NodeRow; | 413 WebInspector.AnimationTimeline.NodeRow; |
412 | 414 |
413 WebInspector.AnimationTimeline.NodeUI.prototype = { | 415 WebInspector.AnimationTimeline.NodeUI.prototype = { |
414 /** | 416 /** |
415 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation | 417 * @param {!WebInspector.AnimationModel.AnimationPlayer} animation |
416 * @return {!WebInspector.AnimationTimeline.NodeRow} | 418 * @return {!WebInspector.AnimationTimeline.NodeRow} |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
477 if (this._animation.source().keyframesRule()) | 479 if (this._animation.source().keyframesRule()) |
478 this._keyframes = this._animation.source().keyframesRule().keyframes(); | 480 this._keyframes = this._animation.source().keyframesRule().keyframes(); |
479 | 481 |
480 this._nameElement = parentElement.createChild("div", "animation-name"); | 482 this._nameElement = parentElement.createChild("div", "animation-name"); |
481 this._nameElement.textContent = this._animation.name(); | 483 this._nameElement.textContent = this._animation.name(); |
482 | 484 |
483 this._svg = parentElement.createSVGChild("svg", "animation-ui"); | 485 this._svg = parentElement.createSVGChild("svg", "animation-ui"); |
484 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); | 486 this._svg.setAttribute("height", WebInspector.AnimationUI.Options.AnimationS
VGHeight); |
485 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; | 487 this._svg.style.marginLeft = "-" + WebInspector.AnimationUI.Options.Animatio
nMargin + "px"; |
486 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); | 488 this._svg.addEventListener("mousedown", this._mouseDown.bind(this, WebInspec
tor.AnimationUI.MouseEvents.AnimationDrag, null)); |
| 489 this._activeIntervalGroup = this._svg.createSVGChild("g"); |
487 | 490 |
488 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, beziers: !Object.<number, !Element>}>} */ | 491 /** @type {!Array.<{group: ?Element, animationLine: ?Element, keyframePoints
: !Object.<number, !Element>, beziers: !Object.<number, !Element>}>} */ |
489 this._cachedElements = []; | 492 this._cachedElements = []; |
490 | 493 |
491 this._movementInMs = 0; | 494 this._movementInMs = 0; |
492 this.redraw(); | 495 this.redraw(); |
493 } | 496 } |
494 | 497 |
495 /** | 498 /** |
496 * @enum {string} | 499 * @enum {string} |
(...skipping 16 matching lines...) Expand all Loading... |
513 | 516 |
514 /** | 517 /** |
515 * @param {?WebInspector.DOMNode} node | 518 * @param {?WebInspector.DOMNode} node |
516 */ | 519 */ |
517 setNode: function(node) | 520 setNode: function(node) |
518 { | 521 { |
519 this._node = node; | 522 this._node = node; |
520 }, | 523 }, |
521 | 524 |
522 /** | 525 /** |
| 526 * @param {!Element} parentElement |
| 527 * @param {string} className |
| 528 */ |
| 529 _createLine: function(parentElement, className) |
| 530 { |
| 531 var line = parentElement.createSVGChild("line", className); |
| 532 line.setAttribute("x1", WebInspector.AnimationUI.Options.AnimationMargin
); |
| 533 line.setAttribute("y1", WebInspector.AnimationUI.Options.AnimationHeight
); |
| 534 line.setAttribute("y2", WebInspector.AnimationUI.Options.AnimationHeight
); |
| 535 line.style.stroke = this._color(); |
| 536 return line; |
| 537 }, |
| 538 |
| 539 /** |
523 * @param {number} iteration | 540 * @param {number} iteration |
524 * @param {!Element} parentElement | 541 * @param {!Element} parentElement |
525 */ | 542 */ |
526 _drawAnimationLine: function(iteration, parentElement) | 543 _drawAnimationLine: function(iteration, parentElement) |
527 { | 544 { |
528 var cache = this._cachedElements[iteration]; | 545 var cache = this._cachedElements[iteration]; |
529 if (!cache.animationLine) | 546 if (!cache.animationLine) |
530 cache.animationLine = parentElement.createSVGChild("line", "animatio
n-line"); | 547 cache.animationLine = this._createLine(parentElement, "animation-lin
e"); |
531 cache.animationLine.setAttribute("y1", WebInspector.AnimationUI.Options.
AnimationHeight); | 548 cache.animationLine.setAttribute("x2", (this._duration() * this._timelin
e.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2))
; |
532 cache.animationLine.setAttribute("x1", WebInspector.AnimationUI.Options.
AnimationMargin); | |
533 cache.animationLine.setAttribute("x2", this._duration() * this._timeline
.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin); | |
534 cache.animationLine.setAttribute("y2", WebInspector.AnimationUI.Options.
AnimationHeight); | |
535 cache.animationLine.style.stroke = this._color(); | |
536 }, | 549 }, |
537 | 550 |
538 /** | 551 /** |
| 552 * @param {!Element} parentElement |
| 553 */ |
| 554 _drawDelayLine: function(parentElement) |
| 555 { |
| 556 if (!this._delayLine) { |
| 557 this._delayLine = this._createLine(parentElement, "animation-delay-l
ine"); |
| 558 this._endDelayLine = this._createLine(parentElement, "animation-dela
y-line"); |
| 559 } |
| 560 this._delayLine.setAttribute("x1", WebInspector.AnimationUI.Options.Anim
ationMargin); |
| 561 this._delayLine.setAttribute("x2", (this._delay() * this._timeline.pixel
MsRatio() + WebInspector.AnimationUI.Options.AnimationMargin).toFixed(2)); |
| 562 var leftMargin = (this._delay() + this._duration() * this._animation.sou
rce().iterations()) * this._timeline.pixelMsRatio(); |
| 563 this._endDelayLine.style.transform = "translateX(" + Math.min(leftMargin
, this._timeline.width()).toFixed(2) + "px)"; |
| 564 this._endDelayLine.setAttribute("x1", WebInspector.AnimationUI.Options.A
nimationMargin); |
| 565 this._endDelayLine.setAttribute("x2", (this._animation.source().endDelay
() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationM
argin).toFixed(2)); |
| 566 }, |
| 567 |
| 568 /** |
539 * @param {number} iteration | 569 * @param {number} iteration |
540 * @param {!Element} parentElement | 570 * @param {!Element} parentElement |
541 * @param {number} x | 571 * @param {number} x |
542 * @param {number} keyframeIndex | 572 * @param {number} keyframeIndex |
543 * @param {boolean} attachEvents | 573 * @param {boolean} attachEvents |
544 */ | 574 */ |
545 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) | 575 _drawPoint: function(iteration, parentElement, x, keyframeIndex, attachEvent
s) |
546 { | 576 { |
547 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { | 577 if (this._cachedElements[iteration].keyframePoints[keyframeIndex]) { |
548 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x); | 578 this._cachedElements[iteration].keyframePoints[keyframeIndex].setAtt
ribute("cx", x.toFixed(2)); |
549 return; | 579 return; |
550 } | 580 } |
551 | 581 |
552 var circle = parentElement.createSVGChild("circle", keyframeIndex <= 0 ?
"animation-endpoint" : "animation-keyframe-point"); | 582 var circle = parentElement.createSVGChild("circle", keyframeIndex <= 0 ?
"animation-endpoint" : "animation-keyframe-point"); |
553 circle.setAttribute("cx", x); | 583 circle.setAttribute("cx", x.toFixed(2)); |
554 circle.setAttribute("cy", WebInspector.AnimationUI.Options.AnimationHeig
ht); | 584 circle.setAttribute("cy", WebInspector.AnimationUI.Options.AnimationHeig
ht); |
555 circle.style.stroke = this._color(); | 585 circle.style.stroke = this._color(); |
556 circle.setAttribute("r", WebInspector.AnimationUI.Options.AnimationMargi
n / 2); | 586 circle.setAttribute("r", WebInspector.AnimationUI.Options.AnimationMargi
n / 2); |
557 | 587 |
558 if (keyframeIndex <= 0) | 588 if (keyframeIndex <= 0) |
559 circle.style.fill = this._color(); | 589 circle.style.fill = this._color(); |
560 | 590 |
561 this._cachedElements[iteration].keyframePoints[keyframeIndex] = circle; | 591 this._cachedElements[iteration].keyframePoints[keyframeIndex] = circle; |
562 | 592 |
563 if (!attachEvents) | 593 if (!attachEvents) |
(...skipping 14 matching lines...) Expand all Loading... |
578 * @param {!Element} parentElement | 608 * @param {!Element} parentElement |
579 * @param {number} leftDistance | 609 * @param {number} leftDistance |
580 * @param {number} width | 610 * @param {number} width |
581 * @param {!WebInspector.Geometry.CubicBezier} bezier | 611 * @param {!WebInspector.Geometry.CubicBezier} bezier |
582 */ | 612 */ |
583 _renderBezierKeyframe: function(iteration, keyframeIndex, parentElement, lef
tDistance, width, bezier) | 613 _renderBezierKeyframe: function(iteration, keyframeIndex, parentElement, lef
tDistance, width, bezier) |
584 { | 614 { |
585 var bezierCache = this._cachedElements[iteration].beziers; | 615 var bezierCache = this._cachedElements[iteration].beziers; |
586 if (!bezierCache[keyframeIndex]) | 616 if (!bezierCache[keyframeIndex]) |
587 bezierCache[keyframeIndex] = parentElement.createSVGChild("path", "a
nimation-keyframe"); | 617 bezierCache[keyframeIndex] = parentElement.createSVGChild("path", "a
nimation-keyframe"); |
588 bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistanc
e + "px)"; | 618 bezierCache[keyframeIndex].style.transform = "translateX(" + leftDistanc
e.toFixed(2) + "px)"; |
589 bezierCache[keyframeIndex].style.fill = this._color(); | 619 bezierCache[keyframeIndex].style.fill = this._color(); |
590 WebInspector.BezierUI.drawVelocityChart(bezier, bezierCache[keyframeInde
x], width); | 620 WebInspector.BezierUI.drawVelocityChart(bezier, bezierCache[keyframeInde
x], width); |
591 }, | 621 }, |
592 | 622 |
593 redraw: function() | 623 redraw: function() |
594 { | 624 { |
595 var iterationWidth = this._duration() * this._timeline.pixelMsRatio(); | 625 var durationWithDelay = this._delay() + this._duration() * this._animati
on.source().iterations() + this._animation.source().endDelay(); |
596 var svgWidth = this._animation.source().iterations() ? Math.min(this._ti
meline.width(), iterationWidth * this._animation.source().iterations()) : this._
timeline.width(); | 626 var svgWidth = Math.min(this._timeline.width(), durationWithDelay * this
._timeline.pixelMsRatio()); |
597 svgWidth += 2 * WebInspector.AnimationUI.Options.AnimationMargin; | 627 var leftMargin = ((this._animation.startTime() - this._timeline.startTim
e()) * this._timeline.pixelMsRatio()).toFixed(2); |
598 var leftMargin = (this._animation.startTime() - this._timeline.startTime
() + this._delay()) * this._timeline.pixelMsRatio(); | 628 |
599 this._svg.setAttribute("width", svgWidth); | 629 this._svg.setAttribute("width", svgWidth + 2 * WebInspector.AnimationUI.
Options.AnimationMargin); |
600 this._svg.style.transform = "translateX(" + leftMargin + "px)"; | 630 this._svg.style.transform = "translateX(" + leftMargin + "px)"; |
601 this._nameElement.style.transform = "translateX(" + leftMargin + "px)"; | 631 this._activeIntervalGroup.style.transform = "translateX(" + (this._delay
() * this._timeline.pixelMsRatio()).toFixed(2) + "px)"; |
602 this._nameElement.style.width = svgWidth + "px"; | 632 |
| 633 this._nameElement.style.transform = "translateX(" + (leftMargin + this._
delay() * this._timeline.pixelMsRatio() + WebInspector.AnimationUI.Options.Anima
tionMargin) + "px)"; |
| 634 this._nameElement.style.width = this._duration() * this._timeline.pixelM
sRatio() + "px"; |
| 635 this._drawDelayLine(this._svg); |
603 | 636 |
604 if (this._animation.type() === "CSSTransition") { | 637 if (this._animation.type() === "CSSTransition") { |
605 this._renderTransition(); | 638 this._renderTransition(); |
606 return; | 639 return; |
607 } | 640 } |
608 | 641 |
609 var numIterations = this._animation.source().iterations() ? this._animat
ion.source().iterations() : Infinity; | 642 this._renderIteration(this._activeIntervalGroup, 0); |
610 this._renderIteration(this._svg, 0); | |
611 if (!this._tailGroup) | 643 if (!this._tailGroup) |
612 this._tailGroup = this._svg.createSVGChild("g", "animation-tail-iter
ations"); | 644 this._tailGroup = this._activeIntervalGroup.createSVGChild("g", "ani
mation-tail-iterations"); |
613 for (var iteration = 1; iteration < numIterations && iterationWidth * (i
teration - 1) < this._timeline.width(); iteration++) | 645 var iterationWidth = this._duration() * this._timeline.pixelMsRatio(); |
| 646 for (var iteration = 1; iteration < this._animation.source().iterations(
) && iterationWidth * (iteration - 1) < this._timeline.width(); iteration++) |
614 this._renderIteration(this._tailGroup, iteration); | 647 this._renderIteration(this._tailGroup, iteration); |
615 }, | 648 }, |
616 | 649 |
617 _renderTransition: function() | 650 _renderTransition: function() |
618 { | 651 { |
619 if (!this._cachedElements[0]) | 652 if (!this._cachedElements[0]) |
620 this._cachedElements[0] = { animationLine: null, keyframePoints: {},
beziers: {}, group: null }; | 653 this._cachedElements[0] = { animationLine: null, keyframePoints: {},
beziers: {}, group: null }; |
621 this._drawAnimationLine(0, this._svg); | 654 this._drawAnimationLine(0, this._activeIntervalGroup); |
622 var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.sou
rce().easing()); | 655 var bezier = WebInspector.Geometry.CubicBezier.parse(this._animation.sou
rce().easing()); |
623 // FIXME: add support for step functions | 656 // FIXME: add support for step functions |
624 if (bezier) | 657 if (bezier) |
625 this._renderBezierKeyframe(0, 0, this._svg, WebInspector.AnimationUI
.Options.AnimationMargin, this._duration() * this._timeline.pixelMsRatio(), bezi
er); | 658 this._renderBezierKeyframe(0, 0, this._activeIntervalGroup, WebInspe
ctor.AnimationUI.Options.AnimationMargin, this._duration() * this._timeline.pixe
lMsRatio(), bezier); |
626 this._drawPoint(0, this._svg, WebInspector.AnimationUI.Options.Animation
Margin, 0, true); | 659 this._drawPoint(0, this._activeIntervalGroup, WebInspector.AnimationUI.O
ptions.AnimationMargin, 0, true); |
627 this._drawPoint(0, this._svg, this._duration() * this._timeline.pixelMsR
atio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, true); | 660 this._drawPoint(0, this._activeIntervalGroup, this._duration() * this._t
imeline.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin, -1, t
rue); |
628 }, | 661 }, |
629 | 662 |
630 /** | 663 /** |
631 * @param {!Element} parentElement | 664 * @param {!Element} parentElement |
632 * @param {number} iteration | 665 * @param {number} iteration |
633 */ | 666 */ |
634 _renderIteration: function(parentElement, iteration) | 667 _renderIteration: function(parentElement, iteration) |
635 { | 668 { |
636 if (!this._cachedElements[iteration]) | 669 if (!this._cachedElements[iteration]) |
637 this._cachedElements[iteration] = { animationLine: null, keyframePoi
nts: {}, beziers: {}, group: parentElement.createSVGChild("g") }; | 670 this._cachedElements[iteration] = { animationLine: null, keyframePoi
nts: {}, beziers: {}, group: parentElement.createSVGChild("g") }; |
638 var group = this._cachedElements[iteration].group; | 671 var group = this._cachedElements[iteration].group; |
639 group.style.transform = "translateX(" + (iteration * this._duration() *
this._timeline.pixelMsRatio()) + "px)"; | 672 group.style.transform = "translateX(" + (iteration * this._duration() *
this._timeline.pixelMsRatio()).toFixed(2) + "px)"; |
640 this._drawAnimationLine(iteration, group); | 673 this._drawAnimationLine(iteration, group); |
641 console.assert(this._keyframes.length > 1); | 674 console.assert(this._keyframes.length > 1); |
642 for (var i = 0; i < this._keyframes.length - 1; i++) { | 675 for (var i = 0; i < this._keyframes.length - 1; i++) { |
643 var leftDistance = this._offset(i) * this._duration() * this._timeli
ne.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin; | 676 var leftDistance = this._offset(i) * this._duration() * this._timeli
ne.pixelMsRatio() + WebInspector.AnimationUI.Options.AnimationMargin; |
644 var width = this._duration() * (this._offset(i + 1) - this._offset(i
)) * this._timeline.pixelMsRatio(); | 677 var width = this._duration() * (this._offset(i + 1) - this._offset(i
)) * this._timeline.pixelMsRatio(); |
645 var bezier = WebInspector.Geometry.CubicBezier.parse(this._keyframes
[i].easing()); | 678 var bezier = WebInspector.Geometry.CubicBezier.parse(this._keyframes
[i].easing()); |
646 // FIXME: add support for step functions | 679 // FIXME: add support for step functions |
647 if (bezier) | 680 if (bezier) |
648 this._renderBezierKeyframe(iteration, i, group, leftDistance, wi
dth, bezier); | 681 this._renderBezierKeyframe(iteration, i, group, leftDistance, wi
dth, bezier); |
649 if (i || (!i && iteration === 0)) | 682 if (i || (!i && iteration === 0)) |
(...skipping 200 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
850 "Light Blue": WebInspector.Color.parse("#03A9F4"), | 883 "Light Blue": WebInspector.Color.parse("#03A9F4"), |
851 "Deep Orange": WebInspector.Color.parse("#FF5722"), | 884 "Deep Orange": WebInspector.Color.parse("#FF5722"), |
852 "Blue": WebInspector.Color.parse("#5677FC"), | 885 "Blue": WebInspector.Color.parse("#5677FC"), |
853 "Lime": WebInspector.Color.parse("#CDDC39"), | 886 "Lime": WebInspector.Color.parse("#CDDC39"), |
854 "Blue Grey": WebInspector.Color.parse("#607D8B"), | 887 "Blue Grey": WebInspector.Color.parse("#607D8B"), |
855 "Pink": WebInspector.Color.parse("#E91E63"), | 888 "Pink": WebInspector.Color.parse("#E91E63"), |
856 "Green": WebInspector.Color.parse("#0F9D58"), | 889 "Green": WebInspector.Color.parse("#0F9D58"), |
857 "Brown": WebInspector.Color.parse("#795548"), | 890 "Brown": WebInspector.Color.parse("#795548"), |
858 "Cyan": WebInspector.Color.parse("#00BCD4") | 891 "Cyan": WebInspector.Color.parse("#00BCD4") |
859 } | 892 } |
OLD | NEW |