• Android中的动画


    Animation 概述

    安装中的动画分为三种:补间动画(Tween Animation),帧动画(Frame Animation)和属性动画(Property Animation)。在有些资料中补间动画又被称为View Animation,帧动画又被称为drawable Animation(至少我个人感觉它们应该是一个意思。假设有不同看法。欢迎留言告知)。当中属性动画是Android3.0(API Level 11)之后才出现的。

    Tween Animation 补间动画

    补间动画有四个基本的实现,各自是 Translate Animation,Scale Animation , Rotate Animation , Alpha Animation 。

    Transparent Animation:平移动画

         主要控制位置变换的动画实现类。常使用TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)来构造。

        fromXDelta:动画開始的X坐标。
        toXDelta:动画结束的X坐标;
        fromYDelta:动画開始的Y坐标;
        toYDelta:动画结束的Y坐标。

    Scale Animation:缩放动画

        主要控制尺度变化的动画类,常使用ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)来构造;
     
        fromX:动画開始X坐标上的伸缩尺度;
        toX:动画结束X坐标上的伸缩尺度; 
        fromY:动画開始Y坐标上的伸缩尺度;
        toY:动画结束Y坐标上的伸缩尺度;
        pivotXType:X坐标上的伸缩模式,取值有:Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT。
        pivotXValue:X坐标上的伸缩值;
        pivotYType:Y坐标上的伸缩模式。取值有:Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT;
        pivotYValue:Y坐标上的伸缩值。

    Rotate Animation :旋转动画

        主要控制旋转的动画实现类。常使用RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)来构造;
     
        fromDegrees:旋转開始角度。
        toDegrees:旋转结束角度;
        pivotXType, pivotXValue, pivotYType, pivotYValue与尺度变化动画ScaleAnimation类似

    Alpha Animation :透明度渐变动画

        主要控制透明度变化动画类。常使用AlphaAnimation(float fromAlpha, float toAlpha)来构造;
        fromAlpha:动画開始时的透明度(取值范围为0.0到1.0)。
        toAlpha:动画结束时的透明度;
     

    补间动画的Demo

    代码中new动画的方式

    界面布局例如以下:

     

    layout中的布局文件 activity_main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
    <LinearLayout 
        android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="click1"
                android:text="alpha" />
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="click2"
                android:text="scale" />
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="click3"
                android:text="rotate" />
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="click4"
                android:text="translate" />
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="click5"
                android:text="一起运行" />
        </LinearLayout>
    </LinearLayout>
        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_launcher" />
    
    </RelativeLayout>
    

    MainActivity代码例如以下 (採用直接new的方式)       

    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);
    		//给iv设置一个点击事件
    		iv.setOnClickListener(new OnClickListener() {
    			@Override
    			public void onClick(View v) {
    			//用来证明该图片的真实属性没有改变(差别于属性动画)
    				Toast.makeText(getApplicationContext(), "你点不到我", 1).show();
    			}
    		});
    	}
    
    	// 点击button 运行透明动画
    	public void click1(View v) {
    		//1.0 全然不透明     0.0全然透明
    		AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
    		aa.setDuration(2000);//设置动画运行时长
    		aa.setRepeatCount(1);//设置动画运行的反复次数 
    		aa.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		//让iv运行动画
    		iv.startAnimation(aa);	
    	}
    
    	// 点击button 运行缩放动画    缩放包含放大 缩小 
    	public void click2(View v) {
    		ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    		sa.setDuration(2000);//设置动画运行时长
    		sa.setRepeatCount(1);//设置动画运行的反复次数 
    		sa.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		//让iv运行动画
    		iv.startAnimation(sa);
    	}
    
    	// 点击button 运行旋转动画
    	public void click3(View v) {
    		//创建旋转动画
    		//RotateAnimation ra = new RotateAnimation(0, 360);
    		RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    		
    		ra.setDuration(2000);//设置动画运行时长
    		ra.setRepeatCount(1);//设置动画运行的反复次数 
    		ra.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		//让iv运行动画
    		iv.startAnimation(ra);
    	}
    
    	// 点击button 运行位移动画
    	public void click4(View v) {
    
    		TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0.2f);
    		ta.setDuration(2000);//设置动画运行时长
    		//ta.setRepeatCount(1);//设置动画运行的反复次数 
    //		ta.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		
    		ta.setFillAfter(true);//动画结束后   动画停留在结束的位置上 
    		
    		//让iv运行动画
    		iv.startAnimation(ta);
    		
    	}
    	
    	//让动画一起运行(动画集)
    	public void click5(View v){
    		//创建动画的集合
    		AnimationSet set = new AnimationSet(false);
    		
    		AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
    		aa.setDuration(2000);//设置动画运行时长
    		aa.setRepeatCount(1);//设置动画运行的反复次数 
    		aa.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		
    		ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    		sa.setDuration(2000);//设置动画运行时长
    		sa.setRepeatCount(1);//设置动画运行的反复次数 
    		sa.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		
    	    RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    		
    		ra.setDuration(2000);//设置动画运行时长
    		ra.setRepeatCount(1);//设置动画运行的反复次数 
    		ra.setRepeatMode(Animation.REVERSE); //设置动画运行的模式
    		
    		//加入几个动画效果
    		set.addAnimation(aa);
    		set.addAnimation(sa);
    		set.addAnimation(ra);
    		
    		//运行动画
    		iv.startAnimation(set);
    	}
    	
    }
    


    使用xml文件的方式

    创建xml文件

    相应的xml内容分别为

    aplha.xml

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

    rotate.xml

    <?xml version="1.0" encoding="utf-8"?>
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatMode="reverse"
        android:repeatCount="1"
        android:duration="2000"
        xmlns:android="http://schemas.android.com/apk/res/android">
        
    
    </rotate>

    scale.xml

    <?xml version="1.0" encoding="utf-8"?

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

    set.xml

    <?xml version="1.0" encoding="utf-8"?

    > <set> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromAlpha="1.0" android:repeatCount="1" android:repeatMode="reverse" android:toAlpha="0" > </alpha> <scale android:fromXScale="0.2" android:toXScale="2.0" android:fromYScale="0.2" android:toYScale="2.0" android:pivotX="50%" android:pivotY="50%" android:repeatMode="reverse" android:repeatCount="1" android:duration="2000" xmlns:android="http://schemas.android.com/apk/res/android"> </scale> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:repeatMode="reverse" android:repeatCount="1" android:duration="2000" xmlns:android="http://schemas.android.com/apk/res/android"> </rotate> </set>

    translate.xml

    <?xml version="1.0" encoding="utf-8"?>
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="0%p"
        android:fromYDelta="0%p"
        android:toYDelta="20%p"
        android:fillAfter="true"
        android:repeatMode="reverse"
        android:duration="2000"
        xmlns:android="http://schemas.android.com/apk/res/android">
        
    </translate>


    layout中的布局文件 activity_main.xml (和上面new方式的大致一样,所以省略)

    MainActivity.java中的 代码例如以下

    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);
    		//给iv设置一个点击事件
    		iv.setOnClickListener(new OnClickListener() {			
    			@Override
    			public void onClick(View v) {
    				Toast.makeText(getApplicationContext(), "你点不到我", 1).show();
    			}
    		});		
    	}
    
    	// 点击button 运行透明动画
    	public void click1(View v) {
    		//1.0 全然不透明     0.0全然透明
    		Animation aa = AnimationUtils.loadAnimation(this, R.anim.aplha);
    		iv.startAnimation(aa);
    	
    	}
    
    	// 点击button 运行缩放动画    缩放包含放大 缩小 
    	public void click2(View v) {
    		Animation sa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
    		iv.startAnimation(sa);
    	}
    
    	// 点击button 运行旋转动画
    	public void click3(View v) {
    		Animation ra = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
    		//让iv运行动画
    		iv.startAnimation(ra);
    		
    	}
    	// 点击button 运行位移动画
    	public void click4(View v) {
    		Animation ta = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
    		//让iv运行动画
    		iv.startAnimation(ta);
    	}
    	
    	//让动画一起运行
    	public void click5(View v){
    		Animation set = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.set);
    		//运行动画
    		iv.startAnimation(set);
    	}
    }
    

     

    Frame Animation 帧动画

    Frame Animation在SDK中相应drawable Aniamtion 。通过切换一系列Drawable图片来模拟动画的效果。

    类似于.gif 动图,(ps:一般5~8张图片/秒,能够感受到动画效果)

    01、帧动画在start()之前必须stop().由于在第一次动画之后,动画会停在最后一帧。这样动画仅仅会运行一次。

    02、不要在onCreate() 方法中调用动画的 start()方法,由于此时AnimationDrawable还没有全然跟Window相关联,假设想要界面显示时就開始动画的话。须要在onWindowFoucsChanged()中调用start()。

    帧动画的Demo

    效果图(不知道怎么加入啊!

    相应xml文件及图片存放

    xml文件内容

    <?

    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_5" android:duration="200"/> <item android:drawable="@drawable/girl_5" 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>

    MainActivity.java文件代码例如以下

    public class MainActivity extends Activity {
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		//找到imageview 用来显示动画 
    		ImageView iv = (ImageView) findViewById(R.id.iv);
    	    //载入动绘图片资源
    		iv.setBackgroundResource(R.drawable.myanim);
    		
    		//获取我们要运行的资源 
    	    final AnimationDrawable anim = (AnimationDrawable) iv.getBackground();
    		
    	    //兼容低版本号手机的写法 
    	    new Thread() {
    			public void run() {
    				//此方法没有异常 
                     SystemClock.sleep(100);
                     anim.start();//開始运行动画 
    			};
    		}.start();
    	}
    }
    

     Property Animation属性动画

    因为Tween Animation不会改变资源的真实位置。所以有一些效果无法实现。比方:你希望View有一个颜色的切换动画;你希望能够使用3D旋转动画;你希望当动画停止时。View的位置就是当前的位置,这就是Property Animation产生的原因。属性动画不止能够应用于View。还能够应用于不论什么对象。Property Animation仅仅是表示一个值在一段时间内的改变。当值改变时要做什么事情全然是你自己决定的。

    属性动画的Demo

    界面布局例如以下:

    声明:这个Demo中代码创建动画和使用xml都存在

    xml的创建和存放

    oanimator.xml  代码

    <?xml version="1.0" encoding="utf-8"?

    > <animator xmlns:android="http://schemas.android.com/apk/res/android" > <objectAnimator android:propertyName="translationX" android:duration="2000" android:valueFrom="10" android:valueTo="100" ></objectAnimator> </animator>

    layout布局文件 activity_main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
    
        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="translate"
                android:text="平移" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="scale"
                android:text="缩放" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="alpha"
                android:text="透明" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="rotate"
                android:text="旋转" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="fly"
                android:text="set" />
        </LinearLayout>
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ll"
            android:onClick="playxml"
            android:text="播放xml定义的属性动画" />
    
        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_launcher" />
    
    </RelativeLayout>


    MainActivity.java代码 例如以下(new方式和xml文件的方式都有)

    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);
    		iv.setOnClickListener(new OnClickListener() {
    			
    			@Override
    			public void onClick(View v) {				
    				Toast.makeText(MainActivity.this, "你点不到我", 0).show();
    			}
    		});	     
    	}
    
    	//位移动画
    	public void translate(View v){
    		//创建属性动画
    		/**
    		 * target 运行的目标  
    		 * propertyName 属性名字  The name of the property being animated.
    		 * float... values 可变參数 
    		 */
    		//从0,向右移动50,返回到20,....(相对于图片本身的位置)
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 0, 50,20,100,60);
    		oa.setDuration(2000);
    		oa.start(); //開始动画
    		
    	}
    	//缩放动画
    	public void scale(View v){
    		View view=new View(this);
    		
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleY", 0.1f, 2, 1, 2);
    		oa.setDuration(2000);
    		oa.start();
    	}
    	
    	//实现透明的效果 
    	public void alpha(View v){
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", 0, 0.5f, 0, 1,0,1);
    		oa.setDuration(2000);
    		oa.start();
    	}
    	
    	//实现旋转的效果
    	public void rotate(View v){
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotation", 0, 180, 90, 360);
    //		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY", 0, 180, 90, 360);
    		oa.setDuration(2000);
    		oa.start();
    	}
    	
    	
    	//一起飞 
    	public void fly(View v){
    		AnimatorSet as = new AnimatorSet();
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 10, 50, 20, 100);
    		ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "scaleY", 0.1f, 2, 1, 2);
    		ObjectAnimator oa3 = ObjectAnimator.ofFloat(iv, "alpha", 0, 0.5f, 0, 1);
    		ObjectAnimator oa4 = ObjectAnimator.ofFloat(iv, "rotationY", 0, 180, 90, 360);
    		as.setDuration(2000);
    		as.setTarget(iv);
    		//往集合中加入动画
    		//挨个飞
    		as.playSequentially(oa, oa2, oa3, oa4);
    //		一起飞
    //		as.playTogether(oa, oa2, oa3, oa4);
    		as.start();
    	}
    	
    	//使用xml的方式创建属性动画
    	public void playxml(View v){
    		  
    		ObjectAnimator oa = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.oanimator);
    		//设置运行目标
    		oa.setTarget(iv);
    		oa.start();//開始运行
    	}
    }
    

     

    动画的使用

    Android 动画能够在 Java 代码中使用,也能够在 XML文件里配置之后。调用res下的资源。

    ☆ 在代码中使用时,直接 new 所须要的动画;

    ☆ 在 XML 中使用时,在创建xml文件及存放时要差别对待:

         补间动画: 在 res 下新建 anim(名字文件名称必须是anim)目录 ,创建相应的 xml 文件(文件名称自己定义)

         帧动画:  把所需图片和xml文件放在drawable下就可以

  • 相关阅读:
    stc单品机的命名规则
    代码导入单片机运行
    openlayers tips
    LeetCode 766. Toeplitz Matrix
    【题集】二叉树的遍历各类题型汇总
    LeetCode 821. Shortest Distance to a Character
    关于C++中vector<vector<int> >的使用
    POJ
    LeetCode#155 Min Stack
    LeetCode#160 Intersection of Two Linked Lists
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/6829326.html
Copyright © 2020-2023  润新知