이번에는 애니메이션효과에 대해서 다루어보았습니다.
팬플에 응원도구(?)로 쓸 수 있을 것 같아서 팬플에 기능을 추가하기 위해 공부해 보았죠.


이건 애니메이션 동영상입니다.
(축구를 보고 있어서 약간 말들이 녹음된 ^^;;;;;;;;;;;;;;;)




우선 필요한건 텍스트 뷰 하나, 그리고 animation xml 파일 하나 입니다.



아래와 같은 xml 파일을 만듭니다.

set 엘리먼트가 보이는데, 
set 엘리먼트는 여러 애니메이션을 한번에 묶어서 수행할 수 있게 해주는 부모엘리먼트라고 보면 됩니다.
하나의 애니메이션만 필요할 경우에는 set으로 묶지않고, translate 엘리먼트만으로 사용해도 무방합니다.
여기서는 오른쪽에서 왼쪽으로 이동하면서, 
깜빡이는 문구를 만들기 위해 set을 사용해서 translate와 alpha를 묶었습니다.

 anim/translate_alpha.xml 
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate 
android:fromXDelta="+120%p" 
android:toXDelta="-1000%p" 
android:duration="12000"
android:repeatCount="1000"
/>
<alpha 
android:fromAlpha="0.0" 
android:toAlpha="1.0" 
android:duration="200"
android:repeatCount="300000" 
/>
</set>  


<translate 
android:fromXDelta="+120%p" 
android:toXDelta="-1000%p" 
android:duration="12000"
android:repeatCount="1000"
/>

from-to
fromXDelta : 어느위치에서 애니메이션이 시작될지를 결정합니다.
toXDelta : 어느 위치까지 애니메이션을 통해 이동시킬지를 결정합니다.

duration : 얼마동안의 시간동안 실행할지를 결정합니다. 밀리세컨드 단위입니다.(1000 = 1초)
repeatCount : 반복횟수를 결정합니다. 속성이 있지않은경우 default로 1번 실행합니다.



<alpha 
android:fromAlpha="0.0" 
android:toAlpha="1.0" 
android:duration="200"
android:repeatCount="300000" 
/>

from-to
fromAlpha : 어느정도의 알파값을 가지고 시작할지를 결정합니다.
toAlpha :  어느정도의 알파값까지 변경할지를 결정합니다.
여기서 알파값은 from과 to 모두 0 ~ 1 까지 지정할 수 있습니다. 
이 값을 조절하여 fade-in, fade-out 효과를 만들 수 있습니다. 
저같은 경우는 duration을 짧게해 깜빡이 효과로 사용하였죠.





 DisplayActivity.class 
public class DisplayActivity extends Activity implements OnClickListener
{
private Button mBtnPlay;
private TextView mTxtPlayWord;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.display_activity);
mBtnPlay = (Button)findViewById(R.id.DisplayActivity_btn_play);
mBtnPlay.setOnClickListener(this);
mTxtPlayWord = (TextView)findViewById(R.id.DisplayActivity_txt_playword);
mTxtPlayWord.setTextColor(Color.RED);
}

@Override
public void onClick(View v)
{
switch(v.getId())
{
case R.id.DisplayActivity_btn_play :
Animation anim = AnimationUtils.loadAnimation(this, R.anim.display_alpha);
mTxtPlayWord.setAnimation(anim);
break;
}
}
}





getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
- 전광판 효과를 노리는 만큼 화면을 모두 사용하기 위해, setContentView(R.layout.display_activity); 이전에 위의 코드를 실행시켜 줍니다. 스테이터스바와 타이틀바를 사라지게 합니다. (manifest에서 구현할수도 있습니다.)


mTxtPlayWord = (TextView)findViewById(R.id.DisplayActivity_txt_playword);
mTxtPlayWord.setTextColor(Color.MAGENTA);
- TextView를 세팅해줍니다. 기본적인 글자색은 MAGENTA로 설정했습니다.

Animation anim = AnimationUtils.loadAnimation(this, R.anim.display_alpha);
mTxtPlayWord.setAnimation(anim);
- 애니메이션 객체를 새로 만들고 애니메이션을 불러옵니다. 만들어 두었던, display_alpha.xml을 불러오면 됩니다.
- 새로 만든 애니메이션 객체를 텍스트뷰에 등록합니다.

실제로 애니메이션을 시작시키는 코드에는 setAnimation 말고도 start, restart등의 메소드들이 있습니다.
얘들은 안써봐서 어떤방식으로 시작되는지 잘 모르겠군요. 나중에 하나씩 해봐야겠지요.


요건 스맛폰용 2쪽짜리 윤하 배경화면







Posted by croute

댓글을 달아 주세요

  1. risepower 2011.04.15 22:57  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 강좌 정말 감사합니다! 근데 궁금한게 있어요. 저는 edittext를 통해 원하는 문자를 출력하고자 하는데... 글자가 잘리네요.. 뭘 만져주는게 좋을까요? 좋은 하루 되세요!

    • Favicon of https://croute.me BlogIcon croute 2011.04.17 13:40 신고  댓글주소  수정/삭제

      텍스트를 출력해 줄 텍스트뷰에서

      layout_width 의 값을 fill_parent 로 했다면 아마 글씨가 잘릴거에요.

      wrap_content 로 하던가 아니면 완전 높은값,
      예를 들면 50000 정도를 줘보고 하시면 어떨까요 ㅋ

  2. popolo 2011.09.21 11:59  댓글주소  수정/삭제  댓글쓰기

    wrap_content를 주어도 글씨가 잘리네요;;;
    50000을 줘도 마찬가지고요.. 어떻게 해야할지 모르겠네요 ㅠㅠ

  3. 연_ 2011.11.30 13:26  댓글주소  수정/삭제  댓글쓰기

    포스팅 감사합니다 지금 이 포스팅을 보고 전광판을 구현중인데


    저도 위에 분과 같은 문제가 나오네요..................



    TextView에 marquee효과를 주면 setText해준게 전부 출력되지만 속도가 너무 느리고 깜박이지도 않네요....



    하지만 애니메이션을 주면 setText가 잘려서 나옵니다 으허아럼ㄴㅇ



    Paint로 그려주는 방법도 있다고 하지만 애니메이션을 주는게 더 좋을거 같아서 연구중인데 잘 안되네요 휴우



    이런 부분 어떻게 해결하셨는지 궁금하네요;

  4. 연_ 2011.11.30 17:36  댓글주소  수정/삭제  댓글쓰기

    전광판에니메이션 예제입니다 <---------- 이런 문구를 에딧텍스트에 입력하고 액티비티로 넘겨서

    텍스트뷰에 setText해주면 전광판 <-------이렇게 잘린 문구만 애니메이션되네요


    그런데 여기서 텍스트뷰에 marquee를 주면 setText해도 문자열 전체가 흘러갑니다만 아무래도 애니메이션


    효과로 주는게 아니다보니 깜박거리는 효과라던지 속도라던지 이런게 문제네요;;;


    이부분때매 머리가 그냥 ㅋ;;; 폰트를 뭐 비트맵처리해서 하는방법도 있다고 하고 하는데 전광판 관련 자료는


    적네요........ marquee효과보단 애니메이션으로 주는게 더 효과적이고 보기에도 좋아서 이것저것 해보고는


    있지만 애니메이션은 글씨가 잘리는 한계가 있네요..........

  5. 연_ 2011.11.30 20:24  댓글주소  수정/삭제  댓글쓰기

    그래도 텍스트가 온전히 출력되지 않네요...... 클래스는 여기 소스 그대로고 XML속성은
    <TextView android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:shadowColor="@color/btnBg"
    android:shadowDx="0" android:shadowDy="0" android:shadowRadius="30.0" android:lines="1"
    android:id="@+id/word_neonsign" android:text="" android:textSize="130dp" android:scrollHorizontally="true"
    android:layout_centerVertical="true" />

    이렇게 사용중입니다 걍 글자수제한을 두고 해버릴까요 ㅋ;;;

  6. 글자가ㅠㅠ 2014.08.11 16:55  댓글주소  수정/삭제  댓글쓰기

    저기요.. 하다하다 안되서 뎃글 남기는데...
    글자 애니매이션을 넣으면 글자가 짤리는데.. 어뜨케 해결하셧나요??