안녕하세요~ 부쩍 날씨가 따뜻해졌네요.. 워낙에 추운것을 싫어라하는 묜이지만, 따뜻해진 겨울에..지구온난화의 기상이변이 마구 다가오는것 같아서..이러다가 지구가 멸망하지는 않을까 걱정됩니다..ㅠㅠ;;
프로젝트 타입 : WPF
오늘은 텍스트를 따라 빛이 움직이는 애니메이션을 만들어 보도록 하겠습니다. 어제의 모션패스를 한단계 더 응용한 애니메이션인데요. 먼저, WPF 프로젝트를 생성합니다. 프로젝트 만드는 이미지는 생략할께요.^^
그리고 텍스트블럭(or 텍스트박스)에 원하는 텍스트를 써준 후 마우스 오른쪽을 클릭하여 텍스트를 패스로 변환해 줍니다.
위와 같이 텍스트가 패스로 전환 되었다면, Fill 부분은 없애주고 Stroke만 남겨서 글자의 테두리만 보여지도록 하겠습니다.
이제, 테두리만 남은 텍스트의 패스를 하나 더 복사해서 아래에 놓아줍니다.
그리고 Filp을 이용하여 Y축으로 텍스트의 방향을 뒤집습니다.
패스를 하나 더 복사한 것은 반사효과를 내기 위함이었거든요~ ^^ OpacityMask를 이용하여 효과를 내어보겠습니다. 아래에 놓인 복사된 패스를 선택하고 다음과 같이 OpacityMask에 그라데이션을 넣어줍니다. OpacityMask의 그라데이션에 들어가는 값은 어떤 색이던 상관없이 알파값의 영향을 받게 됩니다. 따라서 반사되어 비치는 효과를 위해서 제일 마지막 지점의 알파값만 70%로 맞추어주고 나머지 부분은 0%로 처리해줍니다.
자~ 텍스트의 라인과 반사효과가 잘 만들어졌나요? 다 되었다면 다음강좌에 이어서 하도록 하겠습니다.