帧动画和补间动画

最新推荐文章于 2022-07-21 10:16:31 发布

Barry__

最新推荐文章于 2022-07-21 10:16:31 发布

阅读量503

点赞数

分类专栏： android学习笔记 Android火速入门文章标签： android动画

本文链接：https://blog.csdn.net/rankun1/article/details/51318806

版权

android学习笔记同时被 2 个专栏收录

140 篇文章 1 订阅

订阅专栏

Android火速入门

140 篇文章 6 订阅

订阅专栏

帧动画

帧动画类似照相机，就是播放一系列的图片资源

帧动画使用步骤：

1. 将一系列图片复制到res/drawable中

2.在res/drawable中创建一个animation-list格式的xml文件（例如名为girl），并把帧动画用到的图片加载进来

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
    <item
        android:drawable="@drawable/girl_1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_2"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_3"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_4"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_5"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_6"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_7"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_8"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_9"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_10"
        android:duration="200"/>
    <item
        android:drawable="@drawable/girl_11"
        android:duration="200"/>
  

</animation-list>

3.控件中添加一个imageview，设置图片资源，启动动画

//找到imageview
		ImageView iv = (ImageView) findViewById(R.id.iv); 
		//设置背景资源
		iv.setBackgroundResource(R.drawable.girl);
		
		//获取动画资源  这句话可能是一个耗时的操作，所以睡眠一段时间再开启动画 
		final AnimationDrawable background = (AnimationDrawable) iv.getBackground();
		
		
		new Thread(){public void run() {
			
			try {
				Thread.sleep(20);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			background.start(); //开启动画
			
			
		};}.start();

补间动画

下面例子代码中的iv是一个imageview控件

AlphaAnimation---透明度动画

  /**
	 * 透明度变化的动画
	 * @param view
	 */
	public void alpha(View view) {
		AlphaAnimation aa = new AlphaAnimation(0, 1.0f);
		//动画播放的时间
		aa.setDuration(2000);
		//重复次数
		aa.setRepeatCount(2);
		//设置重复的模式
		aa.setRepeatMode(Animation.REVERSE);
		iv.startAnimation(aa);
	}

RotateAnimation---旋转动画

/**
	 * 旋转变化的动画
	 * @param view
	 */
	public void rotate(View view) {
		//旋转度数，旋转相对点
		RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		//动画播放的时间
		ra.setDuration(2000);
				//重复次数
		ra.setRepeatCount(2);
		ra.setRepeatMode(Animation.REVERSE);
		iv.startAnimation(ra);
	}

TranslateAnimation---位移动画

/**
	 * 位移变化的动画
	 * @param view
	 */
	public void trans(View view) {
		TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f, 
				Animation.RELATIVE_TO_PARENT, -0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
		ta.setDuration(2000);
		//重复次数
		ta.setRepeatCount(2);
		ta.setRepeatMode(Animation.REVERSE);
		iv.startAnimation(ta);
		
	}

ScaleAnimation---缩放动画

	/**
	 * 缩放变化的动画
	 * @param view
	 */
	public void scale(View view) {
		ScaleAnimation sa = new ScaleAnimation(0.1f, 2.0f, 0.1f, 2.0f, 
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
		sa.setDuration(2000);
		//重复次数
		sa.setRepeatCount(2);
		sa.setRepeatMode(Animation.REVERSE);
		sa.setFillAfter(true);//设置填充after的效果
		iv.startAnimation(sa);
	}

AnimationSet---动画合集

上面的动画都可以加入到动画合集中，然后启动动画合集，合集中的动画效果会一起显示

	/**
	 * 动画集合
	 * @param view
	 */
	public void set(View view){
		//动画插入器
		AnimationSet set = new AnimationSet(false);
		RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		//动画播放的时间
		ra.setDuration(2000);
				//重复次数
		ra.setRepeatCount(2);
		ra.setRepeatMode(Animation.REVERSE);
		TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.3f, Animation.RELATIVE_TO_PARENT, 0.3f, 
				Animation.RELATIVE_TO_PARENT, -0.3f, Animation.RELATIVE_TO_PARENT, 0.3f);
		ta.setDuration(2000);
		//重复次数
		ta.setRepeatCount(2);
		ta.setRepeatMode(Animation.REVERSE);
		ScaleAnimation sa = new ScaleAnimation(0.1f, 2.0f, 0.1f, 2.0f, 
				Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
		sa.setDuration(2000);
		//重复次数
		sa.setRepeatCount(2);
		sa.setRepeatMode(Animation.REVERSE);
		set.addAnimation(ra);
		set.addAnimation(sa);
		set.addAnimation(ta);
		iv.startAnimation(set);
	}

使用xml文件设置补间动画效果

1.在res目录下创建一个目录用来存放定义动画效果的xml文件

2.在代码中引用xml文件，并开启动画

引用xml文件代码

package com.itheima.bujiananim;

import android.R.animator;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private ImageView iv;


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//作用 就是用来显示动画效果
		iv = (ImageView) findViewById(R.id.iv);
		
	}


	/**
	 * 透明动画
	 * @param v
	 */
	public void alpha(View v){
		//1.0 意味完全不透明       0.0 完全透明 
		Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha);
		//开启动画 
		iv.startAnimation(aa); 
		
		
		
	}
	
	
	/**
	 *  缩放动画
	 * @param v
	 */
	public void scale(View v){
		//Animation.RELATIVE_TO_SELF 相对于自己进行缩放
		Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale);
		
		//开启动画 
		iv.startAnimation(sa); 
		
	}
	
	/**
	 *  位移动画
	 * @param v
	 */
	public void trans(View v){
		
		Animation ta = AnimationUtils.loadAnimation(this, R.anim.translate);
		
		//开启动画 
		iv.startAnimation(ta); 
		
	}
	
	
	/**
	 *  位移动画
	 * @param v
	 */
	public void rotate(View v){
//		
		Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate);
		iv.startAnimation(ra);
		
		
	}
	
	public void animset(View v){
		
	    Animation set = AnimationUtils.loadAnimation(this, R.anim.set);
		//把动画设置给 iv 
		iv.startAnimation(set);
		
		
	}
	
	
	

}

透明动画xml定义代码

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toAlpha="1.0" >

</alpha>

旋转动画xml定义代码

<?xml version="1.0" encoding="utf-8"?>
<rotate
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"

    android:duration="2000"
    android:repeatCount="2"
    android:repeatMode="reverse"    
    xmlns:android="http://schemas.android.com/apk/res/android">
    

</rotate>

缩放动画xml定义代码

<?xml version="1.0" encoding="utf-8"?>
<scale
    android:fromXScale="0.1"
    android:toXScale="2.0"
    android:fromYScale="0.1"
    android:toYScale="2.0"
    android:duration="2000"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:pivotX="50%"
    android:pivotY="50%"
    xmlns:android="http://schemas.android.com/apk/res/android">
    

</scale>

平移动画xml定义代码

<?xml version="1.0" encoding="utf-8"?>
<translate
    android:fromXDelta="-50%p"
    android:toXDelta="50%p"
    android:fromYDelta="-50%p"
    android:toYDelta="50%p"

    android:duration="2000"
    android:repeatCount="2"
    android:repeatMode="reverse"    
    xmlns:android="http://schemas.android.com/apk/res/android">
    

</translate>

动画集合xml定义代码

<?xml version="1.0" encoding="utf-8"?>
<set>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toAlpha="1.0" >

</alpha>

    <scale
    android:fromXScale="0.1"
    android:toXScale="2.0"
    android:fromYScale="0.1"
    android:toYScale="2.0"
    android:duration="2000"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:pivotX="50%"
    android:pivotY="50%"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
</scale>
    

</set>