当前位置：网站首页>动画（其一）

动画（其一）

2022-08-11 05:22:00 【hqhe260】

帧动画简介

帧动画非常容易理解，其实就是简单的由N张静态图片收集起来，然后我们通过控制依次显示这些图片，因为人眼"视觉残留"的原因，会让我们造成动画的"错觉"，跟放电影的原理一样！

而Android中实现帧动画，一般我们会用到前面讲解到的一个Drawable：AnimationDrawable先编写好Drawable，然后代码中调用start()以及stop()开始或停止播放动画

当然我们也可以在Java代码中创建逐帧动画，创建AnimationDrawable对象，然后调用 addFrame(Drawable frame,int duration)向动画中添加帧，接着调用start()和stop()而已

帧动画的使用效果（一）

帧动画 帧动画的资源文件，放在drawable文件夹下

创建项目
导入资源，将图片资源放入 mipmap 文件夹下

编写资源文件cat_gif.xml 在drawable文件夹下

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

</animation-list>

在xml页面，添加<Imageview> 并设置其background

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

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

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

    }
}

开启动画

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

帧动画的使用效果（二）

在指定地方播放帧动画

先上activity_main2.xml

</RelativeLayout>

依旧是先上我们的动画文件: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" />
...
</animation-list>

接着我们来写一个自定义的ImageView：FrameView.java，这里通过反射获得当前播放的帧，然后是否为最后一帧，是的话隐藏控件！

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

补间动画

## 补间动画

与前面学的帧动画不同，帧动画是通过连续播放图片来模拟动画效果，而补间动画开发者只需指定动画开始，以及动画结束关键帧"，而动画变化的"中间帧"则由系统计算并补齐！

补间动画的资源文件，放在 anim文件夹

补间动画有几种？
1. 透明度渐变动画
2. 首先创建资源文件<alpha xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:fromAlpha="1.0"
  android:toAlpha="0.1"
  android:duration="2000"/>

// AlphaAnimation(透明度渐变)
button3.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Animation animation= AnimationUtils.loadAnimation(MainActivity3.this,R.anim.tupian);
        iv_tp.startAnimation(animation);

    }
});

});

1. 缩放渐变动画
2. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_interpolator"
  android:fromXScale="0.2"
  android:toXScale="1.5"
  android:fromYScale="0.2"
  android:toYScale="1.5"
  android:pivotX="50%"
  android:pivotY="50%"
  android:duration="2000"/>

 //ScaleAnimation(缩放渐变)
button4.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Animation animation= AnimationUtils.loadAnimation(MainActivity3.this,R.anim.anim_cole);
        iv_tp.startAnimation(animation);
    }
});

1. 位移渐变动画
2. <translate xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:fromXDelta="0"
  android:toXDelta="320"
  android:fromYDelta="0"
  android:toYDelta="0"
  android:duration="2000"/>

//TranslateAnimation(位移渐变)
button5.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Animation animation= AnimationUtils.loadAnimation(MainActivity3.this,R.anim.weiyi);
        iv_tp.startAnimation(animation);
    }
});

旋转渐变动画

//TranslateAnimation(位移渐变)
button5.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Animation animation= AnimationUtils.loadAnimation(MainActivity3.this,R.anim.weiyi);
        iv_tp.startAnimation(animation);
    }
});

});
// RotateAnimation(旋转渐变)
button6.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Animation animation= AnimationUtils.loadAnimation(MainActivity3.this,R.anim.xuanzhuan);
        iv_tp.startAnimation(animation);
    }
});

组合渐变动画

btnqq.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent=new Intent(MainActivity3.this,MainActivity2.class);
        startActivity(intent);
        overridePendingTransition(R.anim.weiyi,R.anim.tupian);

    }
});