Android 애니메이션 컬렉션 프레임 애니메이션


이 섹션 소개:

이 섹션부터 시작하여 Android의 애니메이션을 살펴보겠습니다. 결국, 앱에 일부 애니메이션을 추가하면 애플리케이션이 예를 들어 가장 간단한 방법은 활동을 켜고 끄는 것입니다. 물론 사용자 정의 컨트롤 애니메이션은 필수적입니다~그리고 Android의 애니메이션도 마찬가지입니다. 크게 프레임별 애니메이션(Frame)Tween 애니메이션(Tween), 그리고 Android 3.0 이후에 도입된 속성 애니메이션(Property) 세 가지로 구분됩니다. 당신은 애니메이션의 첫 번째 유형 - 프레임별 애니메이션의 기본 사용법~1.gif


1. 프레임 애니메이션의 개념과 사용법

프레임 애니메이션은 사실 매우 간단합니다. N개의 정적 그림 모음을 전달한 다음 컨트롤이 순서대로 표시됩니다. 인간 눈의 "시각적 잔여물"로 인해 이러한 사진은 영화 상영의 원리와 마찬가지로 우리에게 애니메이션의 "환상"을 줄 것입니다!

Android에서 프레임 애니메이션을 구현하려면 일반적으로 앞에서 설명한 Drawable을 사용합니다. AnimationDrawable먼저 Drawable을 작성한 다음 코드에서 start() 및 stop()을 호출하여 애니메이션 재생을 시작하거나 중지합니다~

Of 물론 Java 코드로 프레임별 애니메이션을 생성하고 AnimationDrawable 객체를 생성한 다음 호출할 수도 있습니다. addFrame(Drawable 프레임, int 기간)은 애니메이션에 프레임을 추가한 다음 start() 및 stop()을 호출합니다~

프레임 애니메이션의 효과를 경험하고 사용법을 익히기 위해 아래 두 가지 예를 작성해 보겠습니다


2. 사용 예:

예 1: 가장 간단한 예:

렌더링 실행:

2.gif

코드 구현:

먼저 애니메이션 파일을 작성합니다. 매우 간단합니다. res 애니메이션 디렉터리를 만들고 나서 우리는 재생을 시작했습니다. 애니메이션 파일: miao_gif.xml: 여기서 android:oneshot은 애니메이션이 한 번만 재생되는지, true는 한 번만 재생되는지, false는 반복 재생되는지 여부를 설정하는 것입니다!

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@mipmap/img_miao1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_miao3"
        android:duration="80" />
    <!--限于篇幅,省略其他item,自己补上-->
    ...</animation-list>

애니메이션 파일이 있고 레이아웃 파일로 이동합니다: activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止" />

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:background="@anim/miao_gif" />
    </LinearLayout>

마지막으로 MainActivity.java는 여기에서 애니메이션의 시작과 일시 중지를 제어합니다.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button btn_start;
    private Button btn_stop;
    private ImageView img_show;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        anim = (AnimationDrawable) img_show.getBackground();
    }

    private void bindViews() {
        btn_start = (Button) findViewById(R.id.btn_start);
        btn_stop = (Button) findViewById(R.id.btn_stop);
        img_show = (ImageView) findViewById(R.id.img_show);
        btn_start.setOnClickListener(this);
        btn_stop.setOnClickListener(this);
    }
    
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_start:
                anim.start();
                break;
            case R.id.btn_stop:
                anim.stop();
                break;
        }
    }
}

좋아, 매우 간단~


예 2: 지정된 위치에서 프레임 애니메이션 재생

렌더링 실행:

3.gif

코드 구현:

아직 먼저 애니메이션 파일을 업로드하세요:anim_zhuan.xml :

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@mipmap/img_zhuan1"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_zhuan2"
        android:duration="80" />
    <item
        android:drawable="@mipmap/img_zhuan3"
        android:duration="80" />
     <!--限于篇幅,省略其他item,自己补上-->
    ...</animation-list>

그런 다음 현재 재생되는 프레임이 리플렉션을 통해 얻어지는 사용자 정의 ImageView: FrameView.java를 작성해 보겠습니다. 그렇다면 마지막 프레임인지, 그렇다면 컨트롤을 숨기세요!

/**
 * Created by Jay on 2015/11/15 0015.
 */
public class FrameView extends ImageView {

    private AnimationDrawable anim;

    public FrameView(Context context) {
        super(context);
    }

    public FrameView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FrameView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setAnim(AnimationDrawable anim){
        this.anim = anim;
    }

    public void setLocation(int top,int left){
        this.setFrame(left,top,left + 200,top + 200);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        try{
            //反射调用AnimationDrawable里的mCurFrame值
            Field field = AnimationDrawable.class
                    .getDeclaredField("mCurFrame");
            field.setAccessible(true);
            int curFrame = field.getInt(anim);// 获取anim动画的当前帧
            if (curFrame == anim.getNumberOfFrames() - 1)// 如果已经到了最后一帧
            {
                //让该View隐藏
                setVisibility(View.INVISIBLE);
            }
        }catch (Exception e){e.printStackTrace();}
        super.onDraw(canvas);
    }
}

마지막은 MainActivity.java입니다. FrameLayout을 생성하고 View를 추가한 다음 이벤트를 처리하고, 컨트롤을 표시하고, 애니메이션을 시작하세요~

public class MainActivity extends AppCompatActivity {

    private FrameView fView;
    private AnimationDrawable anim = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FrameLayout fly = new FrameLayout(this);
        setContentView(fly);
        fView = new FrameView(this);
        fView.setBackgroundResource(R.anim.anim_zhuan);
        fView.setVisibility(View.INVISIBLE);
        anim = (AnimationDrawable) fView.getBackground();
        fView.setAnim(anim);
        fly.addView(fView);
        fly.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //设置按下时才产生动画效果
                if(event.getAction() == MotionEvent.ACTION_DOWN){
                    anim.stop();
                    float x = event.getX();
                    float y = event.getY();
                    fView.setLocation((int) y - 40,(int)x-20);  //View显示的位置
                    fView.setVisibility(View.VISIBLE);
                    anim.start();    //开启动画
                }
                return false;
            }
        });
    }
}

좋아요, 그것도 매우 간단합니다~


3 이 섹션에서 샘플 코드와 Gif 프레임 추출 도구를 다운로드하세요

AnimationDemo1.zip

AnimationDemo2.zip

Gif 프레임 추출 도구


이번 섹션 요약:

자, 이번 섹션에서는 안드로이드의 세 가지 애니메이션 중 가장 간단한 프레임 애니메이션을 소개합니다. 실제 개발에서는 많이 사용되지 않습니다. 하지만 더 많이 배우면 앞으로 더 많은 아이디어를 얻을 수 있을 것입니다~ 좋아요, 여기까지입니다. 감사합니다~