Question

我已经阅读过关于Angular animation interface with keyframes的内容 - 并希望对一般对象属性使用相同的接口 - 这样就可以对画布动画使用相同的api。

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

我可以向任何方向提示： - ）

Answer 1

Angular动画界面位于Web Animation API的顶部，只能为DOM元素设置动画：

Web动画API允许对网页的呈现进行同步和定时更改，即DOM元素的动画。它通过组合两个模型来实现：时序模型和动画模型。

然而，您可以查看API的polyfill，看看它是如何实现的，并将其传输用于画布。

你也可以通过将动画应用到不在视野中的DOM元素来“破解”它，然后每个帧抓取位置并转换并将它们应用到画布。但是，某些性能开销可能并不理想，也有一些限制（如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>

是否可以使用angular2关键帧动画进行画布绘制

1 个答案:

概念验证黑客