2012-05-06 2 views
0

Я пытаюсь создать очень простую анимацию изображения, движущегося по горизонтали на экране 300 пикселей непрерывно с помощью Flex (для запуска в браузере). Я нахожу, что анимация очень изменчив. Каждый раз, когда я запускаю анимацию, результат отличается. Иногда анимация будет играть нормально в течение нескольких секунд до появления зыби, иногда это будет происходить немедленно. Это было протестировано на нескольких машинах Windows 7 в Internet Explorer и Firefox.Очень прерывистая анимация при использовании Flex

Я пробовал несколько разных подходов, и никто, кажется, не останавливает дрожь/дрожание.

подход 1: с помощью s: перейти

<fx:Declarations> 
<s:Power id="_powerEasing" exponent="1" /> 
<s:Move id="_moveRight" target="{_sword}" xFrom="{_swordMin}" xTo="{_swordMax}" 
       duration="1000" 
       easer="{powerEasing}" /> 
</fx:Declarations> 

<s:BitmapImage id="_sword" visible="true" scaleX=".99" scaleY=".99" 
    source="@Embed('/assets/images/combat2/attackbar/sword.png')" x="0" y="0" /> 

Что называется использованием _moveRight.play();

Второй подход, который я пробовал, - это перемещение объекта изображения на каждый входной кадр. Новая x-позиция изображения рассчитывается путем учета разницы во времени и умножения на скорость. Что выглядит так:

var now:Number = getTimer(); 
var toMove:Number = ((now - _lastTime)/1000) * _speed; 
_sword.x += toMove; 
_lastTime = now; 

Третий, и последний подход, который был опробован, создавал это как видеоклип в Flash. Это тоже было изменчивым.

Наилучший результат был подход 1.

Я экспериментировал с с: BitmapImage, тх: Изображение, а также с помощью FlexSprite, но я начинаю думать, что там должно быть что-то мне не хватает, чтобы сделать это гладко.

Любые идеи или рекомендации, которые мне не хватает, что поможет этой анимации?

Редактировать: спасибо за все предложения, но ничего не сработало.

Вот простой пример. Я включил источник просмотра, чтобы вы могли увидеть реализацию. http://legionofderp.com/sword-demo/SwordTestDemo.swf

Он может работать бесперебойно в течение нескольких секунд при первом, но тогда анимация начинает работать очень изменчивый

Edit 2: Вот еще один пример, это один был создан с использованием Flash.

Ответ Спасибо за все предложения всем. Я смог заставить анимацию работать плавно, установив параметр wmode в html-шаблоне, чтобы направить.

+0

Мне было бы интересно увидеть этот прогон ... похоже, что что-то еще происходит; нет никакой причины, чтобы простой переход перехода не был гладким на рабочем столе. Я мог бы предложить посмотреть в GreenSock библиотеку tween. (Я сделал демонстрацию n, что здесь: https://www.flextras.com/blog/index.cfm/2011/11/15/TweenLite--10142011---Episode-118--Flextras-Friday-Lunch) Если вы строите игру, которую вы, вероятно, захотите исследовать концепцию Blitting. – JeffryHouser

+0

Какой размер в kb для sword.png? –

+0

размер 2.59kb –

ответ

0

Попробуйте использовать событие Enterframe rathar, чем таймер (getTimer или setInterval). По моему опыту я заметил, что таймеры имеют интенсивность процессора и поэтому также влияют на анимацию. Пока событие enterFrame более плавное. Попробуй.

addEventListener(Event.ENTER_FRAME , move) 

function move (e:Event) 
{ 

    // your animation code here 
} 
+0

Я пробовал как вводить фрейм, так и анимацию на основе таймера. –

+0

и как насчет растрового кэширования? –

0

Когда испуг, это движение анимация очень медленно (< 1px движение каждой итерации)? Если это так, вы можете попробовать заставить свойство pixelSnapping на вашем растровом изображении НИКОГДА.

Кроме того, вы экспериментировали с переключением на ускорение процессора или графического процессора - если да, то такие же результаты?

Выполняется ли запуск в автономном флеш-плеере с тем же эффектом?

Редактирование: просто заметили, что вы добавили свойства масштабирования, которые должны переопределять привязку пикселей.

Смежные вопросы