Заставить визуальный объект во Flex 4 двигаться по круговой траектории движения

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

Я понимаю, что это очень старый вопрос.Однако, учитывая, что поиск в Google по запросу flex 4 circular motion возвращает эту тему как самый первый результат, я подумал, что, возможно, стоит внести небольшой вклад.

Решение Robusto работает - если вы не противанимация обновляется самостоятельно.Если, с другой стороны, вы хотите использовать spark.effects.Animate, то с помощью Sine easer можно выполнить то же самое.

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

Свойство easeInFraction указывает, какая часть послабления расходуется.ускорение.Для синуса, это часть, потраченная на подъем по кривой синуса.Установив для этой дроби значение 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

Вы можете использовать триг, чтобы найти окружность:

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 для ваших орбитальных и орбитальных элементов, чтобы центр первого мог вращаться вокруг последнего.