Плавная анимация скольжения в Flex с большим количеством компонентов - PullRequest
0 голосов
/ 20 ноября 2010

У меня есть компонент, который я создал, который работает как Viewstack, но следующий компонент индекса скользит с одной из четырех сторон.У меня это работает достаточно хорошо, чтобы его можно было использовать, но я хочу сделать его более эффективным.

Сейчас я использую Canvas в качестве базового компонента, я создаю снимок текущего представленияиспользуя ImageSnapshot (new Bitmap( ImageSnapshot.captureBitmapData( this ) )), и я перемещаю новый индекс поверх этого изображения при изменении индекса.

Я в основном ищу предложения о том, как сделать это лучше.Взяв изображение после загрузки компонента и после того, как произошел слайд, я получил минимальное начальное смещение, но мы обычно используем его для перемещения сеток, поэтому оно почти всегда медленное на первом или первом паре слайдов.

Вот как это выглядит до сих пор:

private function creationComplete(e:Event):void
{
  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

public function set selectedIndex(value:int):void
{
  if(_selectedIndex == value + 1)
    return;
  _selectedIndex = value+1;

  var obj:UIComponent;

  tmpImage.height = height;
  tmpImage.width = width;
  tmpImage.visible = true;
  tmpImage.x = 0;
  //tmpImage.includeInLayout = true;

  for (var i:int = 1; i < numChildren; i++)
  {
    obj = UIComponent(getChildAt(i));
    //obj.x = width;
    if(i == _selectedIndex){
      obj.visible = true;
      objDisplay = obj;
    }
    else
      obj.visible = false;
  }

  mv1.target = tmpImage;
  mv2.target = objDisplay;

  switch ( direction )
  {
    // X/Y sliding logic
  }
  parEfect.play();

  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

Если вам интересно, я использую индекс 0 холста для изображения и смещаю свой пользовательский selectedIndex на 1.

Я опубликую больше, если нужно, но я хочу свести вопрос к минимуму, и это в значительной степени подводит итог.

Любая помощь очень ценится!Я действительно хочу, чтобы этот компонент работал лучше.Кроме того, это должно быть сделано с помощью Flex 3

Ответы [ 4 ]

2 голосов
/ 26 ноября 2010

Что такое mv1 и mv2? Это Flex-эффекты? Если это так, они печально известны медленной, я рекомендую использовать TweenLite . Если вам абсолютно необходимо их использовать, установите suspendBackgroundProcessing = true на них. И последнее, но не менее важное: убедитесь, что на них не установлен макет. Если вы это делаете, вы вызываете переделку каждого кадра, что может легко погасить анимацию.

1 голос
/ 22 ноября 2010

Вы, вероятно, получаете некоторые обращения к памяти от всех создаваемых компонентов, а затем сразу же конвертируетесь в изображение. Я определенно попытался бы добавить немного интеллекта во время создания. Попробуйте проверить использование памяти и проверить максимальную загрузку памяти перед созданием изображения:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/system/System.html

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

Настройка очереди приоритетов для создания объектов в создаваемом классе. , , например, если у вас есть система меню, которая по умолчанию скрыта, загрузите интерфейс, а затем загружайте раскрывающееся меню только тогда, когда пользователь нажимает на него, или после того, как все другие сразу видимые объекты были созданы. Вы также сможете сделать снимок, когда все сразу видимые объекты находятся на месте, и до создания скрытых объектов.

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

0 голосов
/ 29 ноября 2010

Было бы полезно посмотреть, как вы создаете свои Move эффекты mv1 и mv2.Можно установить комбинации атрибутов *From, *To и / или *By - или различные манипуляции со свойствами, которые управляют скоростью / продолжительностью анимации - которые вместе могут вызвать «дрожание» или «дрожание»"в полученной анимации.

Конечно, также возможно, что вы сталкиваетесь с каким-то барьером производительности, но я подозреваю, что это нечто более коварное.Простой перевод («x / y скользящий») любого клипа должен работать относительно хорошо, если клип не был повернут, перекошен или масштабирован;и до тех пор, пока процессор не будет полностью загружен какой-то другой операцией, которая происходит одновременно.

В большинстве случаев при определении эффекта Move вы хотите установить как можно меньше информации и позволить Flex вычислить оптимальные значения для других вещей.Обычно это означает установку только xTo и yTo.

Кроме того, обязательно вызовите end() для ваших подростков перед тем, как начинать устанавливать новые значения (на случай, если какая-либо предыдущая последовательность все еще выполняется).

Наконец - убедитесь, что вы не конкурируете с менеджером компоновки компонента во время анимации.Пока анимация работает, вы должны полностью отключить макет ( установив autoLayout=false для компонента контейнера ) - или , вы можете изменить макет (временно) на абсолютный макет,В любом случае, анимация должна иметь возможность перемещать объекты во время работы, а перемещение элементов не должно приводить к тому, что менеджер компоновки будет пересчитывать вещи до после все кончено.По завершении вы можете снова включить любой менеджер компоновки, который у вас был изначально.

0 голосов
/ 28 ноября 2010

Используете ли вы Flex 3 или Flex 4?

Потому что, если вы используете Flex 4, я бы порекомендовал использовать Animate Filter с Shader Filter. Фильтры шейдеров используют Pixel Bender, так что вы можете создать шейдер в Pixel Bender, который будет выполнять переход между вашими 2 изображениями.

Смотрите эти 2 видео для получения дополнительной информации:

http://tv.adobe.com/watch/codedependent/pixel-bender-shaders-and-flex-4/

http://tv.adobe.com/watch/codedependent/shader-transitions-in-flex-4

...