Android中补间动画、属性动画效果演示

最新推荐文章于 2023-06-14 10:45:18 发布

东北熊孩子

最新推荐文章于 2023-06-14 10:45:18 发布

阅读量889

点赞数 1

分类专栏： Android区文章标签：补间动画

本文链接：https://blog.csdn.net/lovescjinbao/article/details/52243789

版权

Android区专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、补间动画（即view动画）
1.透明    AlphaAnim
2.旋转    RotateAnim
3.缩放    ScaleAnim
4.位移   TranslateAnim
原理：动画效果不会改变控<span style="font-family: Arial, Helvetica, sans-serif;">件的真实坐标位置</span>

布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_touming"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="透明" />

        <Button
            android:id="@+id/btn_xuanzhuan"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="旋转" />

        <Button
            android:id="@+id/btn_suofang"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="缩放" />

        <Button
            android:id="@+id/btn_weiyi"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="位移" />

        <Button
            android:id="@+id/btn_yiqi"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="一起" />
        
    </LinearLayout>

    <ImageView
        android:id="@+id/iv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

MainActrivity.java

1> 定义布局文件中的几个控件

	private Button btn_touming;
	private Button btn_suofang;
	private Button btn_xuanzhuan;
	private Button btn_weiyi;
	private Button btn_yiqi;
	private ImageView iv_show;

2> 在OnCreate方法中进行初始

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.activity_main);
        btn_touming = (Button)findViewById(R.id.btn_touming);
        btn_suofang = (Button)findViewById(R.id.btn_suofang);
        btn_xuanzhuan = (Button)findViewById(R.id.btn_xuanzhuan);
        btn_weiyi = (Button)findViewById(R.id.btn_weiyi);
        btn_yiqi = (Button)findViewById(R.id.btn_yiqi);
        iv_show = (ImageView)findViewById(R.id.iv_show);
        
        btn_touming.setOnClickListener(this);
        btn_suofang.setOnClickListener(this);
        btn_xuanzhuan.setOnClickListener(this);
        btn_weiyi.setOnClickListener(this);
        btn_yiqi.setOnClickListener(this);
    }

3> 实现OnClick事件

@Override
    public void onClick(View v) {
    	
    	switch(v.getId()){
	    	case R.id.btn_touming:
	    	{
	    		//透明
	    		AlphaAnimation aa = new AlphaAnimation(1.0f,0.0f);
	    		aa.setDuration(2000);//设置执行时间
	    		aa.setRepeatCount(1);//设置动画重复次数
	    	    aa.setRepeatMode(Animation.REVERSE);//反向执行
	    		iv_show.startAnimation(aa);//执行动画
	    		break;
	    	}
	    	case R.id.btn_xuanzhuan:
	    	{
	    		//旋转
	    		//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_show.startAnimation(ra);//执行动画
	    		break;
	    	}
	    	case R.id.btn_suofang:
	    	{
	    		//缩放
	    		ScaleAnimation sa = new ScaleAnimation(1.0f,2.0f,1.0f,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_show.startAnimation(sa);//执行动画
	    		
	    		break;
	    	}
	    	case R.id.btn_weiyi:
	    	{
	    		//位移
	    		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_show.startAnimation(ta);//执行动画
	    		break;
	    	}
	    	case R.id.btn_yiqi:
	    	{
	    		AnimationSet set = new AnimationSet(false);
	    		
	    		//以上几种一起执行
	    		AlphaAnimation aa = new AlphaAnimation(1.0f,0.0f);
	    		aa.setDuration(2000);//设置执行时间
	    		aa.setRepeatCount(1);//设置动画重复次数
	    	    aa.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);//反向执行
	    		ScaleAnimation sa = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
	    		sa.setDuration(2000);//设置执行时间
	    		sa.setRepeatCount(1);//设置动画重复次数
	    		sa.setRepeatMode(Animation.REVERSE);//反向执行
	    		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);
	    		
	    		//载入动画
	    		set.addAnimation(aa);
	    		set.addAnimation(ra);
	    	    set.addAnimation(sa);
	    	    set.addAnimation(ta);
	    	    
	    		iv_show.startAnimation(set);//执行动画
	    		
	    		break;
	    	}
	    	default:
	    		break;
    	}
    	
    }

第二种方式采用XML添加补间动画效果：

特别注意的是：要在res目录下创建一个anim文件夹，然后下面的布局文件要放到anim下才可以。

1.alpha.xml 透明效果

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

2.rotate.xml 旋转效果

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:pivotX="50%"   
    android:pivotY="50%" 
    android:fromDegrees="0"
    android:toDegrees="360">
    
    
    <!-- android:pivotX="50%" 是0.5f 对于自己本身  -->
    <!-- android:pivotX="50%p" 是0.5f 对于父亲的  -->

</rotate>

3.scale.xml 缩放效果

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:fromXScale="1.0"
    android:toXScale="2.0"
    android:fromYScale="1.0"
    android:toYScale="2.0"
    android:pivotX="50%"
    android:pivotY="50%"
    >
    
    <!-- android:pivotX="50%" 是0.5f 对于自己本身  -->
    <!-- android:pivotX="50%p" 是0.5f p表示相对与父亲的  -->

</scale>

4.translate.xml 位移效果

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

</translate>

5.set.xml 采用集合的方式

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha="0.0" >
    </alpha>

    <rotate
        android:duration="2000"
        android:fromAlpha="1.0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha=F0.0" >
    </rotate>

</set>

MainActivity.java:

OnClick 方法的实现：

@Override
    public void onClick(View v) {
    	
    	switch(v.getId()){
	    	case R.id.btn_touming:
	    	{
	    		//透明
	    		Animation aa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
	    		iv_show.startAnimation(aa);
	    		break;
	    	}
	    	case R.id.btn_xuanzhuan:
	    	{
	    		//旋转
	    		Animation ra = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
	    		iv_show.startAnimation(ra);//执行动画
	    		break;
	    	}
	    	case R.id.btn_suofang:
	    	{
	    		//缩放
	    		Animation sa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
	    		iv_show.startAnimation(sa);//执行动画
	    		
	    		break;
	    	}
	    	case R.id.btn_weiyi:
	    	{
	    		//位移
	    		Animation ta = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
	    		iv_show.startAnimation(ta);//执行动画
	    		break;
	    	}
	    	case R.id.btn_yiqi:
	    	{
	    		Animation set = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.set);
	    	 
	    		iv_show.startAnimation(set);//执行动画
	    		
	    		break;
	    	}
	    	default:
	    		break;
    	}
    	
    }

二、属性动画

原理：动画效果会改变控件的坐标位置

1>直接通过代码的方式：

这里我直接把按钮点击如何调用写一下，其他按钮声明初始化都和上面一样：

@Override
	public void onClick(View v) {
		switch(v.getId()){
    	case R.id.btn_touming:
    	{
    		//透明
    		/*
    		 * 参数1是ImageView控件，参数2是透明属性名，后面是可变参数，0表示不透明 1表示完全透明
    		 */
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "alpha", 0,0.5f,0,1,0,1);
    		oa.setDuration(2000);
    		oa.start();//启动动画
    		break;
    	}
    	case R.id.btn_xuanzhuan:
    	{
    		//旋转
    		/*
    		 * 参数1表示ImageView控件，参数2表示旋转属性名，后面是可变参数
    		 */
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "rotation", 0,180,90,360);
    		oa.setDuration(2000);
    		oa.start();//启动动画
    		break;
    	}
    	case R.id.btn_suofang:
    	{
    		//缩放
    		/*
    		 * 参数1表示ImageView控件，参数2表示水平属性名，后面是可变参数
    		 */
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "scaleY", 0.1f, 2, 1, 2);
    		oa.setDuration(2000);
    		oa.start();//启动动画
    		
    		break;
    	}
    	case R.id.btn_weiyi:
    	{
    		//位移
    		/*
    		 * 参数1表示ImageView控件，参数2表示位移属性名，后面是可变参数
    		 */
    		ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "translationX", 10,50,10,130);
    		oa.setDuration(2000);
    		oa.start();//启动动画

    		break;
    	}
    	case R.id.btn_yiqi:
    	{
    	
    		AnimatorSet set = new AnimatorSet();
    		
    		//以上几种一起执行
    		ObjectAnimator aa = ObjectAnimator.ofFloat(iv_show, "alpha", 0,0.5f,0,1,0,1);
    		aa.setDuration(2000);
    		ObjectAnimator ra = ObjectAnimator.ofFloat(iv_show, "rotation", 0,180,90,360);
    		ra.setDuration(2000);
    		ObjectAnimator sa = ObjectAnimator.ofFloat(iv_show, "scaleY", 0.1f, 2, 1, 2);
    		sa.setDuration(2000);
    		ObjectAnimator ta = ObjectAnimator.ofFloat(iv_show, "translationX", 10,50,10,130);
    		ta.setDuration(2000);    		
    		//载入动画
    		//一起进行
    		set.playTogether(aa,ra,sa,ta);
    		//挨个进行
//    		set.playSequentially(aa,ra,sa,ta);
    		set.setDuration(2000).start();//执行动画
    		
    		break;
    	}
    	default:
    		break;
	}
		
	}
}

属性动画是通过ObjectAnimator 这个静态类来操作的。

2>通过xml方式加载：

注意：要在res下添加文件夹anmiator,将资源文件放到目录下

Animator aa = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.oanimator);
aa.setTarget(iv_show);
aa.start();

通过AnimatorInflater类的这个loadAnimator()来加载。

setTarget参数传的是控件ImageView，因为我要操作这个上面图片。

最后启动调用start();

oanimator.xml 布局文件给出来：

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android" >

    <objectAnimator
        android:duration="2000"
        android:propertyName="translationX"
        android:valueFrom="10"
        android:valueTo="100" >
    </objectAnimator>

</animator>

东北熊孩子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android中补间动画、属性动画效果演示

一、补间动画（即view动画）1.透明 AlphaAnim2.旋转 RotateAnim3.缩放 ScaleAnim4.位移 TranslateAnim原理：动画效果不会改变控件的真实坐标位置布局文件：activity_main.xml<RelativeLayout xmlns:android="http://schemas.android.
复制链接

扫一扫

专栏目录