Android帧动画和补间动画

发布于:2023-02-10 ⋅ 阅读:(679) ⋅ 点赞:(0)

目录

1.帧动画 (帧动画的资源文件,放在drawable文件夹下)

        1.创建一个项目

        2.导入资源, 将图片资源放入 mipmap 文件夹下

        3.编写资源文件 在drawable文件夹创建

        4.在xml页面,添加 并设置其background

        5.在java文件中,获取imageview,并对其background进行动画设置

        6.开启动画 

2.帧动画的使用效果(二)

                代码实现

                                1.首先在drawable里创建一个xml文件

                                2. 接着我们来写一个自定义的ImageView                        

                                3.最后是我们的MainActivity.java,创建一个FrameLayout,添加View,对触摸事件中按下的 事件做处理,显示控件以及开启动画

3.补间动画 (补间动画的资源文件,放在 anim文件夹下)

        1.如何创建anim文件夹?

         2.补间动画有几种?

                1.透明度渐变动画

                2. 缩放渐变动画

                3.位移渐变动画

                4.旋转渐变动画

                5.组合渐变动画

        3.补间动画使用的流程

                1.在anim下创建资源文件

                2.选择使用何种补间动画

                3.使用AnimationUtils加载动画效果引用上方的xml文件

                4.启动动画

         4.Activity进场动画

4.最后做了一个案例


1.帧动画 (帧动画的资源文件,放在drawable文件夹下)

介绍

        将连续的图片进行堆叠,然后翻动,模拟成动画的效果

        1.创建一个项目

        2.导入资源, 将图片资源放入 mipmap 文件夹下

        

        3.编写资源文件 在drawable文件夹创建

                android:drawanle设置图片

                android:duration设置帧率

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <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 android:drawable="@mipmap/img_zhuan4"
        android:duration="80"/>
    <item android:drawable="@mipmap/img_zhuan5"
        android:duration="80"/>
</animation-list>

        4.在xml页面,添加<Imageview> 并设置其background

<ImageView
    android:id="@+id/im_cat"
    android:layout_width="340dp"
    android:layout_height="340dp"
    android:background="@drawable/cat_gif"/>

         5.在java文件中,获取imageview,并对其background进行动画设置

                获取imageview

                定义一个AnimationDrawable

                之后getbackground();

public class MainActivity extends AppCompatActivity {

    private ImageView im_cat;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        im_cat = findViewById(R.id.im_cat);

        anim = (AnimationDrawable) im_cat.getBackground();

    }
}

        6.开启动画 

                anim.start();开启动画

                anim.stop();暂停动画

public class MainActivity extends AppCompatActivity {

    private ImageView im_cat;
    private AnimationDrawable anim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        im_cat = findViewById(R.id.im_cat);

        anim = (AnimationDrawable) im_cat.getBackground();

        anim.start();
    }
}

2.帧动画的使用效果(二)

        在指定地方播放帧动画

                代码实现

                                1.首先在drawable里创建一个xml文件

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <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 android:drawable="@mipmap/img_zhuan4"
        android:duration="80"/>
    <item android:drawable="@mipmap/img_zhuan5"
        android:duration="80"/>
</animation-list>

                                2. 接着我们来写一个自定义的ImageView                        

                                          先继承 androidx.appcompat.widget.AppCompatImageView

                                          之后再实现他的三个构造方法

                                        

public class FrameView extends androidx.appcompat.widget.AppCompatImageView{

    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);
    }
}

                                  3.最后是我们的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.补间动画 (补间动画的资源文件,放在 anim文件夹下)

        介绍

                 只需用指定动画的开始帧和结束帧,中间的帧由系统补齐

        1.如何创建anim文件夹?

                    

         2.补间动画有几种?

                1.透明度渐变动画

                       1. 在anim文件夹下创建文件

                       2. 只要想要实现补间动画就要在这个文件下加                                      android:interpolator="@android:anim/accelerate_decelerate_interpolator"                            这句话

                        3.透明度关键字 alpha

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
//开始透明度
    android:fromAlpha="1.0"
//结束透明度
    android:toAlpha="0.0"
//持续时间
    android:duration="2000"
    />

                2. 缩放渐变动画

                        缩放关键字scale

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
//x轴的开始缩放倍数
    android:fromXScale="1"
//x轴的结束缩放倍数
    android:toXScale="2"
//y轴的开始缩放倍数
    android:fromYScale="1"
//y轴的结束缩放倍数
    android:toYScale="2"
//缩放点
    android:pivotX="50%"
    android:pivotY="50%"

//持续时间
    android:duration="2000"
    />

                 3.位移渐变动画

                        位移关键字translate

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
//x轴开始的位置
    android:fromXDelta="0"
//x轴结束的位置
    android:toXDelta="1080"
//y轴开始的位置
    android:fromYDelta="0"
//y轴结束的位置
    android:toYDelta="0"
//持续时间
    android:duration="2000"
    />

                4.旋转渐变动画

                        旋转关键字rotate

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
//开始角度
    android:fromDegrees="0"
//结束角度
    android:toDegrees="360"
//持续时间
    android:duration="2000"
//旋转次数
    android:repeatCount="1"
//旋转模式
    android:repeatMode="reverse"
    />

                5.组合渐变动画

                        组合关键字set

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:shareInterpolator="true"
    >
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.1"
        android:duration="2000"
        />
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:repeatCount="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatMode="reverse"
        android:duration="2000"
        />
    <translate
        android:fromYDelta="0"
        android:toYDelta="200"
        android:fromXDelta="0"
        android:toXDelta="200"
        android:duration="2000"
        />
    <scale
        android:fromYScale="1"
        android:toYScale="1.5"
        android:fromXScale="1"
        android:toXScale="1.5"
        android:pivotY="50%"
        android:pivotX="50%"
        android:duration="2000"
        />
</set>

            

        3.补间动画使用的流程

                            1.在anim下创建资源文件

                

                     2.选择使用何种补间动画

                        这里用的是逐渐透明

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="2000"
    />

                3.使用AnimationUtils加载动画效果引用上方的xml文件

Animation animation=AnimationUtils.loadAnimation(MainActivity3.this,R.anim.anim_alpha);

                4.启动动画

              图片名字.seartAnimation

iv_show.startAnimation(animation);

         4.Activity进场动画

                    1.先使用Intent跳转

                    2.开始跳转

                    3.用overridePendingTransition设置动画

Intent intent=new Intent(MainActivity3.this,MainActivity.class);
startActivity(intent);
overridePendingTransition(R.anim.anim_alpha,R.anim.anim_alpha);

    

4.最后做了一个案例

        代码实现

public class MainActivity4 extends AppCompatActivity {
    //声明容器
    private ImageView iv_cat2;
    private TextView tv;
    private AnimationDrawable animationDrawable;
    private int a=5;
    private String ac;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        //先把帧动画显示出来
        iv_cat2= findViewById(R.id.iv_cat2);
        tv=findViewById(R.id.tv);
        animationDrawable= (AnimationDrawable) iv_cat2.getBackground();
        animationDrawable.start();
        //设置倒计时
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){
                    try {
                        Thread.sleep(1000);
                        if (a<=1){
                            ac="跳过";
                        }else {
                            a--;
                            ac=a+"";
                        }
                        handler.sendEmptyMessage(0x111);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
        //时间到了跳转页面
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent=new Intent(MainActivity4.this,MainActivity3.class);
                startActivity(intent);
                overridePendingTransition(R.anim.anim_translate,R.anim.anim_translate2);
            }
        },5000);
    }
    private Handler handler=new Handler(Looper.getMainLooper()){
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            if (msg.what==0x111){
                tv.setText(ac);
            }
        }
    };
}
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到