PDA

Просмотр полной версии : Программно анимировать движение объекта по заданной кривой.


MetSerp
28.12.2010, 15:19
есть некий объект и есть массив координат х и у через которые по порядку должен пройти объект с заданной скоростью.
Массив координат хранится в атрибутах XML
<root>
<pathGrid>
<pointGrid id="0" x="567" y="157"/>
<pointGrid id="1" x="542" y="164"/>
<pointGrid id="2" x="511" y="188"/>
<pointGrid id="3" x="493" y="208"/>
<pointGrid id="4" x="480" y="212"/>
<pointGrid id="5" x="467" y="222"/>
<pointGrid id="6" x="441" y="228"/>
<pointGrid id="7" x="404" y="259"/>
<pointGrid id="8" x="347" y="288"/>
<pointGrid id="9" x="278" y="296"/>
<pointGrid id="10" x="221" y="313"/>
<pointGrid id="11" x="189" y="298"/>
<pointGrid id="12" x="146" y="303"/>
<pointGrid id="13" x="111" y="322"/>
<pointGrid id="14" x="49" y="367.95"/>
<pointGrid id="15" x="21" y="371"/>
</pathGrid>
<boards/>
<image path="/shema.jpeg"/>
</root>
если бы точки всегда были бы одни и те же я бы анимировал не программно, через motion guide , возможно как то можно его сделать программно?
Поискав я нашел класс Bezier, но в нем объект все равно идет по траектории с единственным якорем.
Документацию и примеры которые есть - перекопал, но так и не нашел что надо.
Уже сам подзапутался как можно это реализовать .

FlashWizard
28.12.2010, 15:28
http://www.flasher.ru/forum/showthread.php?t=146483&page=1

Vilya21
28.12.2010, 15:28
делаете слушатель события Event.ENTER_FRAME, в событии присваеваете координатам x и y координаты из XML. Когда картинка пройдёт весь пусть - убираете слушатель.

terbooter
28.12.2010, 16:23
Если потребуется более продвинутая анимация.
рекомендую посмотреть на Tweener (http://code.google.com/p/tweener/)

Hidest
28.12.2010, 16:35
делаете слушатель события Event.ENTER_FRAME, в событии присваеваете координатам x и y координаты из XML. Когда картинка пройдёт весь пусть - убираете слушатель.

Тогда она будет просто перескакивать с точки на точку. Твинер использовать от одной точки до другой - будет идти по сегментам. Здесь явно нужна интерполяция.

А Besier вы посмотрите получше, там даже пример вроде был с движением по пути, и количество точек не играет значения.

MetSerp
28.12.2010, 17:11
FlashWizard, спасибо за линку, поковыряю зеленый носок.
делаете слушатель события Event.ENTER_FRAME, тогда я буду зависеть от показателя кадров в секунду, ну и плюс действительно прыжковая анимация не подойдет, объект должен "ехать".
terbooter спасибо, тоже посмотрю, нельзя ли чуть скоординировать и примерно подсказать метод?
А Besier вы посмотрите получше, там даже пример вроде был с движением по пути, и количество точек не играет значения.
если вы про шестой пример (http://code.google.com/p/bezier/source/browse/trunk/bezier/src/howtodo/Step06PointOnBezier.as?r=179), то я как раз его и смотрел и если я правильно понял то им можно воспользоваться только если рисовать много кривых по заданным точкам типа от предыдущего к последующему и уже по нему гнать объект, но тогда получается к координатам х и у надо добавлять еще координату якоря, как ее высчитывать я к сожалению не представляю :(.

Или я все же неверно понял пример?

iflamberg
28.12.2010, 17:15
Всё это слишком сложно и не нужно.
Возьмите TweenMax (http://www.greensock.com/tweenlite/#plugins), там есть движение по кривой.


import com.greensock.*;
import com.greensock.easing.*;

TweenMax.to(mc, 3, {bezier:[{x:72, y:344}, {x:282, y:189}, {x:300, y:345}], orientToBezier:true, ease:Bounce.easeOut});

MetSerp
28.12.2010, 18:52
iflamberg, спасибо, вроде бы то что нужно, но столкнулся с проблемой.
Объект летает совершенно вопреки заданным точкам и задом наперед О_о
Если в прикрепленной флэшке вы нажмете "проложить маршрут" затем двойными щелчками обозначите точки на прямоугольнике в красной рамке, а затем нажмете тестировать, то машина изобразит странный кульбит вдалеке от заданных точек.
Как я понимаю это из за того что ее гонят по глобальным координатам хотя запланировано по локальным.
но метод to через который я создаю движение является статичным и я не знаю как ему сказать что координаты не глобальные, а принадлежат определенному объекту
непосредственно код выполняющийся при нажатии кнопки "тестировать"
function test (e:MouseEvent) {
var pointsArray = new Array();
var car:Track = new Car();
car.x = outPutXML.pathGrid.pointGrid[0]. @ x;
car.y = outPutXML.pathGrid.pointGrid[0]. @ y;
pathGridPano.graphics.clear ();
pathGridPano.graphics.lineStyle (3,0xff0000,1);
pathGridPano.graphics.moveTo (outPutXML.pathGrid.pointGrid[0].@x,outPutXML.pathGrid.pointGrid[0].@y);

for (var i:int=0; i <= outPutXML.pathGrid.pointGrid.length() - 1; i++) {
pathGridPano.graphics.lineTo (outPutXML.pathGrid.pointGrid[i].@x,outPutXML.pathGrid.pointGrid[i].@y);
pointsArray.push ({x:outPutXML.pathGrid.pointGrid[i].@x,y:outPutXML.pathGrid.pointGrid[i].@y});
}

workPano.addChild (car);
TweenMax.to (car,7,{bezierThrough:pointsArray,orientToBezier:true});

}
непосредственно двигает объект
TweenMax.to (car,7,{bezierThrough:pointsArray,orientToBezier:true});
массив pointsArray содержит правильные точки, я проверял.

iflamberg
28.12.2010, 19:11
задом наперед
значит или запихиваете в xml, или достаёте из xml в неправильном порядке. Замените push на unshift.

Как я понимаю это из за того что ее гонят по глобальным координатам хотя запланировано по локальным.
Её гоняют по координатам того клипа, который для неё родительский. Конвертировать координаты с помощью функций localToGlobal,globalToLocal.

MetSerp
28.12.2010, 19:43
Замените push на unshift.
не так выразился, объект улетает по оси х, ровно в противоположную сторону от точки к которой должен стремиться.
По координатам, родителем является нужный элемент, значит дело не в них :( попробую докопаться до истины.