在Flex中设计图形坐标动画插值的思路

最近看了不少Html5中svg动画，对图形坐标的动画特别感到喜欢。

但是在Flex是不支持图形坐标的动画的。

原因从spark.primitives下的Path类可以知道：

Path的data属性是String型，需要填写符合SVG格式的坐标字符串。

而Flex的动画基类Animation是不支持非Number型进行动画插值的。

API里这么描述的： IInterpolator 接口是由为 Animation 类计算值的类实现的。Animation 类可以处理在 Number 值和 Number 值的数组之间的参量插值，但它无法处理不同类型的插值，或在不同类型的值之间的插值。

如果要对Path.data进行插值，就必须自己扩展个IInterpolator 接口，以实现对svg格式坐标的计算。

下表是两帧之间的坐标数据：

 元素1元素2元素3元素4元素5第一帧M 0 0L 0 8L 8 8L 4 4Z第二帧M 2 2L 3 8L 10 10L 5 5Z

可以看出，唯有把两个图形的坐标串中 每个坐标对象一一对应起来，才可能实现插值。

这里面有几个问题：

1 不同帧之间坐标点数量必须一样，否则难以对应（不同点数也可以实现插值，这里就不讨论了）；

2 不同帧之间坐标点对象如果一一对应——动画给人的感觉是整体扩缩，如果不一一对应——动画给人的感觉是图形整体打乱；

3 如果用了画直线、贝塞尔曲线等关键字（H V Q C），基本无法对应了。

所以，图形的动画插值最好有其他封装类把SVG数据转为良好符合空间关系的对象。

以后我打算用esri 的ArcGIS for Flex API 中的类来测试这种动画。这个API对点线面对象的都有良好的封装，可以方便的拿到坐标点对象，但其并不支持SVG坐标格式。