Sergey MalenkovSoftware Engineer,
Sun Microsystems
날아다니는 문자들 만들기
이 예제는 몇몇의 노드들을 위해서 어떻게 애니메이션을 생성하는지 보여줍니다. 여러분이 문자를 클릭할때 그들은 변형되기 시작합니다.
코드 이해하기
The Letters 클래스는 마우스를 클릭하면 변형되기 시작하는 텍스트 레이블을 생성합니다. 컴포넌트는 무엇보다 개발자가 변수를 변경함으로서 쉽게 외관을 변경할수 있는 인스턴스 변수에 의존하는 것에 기초합니다.
첫째 아래 코드 조각에서 보여지는 것과 같이 몇개의 노드들로 텍스트 문자열을 쪼갭니다(노드 당 하나의 문자로)
Source Code
def chars = for (i in [1..text.length()]) Text { textOrigin: TextOrigin.TOP content: text.substring(i - 1, i) strokeWidth: 2 stroke: Color.BLUE fill: Color.YELLOW font: Font { size: 200 } }
Figure 1: 각 문자당 하나의 텍스트 노드 생성하기
둘째 레이아웃 기법을 사용하여 모든 노드들을 배치합니다. 아래 코드들은 이 작업을 완수합니다.
Source Code
impl_layout: function(group) {
if (not anim.running) {
var width: Number;
var height: Number;
for (node in group.content) {
node.translateX = width;
width += node.boundsInLocal.width;
if (height < node.boundsInLocal.height) {
height = node.boundsInLocal.height
}
}
width = 0.5 * (group.scene.width - width);
height = 0.5 * (group.scene.height - height);
for (node in group.content) {
node.translateX += width;
node.translateY = height;
}
}
}
Figure 2: 모든 Node들 배치하기
마지막으로 아래 보여지는 코드 조각들에서 보여지는 것처럼 애니메이션이 시작될 때 키 프레임들은 수정됩니다.
Source Code
anim.keyFrames = for (node in chars) {
def i1 = Interpolator.SPLINE(rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble());
def i2 = Interpolator.SPLINE(rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble());
def op1 = node.opacity; def op2 = 0.0;
def sx1 = node.scaleX; def sx2 = 0.0;
def sy1 = node.scaleY; def sy2 = 0.0;
def tx1 = node.translateX; def tx2 = rnd.nextDouble() * node.scene.width;
def ty1 = node.translateY; def ty2 = rnd.nextDouble() * node.scene.height;
def ro1 = node.rotate; def ro2 = rnd.nextDouble() * 2880 - 1440;
[
at (3s) {
node.opacity => op2 tween i2;
node.scaleX => sx2 tween i2;
node.scaleY => sy2 tween i2;
node.translateX => tx2 tween i2;
node.translateY => ty2 tween i2;
node.rotate => ro2 tween i2;
node.stroke => node.stroke;
node.fill => node.fill;
}
at (6s) {
node.opacity => op1 tween i1;
node.scaleX => sx1 tween i1;
node.scaleY => sy1 tween i1;
node.translateX => tx1 tween i1;
node.translateY => ty1 tween i1;
node.rotate => ro1 tween i1;
node.stroke => Color.color(rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble());
node.fill => Color.color(rnd.nextDouble(), rnd.nextDouble(), rnd.nextDouble());
}
]
}
Figure 3: Key Frame들 수정하기
코드 수정하기
날아다니는 문자들을 수정하기 위해서 text 인스턴스 변수들이나 텍스트 노드들의 다른 인스턴스 변수들을 변경합니다. 예를 들어 여러분은 Figure 5에서 보여지는 것처럼 그라디언트 필(gradient fill) 효과를 적용할수 있습니다.
Source Code
def text = "Sergey Malenkov"; def chars = for (i in [1..text.length()]) Text { textOrigin: TextOrigin.TOP content: text.substring(i - 1, i) stroke: Color.ORANGE fill: LinearGradient { endX: 0 stops: [ Stop { offset: 0 color: Color.ORANGE } Stop { offset: 1 color: Color.YELLOW } ] } font: Font { size: 50 } }
Figure 4: 인스턴스 변수들 수정하기