> 文章列表 > Android学习之帧动画和视图动画

Android学习之帧动画和视图动画

Android学习之帧动画和视图动画

动画

帧动画中的每一帧其实都是一张图片,将许多图片连起来播放,就形成了帧动画。

在drawable目录下新建frmae_animation文件,在这个文件中定义了帧动画的每一帧要显示的图片,播放时,按从上到下显示。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="true">      <!--是否循环播放--><!--android:duration:动画持续时间--><itemandroid:drawable="@drawable/three"android:duration="200"/><itemandroid:drawable="@drawable/two"android:duration="200"/><itemandroid:drawable="@drawable/three"android:duration="200"/></animation-list>

将帧动画和view绑定,帧动画会在view上播放。通过两个按钮控制动画的播放。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><Viewandroid:id="@+id/view"android:layout_width="300dp"android:layout_height="300dp"android:background="@drawable/frame_animation"android:layout_gravity="center_horizontal"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_gravity="bottom"><Buttonandroid:id="@+id/btn_start"android:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:text="start"android:onClick="onCLick"/><Buttonandroid:id="@+id/btn_stop"android:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:text="stop"android:onClick="onCLick"/></LinearLayout></LinearLayout>

通过view.getBackground()方法获取到view上的帧动画,然后通过AnimationDrawable类的start()方法和stop()方法去控制动画的播放和停止。

public class MainActivity extends AppCompatActivity {private AnimationDrawable background;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);View view = findViewById(R.id.view);background = (AnimationDrawable) view.getBackground();}public void onCLick(View view) {switch (view.getId()) {case R.id.btn_start:background.start();break;case R.id.btn_stop:background.stop();break;}}}

视图动画

渐变动画分为四种,分别是透明、旋转、平移、缩放;这四种动画在使用时都需要传入参数。下面是一些常见方法的意义,除了使用方法去设置,在xml文件中也可以设置。

方法 作用
setDuration() 设置动画的执行时间
setRepeatMode() 设置重复的模式 Animation.REVERSE 反向执行, Animation.RESTART 重复来一次
setRepeatCount() 设置重复的次数,如果重复次数为0只会执行一次动画,如果重复次数>0,会执行次数+1次
setFillAfter() 设置动画执行之后,执行动画的控件停留在结束的状态上;默认是false,也就是执行完恢复到初始状态

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Buttonandroid:onClick="alpha"android:id="@+id/btn_alpha"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Alpha"/><Buttonandroid:onClick="scale"android:id="@+id/btn_scale"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Scale"/><Buttonandroid:onClick="rotate"android:id="@+id/btn_rotate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Rotate"/><Buttonandroid:onClick="translate"android:id="@+id/btn_translate"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Translate"/></LinearLayout><ImageViewandroid:id="@+id/iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/ic_launcher"/></LinearLayout>

透明

    public void alpha(View v) {//第一个参数动画开始时的透明度,第二个参数:动画结束时的透明度,1代表不透明,0代表透明AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);//设置动画的执行时间alphaAnimation.setDuration(200);//设置重复的模式 Animation.REVERSE 反向执行, Animation.RESTART 重复来一次alphaAnimation.setRepeatMode(Animation.REVERSE);//设置重复的次数,如果重复次数为0只会执行一次动画,如果重复次数>0,会执行次数+1次alphaAnimation.setRepeatCount(2);//设置动画执行之后,执行动画的控件停留在结束的状态上//默认是false,也就是执行完恢复到初始状态alphaAnimation.setFillAfter(true);//imageView.setAnimation(alphaAnimation);imageView.startAnimation(alphaAnimation);}

使用xml文件实现透明动画

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

旋转

public void rotate(View v) {//fromDegrees:旋转开始角度, toDegrees:旋转结束角度,pivotX:旋转起点x坐标,旋转起点x坐标的类型//pivotY:旋转起点Y坐标,旋转起点y坐标的类型RotateAnimation rotateAnimation = new RotateAnimation(0,90,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);rotateAnimation.setDuration(200);rotateAnimation.setRepeatMode(Animation.REVERSE);rotateAnimation.setRepeatCount(0);rotateAnimation.setFillAfter(true);imageView.startAnimation(rotateAnimation);}

使用xml文件实现旋转动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><rotate android:fromDegrees="0"android:toDegrees="180"android:pivotX="0"android:pivotY="0"android:duration="200"android:fillAfter="true"/>

平移

 public void translate(View v) {//fromDelta:起始点x轴坐标,fromYDelat:起始点Y轴坐标//toXDelta:结束点x轴坐标,toYDelta:结束点Y轴坐标TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,0);translateAnimation.setDuration(200);translateAnimation.setRepeatMode(Animation.REVERSE);translateAnimation.setRepeatCount(0);translateAnimation.setFillAfter(true);imageView.startAnimation(translateAnimation);}

使用xml文件实现平移动画

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

缩放

使用代码实现缩放动画

public void scale(View v) {//第一个参数:初始x轴的缩放比例,第二个参数:结束时x轴的缩放比例//第3个参数:初始Y轴缩放比例,第四个参数:结束Y轴的缩放比例//第五个参数:缩放起点x轴坐标,第6个参数:缩放起点Y轴坐标ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_SELF);scaleAnimation.setDuration(200);scaleAnimation.setRepeatMode(Animation.REVERSE);scaleAnimation.setRepeatCount(0);scaleAnimation.setFillAfter(true);imageView.startAnimation(scaleAnimation);}

使用xml文件实现缩放动画
这里面参数的意思和使用代码的参数的意义是一致的,

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

属性动画

属性动画和视图动画的区别在于,属性动画会改变view的属性,视图动画不会改变view的属性。视图动画只能操作视图对象,而属性动画可以操作任意对象。

动画属性

时长
时间插值器
重复次数以及重复模式
动画集
延迟