在Flex 4中创建一个视觉对象，沿圆形运动路径移动

Question

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

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

我试图做使用spark.effects.Animate的东西，但无法弄清楚如何配置运动路径 - 我开始思考笛卡尔VS极坐标为每个系统和相应的圆的方程，然后意识到我可能过度思考它。虽然我认为这是一个相当普遍的问题，搜索网络没有取得任何结果。

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属性指定缓动的哪部分花费在加速。对于正弦曲线，这是用来爬上正弦曲线的部分。通过将这个分数设置为0.0，easer从曲线的顶部开始，变成余弦。我认识到主序列有点冗长，你可能想要创建一个新的组件来扩展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

您可以使用触发来求周长：

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的轨道和轨道元素的偏移量，以便前者的中心看起来围绕后者的轨道。