GreenSock의 tweenLite와 tweenMax는 아마도 가장 즐겨쓰는 tweener일 겁니다.
tweener를 깊이 활용하다보면 기본으로 제공되는 easing함수로는 원하는 움직임을 표현할 수 없다고 느끼게 됩니다. 좀 더 출렁거리게 하고 싶다던가, 과격한 변화를 원한다면 표준으로 제공되는 easing함수만으로는 무리가 있겠죠. 이때 자신만의 easing함수를 도입하고 싶습니다. 문제는 기존에 쓰던 tweener의 easing함수 타입과 일치해야한다는 점입니다.
GreenSock의 customEase 클래스는 이러한 베지어곡선 기반의 사용자정의 easing함수를 만들어주긴 하는데, 클럽 GreenSock에 유료로 가입해야만 쓸 수 있는 정책을 취하고 있습니다. 그럼 단지 이것 때문에 유료가입을 할 수는 없는 노릇이고 누군가 베지어변환 후 tweenLite용 easing에서 쓸 수 있는 형태로 전환해주는 클래스나 유틸을 만들어주면 해결됩니다.
만들까 하다가 좀 짜증나서 검색을 해보니 역시 같은 생각을 가진 플래셔가 이미 구축했습니다.
http://marfastic.blogspot.com/2008/08/create-custom-tweens-for-tweenlite.html
시각적인 베지어곡선 제작기도 이미 만들어서 배포하시네요.
http://rokkan.com/testing/tween/rokkan_bezierdefiner.swf
사실 이 곡선은 베지어곡선공식이 아닙니다만, 과거 플래시의 곡선형태를 기억하신다면 나름 좋습니다. 이 곡선의 느낌을 알죠.
(약간 여담인데 조절점이 하나인 곡선에서 두개인 곡선으로 변환되면 그제서야 베지어가 됩니다. 다시 네개의 조절점이 일치되는 위치로부터 도출되는 곡선을 만들 수 있는데 이는 그 유명한 넙스곡선입니다. 넙스는 수학적으로 좀 무거워서 플래시에서는 많이 활용이 안되지만 나름 쓸모가 많다는)
저 제네레이터에서 생성된 배열을 통해 tweenLite용 이징함수를 제공하는 래핑 클래스의 주요 메쏘드는 아래와 같습니다.
수식적으로는 간단합니다만, 약간 무거워서 최적화를 해줄까하다가 귀찮아서 내버려두고 있는 중입니다.public function ease(t:Number,b:Number,c:Number,d:Number){
var i,r;
r = BASE_WIDTH * t/d;
for(i = 0;r>_tweenArr[i+1].Mx;++i){}
i = _tweenArr[i];
if(i.Px != 0){
r=(-i.Nx+Math.sqrt(i.Nx*i.Nx-4*i.Px*(i.Mx-r)))/(2*i.Px);
}else{
r=-(i.Mx-r)/i.Nx;
}
return b-c*((i.My+i.Ny*r+i.Py*r*r)/BASE_WIDTH);
}
