Скручивание скругленного прямоугольника в ActionScript 3 - PullRequest
Новая
       15

Скручивание скругленного прямоугольника в ActionScript 3

1 голос
/ 15 июля 2009

Я бы хотел анимацию между коротким закругленным прямоугольником и высоким закругленным прямоугольником. (Я только хочу иметь дело с высотой - никаких других параметров). Я программирую на ActionScript 3. Мой твининг-движок - TweenLite.

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

Вот простой пример моего кода:

-

Нарисуйте скругленный прямоугольник:

roundRect = новый Sprite ();
roundRect.graphics.beginFill (0x000000);
roundRect.graphics.drawRoundRect (0,0,50,15,4,4); // Высота оригинала: 15
roundRect.graphics.endFill ();
AddChild (RoundRect);

Затем я слушаю событие щелчка мыши на скругленном прямоугольнике.

Событие мыши вызывает функцию со следующим кодом:

TweenLite.to (this.roundRect, 1, {height: 120}); // Конечная высота: 120

-

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

Спасибо.

Ответы [ 2 ]

2 голосов
/ 15 июля 2009

Этого можно добиться с помощью «9-фрагментного масштабирования».

Ниже приведены два руководства по настройке мувиклипа для использования направляющих с 9 срезами: одно делается с помощью IDE (с использованием рекомендаций), а другое - с помощью кода (путем определения прямоугольника, называемого сеткой, и назначения его для мувиклипа свойство scale9Grid).

http://www.sephiroth.it/tutorials/flashPHP/scale9/

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html

После того, как свойство scale9Grid было назначено правильно, вы можете масштабировать (и анимацию) фрагмент ролика, как и предполагалось, без каких-либо искажений.

Возможно, также стоит прочитать: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/, который описывает различные сценарии, когда scale9grid работает и не работает. (в основном из-за наличия вложенных дочерних элементов и не векторной графики внутри сетки).

Надеюсь, это поможет.

0 голосов
/ 27 июля 2009

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

var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();

function updateRect() {
    roundRect.graphics.clear();
    roundRect.graphics.beginFill(0x000000);
    roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
    roundRect.graphics.endFill();
}

roundRect.addEventListener("click", click);
function click(e) {
    TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}
...