69.补间动画和属性动画

最新推荐文章于 2021-05-27 15:11:00 发布

augfun

最新推荐文章于 2021-05-27 15:11:00 发布

阅读量646

点赞数

分类专栏： android整理

本文链接：https://blog.csdn.net/augfun/article/details/56584132

版权

android整理专栏收录该内容

261 篇文章 6 订阅

订阅专栏

补间动画：动画由最初始的形态向最终的状态变化的过程中，为了让渐变的过程更加自然，而生成的动画。并没有真正改变图形的位置,真实的位置没有变,只是显示的地方变了而已.

位移动画：

//定义位移动画
TranslateAnimation ta = new TranslateAnimation(10, 100, 10, 100);

第一个参数表示x左边的起始位置，相对于组件的而言，iv的真实x位置+10；

第二个参数表示x坐标的结束位置，相对于组件而言，iv的真实x位置+100；

第三个参数表示y左边的起始位置，相对于组件的而言，iv的真实y位置+10；

第四个参数表示y坐标的结束位置，相对于组件而言，iv的真实y位置+100；

位移动画还有一个八个参数的函数

TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 2,
Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 2);

Animation.RELATIVE_TO_SELF, 1：x坐标的初始位置：相对于组件而言，iv的真实x位置+1*iv宽；

下面的3个类似，都是2个一组的，数字代表宽度或者高度的倍数，0.5f表示0.5个宽度float类型

RELATIVE_TO_SELF：相对于自己

RELATIVE_TO_PARENT：相对于父元素

缩放动画：

ScaleAnimation sa = new ScaleAnimation(1, 3, 0.2f, 3);

前两个参数表示：x从1倍放大到3倍，

后两个参数表示：y从0.2倍放大到3倍

这个函数的缩放点在左上角

ScaleAnimation sa = new ScaleAnimation(1, 3, 1, 3, iv.getWidth()/2, iv.getHeight()/2);

前4个参数是一样的，后两个参数表示缩放点，这里设置在iv的正中间进行缩放

ScaleAnimation sa = new ScaleAnimation(1, 3, 1, 3, Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);

前四个参数是一致的，后面4个参数2个一组，表示缩放点的左边iv的真实大小乘以倍数，第一组是x,第二组是y,这里是以中心为缩放点

补间动画范例

activity_main.xml

<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:orientation="horizontal"
    >

    <LinearLayout
        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:text="平移"
        	android:onClick="translate"
            />
        <Button 
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="缩放"
        	android:onClick="scale"
            />
        <Button 
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="透明"
        	android:onClick="alpha"
            />
        <Button 
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="透明"
        	android:onClick="alpha"
            />   
		<Button 
            android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:text="多个特效"
        	android:onClick="multiple"
            />                                    
        </LinearLayout>
	<ImageView 
	    android:id="@+id/iv"
	    android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
	    />
</LinearLayout>

MainActivity.java

package com.ldw.move;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
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;
	private TranslateAnimation ta;
	private ScaleAnimation  sa;
	private AlphaAnimation aa;
	private RotateAnimation ra;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }

    //位移动画
    public void translate(View v){
    	//定义位移动画(x0,x1,y0,y1)
    	//TranslateAnimation ta = new TranslateAnimation(10, 100, 10, 100);
    	//下面一种是2个参数一组，数字代表平移距离，iv宽度*数字
    	ta = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 2,
    			Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 2);
    	//动画的持续时间
    	ta.setDuration(3000);
    	//设置重复的次数
    	ta.setRepeatCount(2);
    	//重复的时候反向运动
    	ta.setRepeatMode(Animation.REVERSE);
    	iv.startAnimation(ta);
    }
    
    //缩放动画
    public void scale(View v){
    	//定义缩放动画,(x0,x1,y0,y1),缩放点在左上角
    	//ScaleAnimation sa = new ScaleAnimation(1, 3, 0.2f, 3);
    	//自定义缩放，前4个参数的意思是一样的,后2个参数是缩放点，这里设置成中间
    	//ScaleAnimation sa = new ScaleAnimation(1, 3, 1, 3, iv.getWidth()/2, iv.getHeight()/2);
    	//前四个参数是一致的，后面4个参数2个一组，表示缩放点的左边iv的真实大小乘以倍数
    	sa = new ScaleAnimation(1, 3, 1, 3, Animation.RELATIVE_TO_SELF,0.5f,
    			Animation.RELATIVE_TO_SELF, 0.5f);
    	//填充动画的结束位置，动画停留在结束的位置
    	sa.setFillAfter(true);
    	//缩放的次数
    	sa.setRepeatCount(2);
    	sa.setRepeatMode(Animation.REVERSE);
    	iv.startAnimation(sa);
    }
    
    //透明
    public void alpha(View v){
    	//由全透明到半透明
    	aa = new AlphaAnimation(0, 0.5f);
    	aa.setDuration(3000);
    	iv.setAnimation(aa);
    }
    
    //旋转
    public void rotate(View v){
    	//由20度旋转到180度,旋转中心点默认左上角
    	//RotateAnimation ra = new RotateAnimation(20, 180);
    	//由20度旋转到180度,旋转中心点默认中心
    	//RotateAnimation ra = new RotateAnimation(20, 180, iv.getWidth()/2, iv.getHeight()/2);
    	//由20度旋转到180度,旋转中心点默认左上角
    	ra = new RotateAnimation(20, 180, Animation.RELATIVE_TO_SELF, 0,
    			Animation.RELATIVE_TO_SELF, 0);
    	ra.setDuration(3000);
    	iv.setAnimation(ra);
    }
    
    //多个特效一起使用
    public void multiple(View v){
    	//定义动画特效集合,参数true表示使用集合的校对器，false表示使用自己的校对器
    	AnimationSet set = new AnimationSet(false);
    	set.addAnimation(ta);
    	set.addAnimation(sa);
    	set.addAnimation(aa);
    	set.addAnimation(ra);
    	
    	iv.setAnimation(set);
    	
    }
}

属性动画

属性动画真实的改变了组件的属性,设置特效时,一次只能实现一个的变化,想多次变化,需要进行组合.

属性动画可以通过xml文件来定义，在res文件夹下面创建一个animator的文件夹，再创建一个安卓xml文件，type是Property Animation,如下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
	<objectAnimator 
	    android:propertyName="translationX"
	    android:duration="200"
	    android:repeatCount="1"
	    android:repeatMode="reverse"
	    android:valueFrom="-100"
	    android:valueTo="100"
	    >
	    
	</objectAnimator>
</set>

使用的方法是

	public void xml(View v){
		Animator at = AnimatorInflater.loadAnimator(this, R.animator.objanimator);
		//设置作用于哪个组件
		at.setTarget(iv);
		at.start();
	}

属性动画范例

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:text="平移" 
        android:onClick="translate"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放" 
        android:onClick="scale"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明" 
        android:onClick="alpha"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转" 
        android:onClick="rotate"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="一起飞" 
        android:onClick="fly"
        />
</LinearLayout>
 <Button
     android:layout_below="@id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="xml定义的属性动画" 
        android:onClick="xml"
        />
    
    <ImageView 
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

MainActivity.java

package com.itheima.objectanimator;

import android.os.Bundle;
import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.Toast;

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){
//		TranslateAnimation ta = new TranslateAnimation(0, 150, 0, 0);
//		ta.setDuration(2000);
//		ta.setFillAfter(true);
//		iv.startAnimation(ta);
		
		//target:动画作用于哪个组件，这里是改变x的坐标，一次只能改变一个坐标（x或者y），下面的参数的意思是x坐标先从10到70到20最后到100
		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 10, 70, 20, 100);
		oa.setDuration(2000);
		oa.setRepeatCount(1);
		oa.setRepeatMode(ValueAnimator.REVERSE);
		oa.start();
	}
	
	//大小的改变
	public void scale(View v){
		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleX", 1, 1.6f, 1.2f, 2);
		oa.setDuration(2000);
		oa.start();
	}
	
	public void alpha(View v){
		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", 0, 0.6f, 0.2f, 1);
		oa.setDuration(2000);
		oa.start();
	}
	
	public void rotate(View v){
		ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY", 0, 180, 90, 360);
		oa.setDuration(2000);
		oa.setRepeatCount(1);
		oa.setRepeatMode(ValueAnimator.REVERSE);
		oa.start();
	}
	
	//多个特效一起
	public void multiple(View v){
		AnimatorSet set = new AnimatorSet();
		
		ObjectAnimator oa1 = ObjectAnimator.ofFloat(iv, "translationX", 10, 70, 20, 100);
		oa1.setDuration(2000);
		oa1.setRepeatCount(1);
		oa1.setRepeatMode(ValueAnimator.REVERSE);
		
		ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY", 10, 70, 20, 100);
		oa2.setDuration(2000);
		oa2.setRepeatCount(1);
		oa2.setRepeatMode(ValueAnimator.REVERSE);
		
		ObjectAnimator oa3 = ObjectAnimator.ofFloat(iv, "scaleX", 1, 1.6f, 1.2f, 2);
		oa3.setDuration(2000);
		oa3.setRepeatCount(1);
		oa3.setRepeatMode(ValueAnimator.REVERSE);
		
		ObjectAnimator oa4 = ObjectAnimator.ofFloat(iv, "rotation", 0, 180, 90, 360);
		oa4.setDuration(2000);
		oa4.setRepeatCount(1);
		oa4.setRepeatMode(ValueAnimator.REVERSE);
		
		//设置特效一个个执行
//		set.playSequentially(oa1, oa2, oa3, oa4);
		//设置特效一起执行
		set.playTogether(oa1, oa2, oa3, oa4);
		set.start();
	}
	
	public void xml(View v){
		Animator at = AnimatorInflater.loadAnimator(this, R.animator.objanimator);
		//设置作用于哪个组件
		at.setTarget(iv);
		at.start();
	}
	
}