是否可以将angular2关键帧动画用于画布绘制

我已经读过关于-并且希望对一般对象属性使用相同的接口-这将允许对画布动画也使用相同的api

这有可能吗？该示例仅提到css属性

---

iam向任何方向的提示开放：-）

角度动画界面位于顶部，只能为DOM元素设置动画：

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

不过，您可以查看API的示例，了解它是如何实现的，并将其传输到canvas

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

概念证明黑客

var ctx=c.getContext（“2d”）；
var div=document.getElementById（“测试”）；
//提取CSS动画并应用于画布
（函数循环（）{
c、 宽度=c.宽度；
ctx.fillText（“画布”，c.width-50，c.height-10）；
var cs=getComputedStyle（div）.getPropertyValue（“transform”）；//获取2D trans.matrix
//剥离文本并转换为数组
var start=cs.indexOf（“”+1；
var txt=cs.substr（开始，cs.length-start-1）；
var arr=txt.split（“，”）；
ctx.setTransform.apply（ctx，arr）；
ctx.font=“16px无衬线”；
ctx.fillText（div.innerHTML，0,10）；
请求动画帧（循环）；
})（）

body{溢出：隐藏}
#c{边框：1px实心#777}
#试验{
变换原点：0%0%；
动画：testRot无限3s线性；
字体：16px无衬线；
}
@关键帧testRot{
0%{变换：旋转（0）}
100%{变换：旋转（360度）}
}

此文本和动画来自DOM