Android学习第五篇——动画效果

最新推荐文章于 2023-08-04 17:35:08 发布

Felix皇子

最新推荐文章于 2023-08-04 17:35:08 发布

阅读量1.4k

点赞数 1

分类专栏： Android Android代码练习

本文链接：https://blog.csdn.net/f_felix/article/details/51044278

版权

Android 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Android代码练习

13 篇文章 0 订阅

订阅专栏

接下来我要介绍的是Android的一些动画效果

一、AlphaAnimation透明动画

这里我用到了两种不同的方法来实现透明动画效果

首先布局文件很简单，就是拖放一个按钮在界面上

<Button
        android:id="@+id/btnAnimate"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/animation" />

1、直接调动AlphaAnimation类

我们到MainActivity文件中，找到PlaceholderFragment，接下来我们在这里面执行接下来的方法

public static class PlaceholderFragment extends Fragment {

		public PlaceholderFragment() {
		}

		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {
			View rootView = inflater.inflate(R.layout.fragment_main, container,
					false);
			return rootView;
		}
	}

我们首先要获取那个按钮，然后对按钮添加监听事件

rootView.findViewById(R.id.btnAnimate).setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
				}
			});

接下来就是最关键的添加动画效果

rootView.findViewById(R.id.btnAnimate).setOnClickListener(new OnClickListener() {
				@Override
				public void onClick(View v) {
					AlphaAnimation aa=new AlphaAnimation(0, 1);//<h5><div style="WORD-WRAP: break-word; POSITION: relative; PADDING-TOP: 2px; MARGIN-LEFT: 20px">AlphaAnimation(<span style="FONT-WEIGHT: normal"></span>float fromAlpha, <span style="FONT-WEIGHT: normal"></span>float toAlpha)起始透明度和结束透明度</div></h5>					aa.setDuration(1000);//变化持续的时间1000ms
					v.startAnimation(aa);
				}
			});

代码写到这里就已经完成了我们的效果，直接在模拟器中运行就可以看到效果了。

2、调用另外的XML动画文件

相对于上面的这种方法，接下来的方法，在调用的时候会显得更加简单，就是一句话的事

public void onClick(View v) {
	v.startAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.aa));
}

只要这么一句话就结束了，但是关键在于R.anim.aa这个文件

我们需要新建一个XML文件，并且把Resource Type设为下图的值，填上文件名，然后选择alpha，点击Finish就完成了

接下来我们在创建的文件中作如下编写就直接可以调用了

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

这样我们也完成了第二种方法。

二、RotateAnimation旋转动画

这里我同样会用两种方法来实现旋转动画，跟第一个动画一样

我们同样是一个按钮作为对象

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.rotateanimation.MainActivity"
    tools:ignore="MergeRootFrame">

    <Button
        android:id="@+id/btnRotate"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Rotate" />

</RelativeLayout>

1、直接调用RotateAnimation

接下来我们就要到MainActivity中进行操作了

首先定义一下

private RotateAnimation ra;

接下来我们会在onCreate中操作

ra=new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		ra.setDuration(1000);
		
		findViewById(R.id.btnRotate).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				v.startAnimation(ra);
			}
		});

我们一开始调用的构造函数是下面这个

ra=new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)

这里面的参数分别表示为：开始角度，目标角度，X坐标类型，X坐标值，Y坐标类型，Y坐标值

为什么我们要用这个呢？？

因为我们需要通过这个来控制按钮是围绕哪个中心进行旋转的，上面设置的值表示“按钮围绕自身X的一半，Y的一半，转一圈”，我们会觉这样写很繁琐，有时候会不记得那个类型怎么写，所以我们接下来看看第二种方法（上述代码已经可以运行了，运行结果就是点击按钮后会旋转一圈）

2、调用XML文件

XML文件的创建和第一种的一样，只是下面的根标签要换成Rotate

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

可能看了这个以后我们会疑问，为什么这里不用写pivotX和pivotY的Type了呢？？

因为在这里，pivotX和pivotY可以接受百分比的值，这样我们就觉得很方便，当然如果这两个值设成数值，表示的是像素。

最后一步就很简单了，只要在MainActivity中调用就可以了

findViewById(R.id.btnRotate).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.ra));
			}
		});

第二种方法到这里就完成了，代码执行的效果和前一种是一样的。

三、TranslateAnimation移动动画

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.translateanimation.MainActivity"
    tools:ignore="MergeRootFrame">

    <Button
        android:id="@+id/btnTranslate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Translate" />

</RelativeLayout>

1、直接调用TranslateAnimation

方法和之前的没有很大的差别，就不在多说，直接贴代码了

		private TranslateAnimation ta;
		//相对于自身来说，向右移动200增量，和向下移动200增量
		ta = new TranslateAnimation(0, 200, 0, 200);
		ta.setDuration(1000);
		
		findViewById(R.id.btnTranslate).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				v.startAnimation(ta);
			}
		});

2、调用XML文件

同样和之前没事差别，改变的只是XML文件的根标签Translate

<?xml version="1.0" encoding="utf-8"?>
<translate 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="200"
    android:fromYDelta="0"
    android:toYDelta="200"
    android:duration="1000" >

</translate>

最后调用

v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.ta));

这两个的效果是完全相同的，各个参数的值表示什么意思上面的注释中已经有了

四、ScaleAnimation缩放动画

布局文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.scaleanimation.MainActivity"
    tools:ignore="MergeRootFrame">
    
    <Button
        android:id="@+id/btnScale"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Scale" />

</FrameLayout>

1.、直接调用ScaleAnimation

		private ScaleAnimation sa;//这句需要定义在外面
		//相对于自身的中心点来缩放
		sa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
		sa.setDuration(1000);
		findViewById(R.id.btnScale).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				v.startAnimation(sa);
			}
		});

2、调用XML文件

XML文件根标签换成Scale

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0"
    android:toXScale="1"
    android:fromYScale="0"
    android:toYScale="1"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000" >

</scale>

最后调用

v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.sa));

效果就是点击按钮，按钮会一中心点进行缩放，上面的toXScale=“1”表示不缩放，这个1是一个比例，就是100%

五、混合动画效果

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.muilanimation.MainActivity"
    tools:ignore="MergeRootFrame" >

    <Button
        android:id="@+id/btnAnimate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="animaite" />

</RelativeLayout>

1、直接调用多种动画效果

我们需要完成的是混合的动画效果，所以我们不能单一的定义一种动画效果，我们需要一个集合去存放所有需要的动画效果

private AnimationSet as;

接下来的代码就非常类似了

//是否公用动画补间
		as = new AnimationSet(true);
		as.setDuration(1000);
		
		AlphaAnimation aa = new AlphaAnimation(0, 1);
		aa.setDuration(1000);
		as.addAnimation(aa);
		
		TranslateAnimation ta = new TranslateAnimation(200, 0, 200, 0);
		ta.setDuration(1000);
		as.addAnimation(ta);
		
		findViewById(R.id.btnAnimate).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				v.startAnimation(as);
			}
		});

这样就完成了两种混合动画效果的实现

2、调用XML文件

同样的我们需要创建一个XML文件，且文件的根标签我为set

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

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1" />

    <translate
        android:fromXDelta="200"
        android:fromYDelta="200"
        android:toXDelta="0"
        android:toYDelta="0" />

</set>

最后的调用方法也是一样的

v.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.as));

同样完成了两种混合动画效果的实现

六、自定义动画效果

布局和之前的一样，这里就不重复贴代码了！

Android只给我们提供了前四种最基本的动画效果，这对于我们来说是完全不够用了，所以我们需要自己定义动画效果来满足自身的需求。

这里我将实现一个按钮点击后，有震动效果的动画

首先我们需要创建一个类名为CustomAnimation 并且继承自Animation

在方法中需要重写applyTransformation这个方法

package com.example.customanimation;

import android.view.animation.Animation;
import android.view.animation.Transformation;

public class CustomAnimate extends Animation {
	@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		// TODO Auto-generated method stub
		super.applyTransformation(interpolatedTime, t);
	}
}

我们来解释一下这里的参数

在绘制动画的过程中会反复的调用applyTransformation函数，每次调用参数interpolatedTime值都会变化，该参数从0渐变为1，当该参数为1时表明动画结束。通过参数Transformation 来获取变换的矩阵（matrix），通过改变矩阵就可以实现各种复杂的效果。

interpolatedTime就是补间执行的时间，就是我们在创建类的实例的时候设置的xx.setDuration(1000);中的值。

同时我们还需要重写一个initialize方法，当我们需要实现旋转动画时，我们需要知道对象的一些信息，方便与于我们进行操作，该方法在一开始就会执行。

	@Override
	public void initialize(int width, int height, int parentWidth,
			int parentHeight) {
		// TODO Auto-generated method stub
		super.initialize(width, height, parentWidth, parentHeight);
	}

接下来我们完成我们需要的效果吧！

@Override
	protected void applyTransformation(float interpolatedTime, Transformation t) {
		// TODO Auto-generated method stub
		
		//Math.sin()是个周期函数，我们要实现按钮左右摇摆，就需要按钮可以周期性的移动，所以使用sin
		//括号里的表示时间
		//50表示的是左右移动的像素大小
		//因为只需要左右移动就行了，需要把Y设为0
		t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime*20)*50),0);
		super.applyTransformation(interpolatedTime, t);
	}

接下来的步骤就是MainActivity中调用了

private CustomAnimate ca;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		
		ca = new CustomAnimate();
		ca.setDuration(1000);
		findViewById(R.id.btnAnimate).setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				v.startAnimation(ca);
			}
		});
	}

运行起来我们就可以看到我们想要的效果了！

Felix皇子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android学习第五篇——动画效果

接下来我要介绍的是Android的一些动画效果一、AlphaAnimation透明动画这里我用到了两种不同的方法来实现透明动画效果首先布局文件很简单，就是拖放一个按钮在界面上<Button android:id="@+id/btnAnimate" android:layout_width="fill_parent" android:l
复制链接

扫一扫