canvas绘图是否可以使用angular2关键帧动画

Question

我已阅读有关 Angular animation interface with keyframes 的信息 - 并希望对一般对象属性使用相同的接口 - 这将允许对 canvas 动画使用相同的 api。

这在 Angular 中可行吗？该示例仅提及 css 属性..

我愿意接受任何方向的提示:-)

Answer 1

Angular 动画界面位于 Web Animation API 之上，它只能为 DOM 元素设置动画：

The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.

不过，您可以查看 API 的 polyfill，看看它是如何实施的，并将其转移到 canvas。

您还可以通过将动画应用到视图之外的 DOM 元素来“破解”它，然后每一帧抓取位置并变换并将它们应用到 canvas。但是，某些性能开销可能并不理想，也有一些限制（如 3D 转换），因此我建议考虑为 canvas 重写 polyfill 作为更好的选择（或仅使用 CSS +DOM).

概念验证黑客

var ctx = c.getContext("2d");
var div = document.getElementById("test");

// extract CSS animation and apply to canvas
(function loop() {
  c.width = c.width;
  ctx.fillText("Canvas", c.width-50, c.height-10);

  var cs = getComputedStyle(div).getPropertyValue("transform"); // get 2D trans. matrix
  
  // strip text and convert to array
  var start = cs.indexOf("(")+1;
  var txt = cs.substr(start, cs.length - start - 1);
  var arr = txt.split(",");
  
  ctx.setTransform.apply(ctx, arr);
  ctx.font = "16px sans-serif";
  ctx.fillText(div.innerHTML, 0, 10);

  requestAnimationFrame(loop);
})()

body {overflow:hidden}
#c {border: 1px solid #777}
#test {
  transform-origin: 0% 0%;
  animation: testRot infinite 3s linear;
  font:16px sans-serif;
}

@keyframes testRot {
  0% {transform: rotate(0)}
  100% {transform: rotate(360deg)}
}

<canvas id=c></canvas>
<div id=test>This text and animation comes from DOM</div>

canvas绘图是否可以使用angular2关键帧动画

Is it possible to use angular2 keyframe animation for canvas drawing

animation

keyframe

html5-canvas

angular

概念验证黑客