Анимация прямоугольника со скругленными углами в ActionScript 3

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

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

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

-

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

roundRect = new 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

-

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

Спасибо.


height tween drawrectangle rounded-corners actionscript-3
person Community    schedule 15.07.2009    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Этого можно достичь с помощью «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 было правильно назначено, вы можете масштабировать (и использовать Tween) мувиклип, как задумано, без каких-либо искажений.

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

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

person Shrill    schedule 15.07.2009

arrow_upward
0
arrow_downward

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

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});
}
person Cay    schedule 27.07.2009