如何为自定义图形组件属性设置动画答案

【问题标题】：How to animate a custom graphic component property如何为自定义图形组件属性设置动画
【发布时间】：2026-01-16 19:20:05
【问题描述】：

我创建了一个自定义计时器组件，它基本上呈现一个圆形扇区，具有默认的开始角度 (0) 和结束角度：

public class Arc extends FilledElement
{
    private var _endAngle:Number = 0;

    public function Arc()
    {
    }

    public function get endAngle():Number
    {
        return _endAngle;
    }

    public function set endAngle(value:Number):void
    {
        if (_endAngle == value)
            return;

        _endAngle = value;
        invalidateDisplayList();
    }

    // left out the rendering logic, for clarity
}

到目前为止工作正常且花花公子。这是呈现扇区的代码：

<org:Arc id="arc"
     endAngle="135">
    <org:fill>
        <s:SolidColor color="#FFFF00" />
    </org:fill>
</org:Arc>

但是，我想为 endAngle 属性设置动画。这是旨在实现此目的的 MXML 代码：

<s:Animate id="effect"
       duration="2000"
       target="arc">
    <s:SimpleMotionPath property="endAngle"
            valueFrom="90"
            valueTo="180" />
</s:Animate>

问题是当我播放效果时，我得到这个错误： Error: Property endAngle is not a property or a style on object arc: TypeError: Error #1006: value is not a function..

有没有其他人遇到过这个问题，或者更好的是，有没有人知道我做错了什么以及如何解决这个问题？

谢谢。

【问题讨论】：

标签： actionscript-3 apache-flex animation flex4.5 mxml

【解决方案1】：

Animate#target 属性不会将字符串值评估为对象 ID。您必须改为绑定目标元素（否则它将尝试在字符串"arc" 上查找属性endAngle，这将引发您遇到的错误）：

<s:Animate id="effect" duration="2000" target="{arc}">
    <s:SimpleMotionPath property="endAngle" valueFrom="90" valueTo="180" />
</s:Animate>

请注意，您的版本和我的版本之间的唯一区别是花括号 {}

【讨论】：