Question

我似乎无法弄清楚如何完成一个相当简单的任务：我有一个简单的图形，我想对它应用一个“轨道”效果 - 这样图形就会围绕任意一个圆圈移动点（不绕自己的中心旋转）。

<s:Ellipse id="circle" width="100" height="100">
  <s:fill>
    <s:SolidColor color="0x000000" />
  </s:fill>
</s:Ellipse>

我试图用spark.effects.Animate做一些事但却无法弄清楚如何配置运动路径 - 我开始考虑笛卡尔与极坐标系以及每个坐标系的适当圆方程，然后意识到我可能已经过了 - 想一想。虽然我认为这是一个相当普遍的问题，但在网上搜索却没有结果。

P.S。我想尽可能多地使用Flex 4，所以如果答案重用Flex 4类，我会很感激。

Answer 1

我意识到这是一个非常古老的问题。但是，考虑到谷歌搜索flex 4 circular motion作为第一个结果返回此帖子，我认为做出一点贡献可能是值得的。

Robusto的解决方案确实有效 - 如果您不介意自己处理动画更新。另一方面，如果你想使用spark.effects.Animate，那么使用正弦缓动器可以完成同样的事情。

<s:Sine id="cosine" easeInFraction="0.0" />
<s:Sine id="sine" easeInFraction="1.0" />

easeInFraction属性指定缓动的哪个部分用于加速。对于Sine缓动器，这是攀爬正弦曲线所花费的部分。通过将此分数设置为0.0，缓动器从曲线的顶部开始，成为余弦。

一个小例子（我意识到主要的序列有点冗长。你可能想要一个新的组件扩展spark.effects.Sequence类，而不是在你的主应用程序中有这个全部，但这只是为了给出一般的想法）：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600"
               applicationComplete="move_circle.play([circle])">

    <fx:Declarations>
        <fx:int id="mid_x">500</fx:int>
        <fx:int id="mid_y">300</fx:int>
        <fx:int id="radius">200</fx:int>
        <s:Sine id="cosine" easeInFraction="0.0" />
        <s:Sine id="sine" easeInFraction="1.0" />

        <s:Sequence id="move_circle" repeatCount="0">
            <s:Parallel>
                <s:Animate easer="{cosine}">
                    <s:SimpleMotionPath property="x" valueTo="{mid_x + radius}" />
                </s:Animate>
                <s:Animate easer="{sine}">
                    <s:SimpleMotionPath property="y" valueTo="{mid_y}" />
                </s:Animate>
            </s:Parallel>
            <s:Parallel>
                <s:Animate easer="{sine}">
                    <s:SimpleMotionPath property="x" valueTo="{mid_x}" />
                </s:Animate>
                <s:Animate easer="{cosine}">
                    <s:SimpleMotionPath property="y" valueTo="{mid_y + radius}" />
                </s:Animate>
            </s:Parallel>
            <s:Parallel>
                <s:Animate easer="{cosine}">
                    <s:SimpleMotionPath property="x" valueTo="{mid_x - radius}" />
                </s:Animate>
                <s:Animate easer="{sine}">
                    <s:SimpleMotionPath property="y" valueTo="{mid_y}" />
                </s:Animate>
            </s:Parallel>
            <s:Parallel>
                <s:Animate easer="{sine}">
                    <s:SimpleMotionPath property="x" valueTo="{mid_x}" />
                </s:Animate>
                <s:Animate easer="{cosine}">
                    <s:SimpleMotionPath property="y" valueTo="{mid_y - radius}" />
                </s:Animate>
            </s:Parallel>
        </s:Sequence>
    </fx:Declarations>

    <s:Ellipse id="circle"
               x="{mid_x}" y="{mid_y - radius}"
               width="100" height="100">
        <s:fill>
            <s:SolidColor color="#000000" />
        </s:fill>
    </s:Ellipse>
</s:Application>

Answer 2

您可以使用trig来查找周长：

var radius = 50;
for (var i:int = 0, imax:int = 359) : void {
    var radians:Number = i * (Math.PI/180);
    pointX = radius * Math.cos(radians);
    pointY = radius * Math.sin(radians);
    // position something at pointX,pointY
}

围绕一个圆圈进行一次，并为每个度数绘制一个点。您可能想要计算出轨道和轨道元素的x，y偏移量，以便前者的中心围绕后者围绕轨道运行。

使Flex 4中的可视对象沿圆形运动路径移动

2 个答案: