Android_动画机制

Android动画是在开发时候必备的需求，随着设计师动画效果日趋复杂，作为一位合格的Android工程师掌握动画是必备的技能

一 逐帧动画

逐帧动画是利用人眼视觉停留的效果，在不断的变化，感觉出动画的效果，设计师给出一系列可以变化的图片，开发者指定每一帧图片播放的时间，然后开始动画

步骤1将所有图片放到drawable下 命名最好有顺序

步骤2 在drawble下创建一个文件 名字可以为animation1.xml

<animation-list    xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item android:duration="100" android:drawable="@drawable/loading_11" />    <item android:duration="100" android:drawable="@drawable/loading_12" />    <item android:duration="100" android:drawable="@drawable/loading_13" />    <item android:duration="100" android:drawable="@drawable/loading_14" />    <item android:duration="100" android:drawable="@drawable/loading_15" />    <item android:duration="100" android:drawable="@drawable/loading_16" />    <item android:duration="100" android:drawable="@drawable/loading_17" />    <item android:duration="100" android:drawable="@drawable/loading_18" />    <item android:duration="100" android:drawable="@drawable/loading_19" />    <item android:duration="100" android:drawable="@drawable/loading_110" /></animation-list>

步骤3 创建布局文件 根据需要来满足需求

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <ImageView        android:id="@+id/animationIV"        android:layout_gravity="center"        android:layout_width="50dp"        android:layout_height="50dp"        />    <Button        android:id="@+id/button1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始动画逐帧动画"        /></LinearLayout>

步骤4 在代码中绑定布局开始动画 核心代码如下

public class MainActivity extends AppCompatActivity {     ImageView animationIV;     Button button1;    private AnimationDrawable animationDrawable;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        animationIV= (ImageView) findViewById(R.id.animationIV);        button1= (Button) findViewById(R.id.button1);        button1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                animationIV.setImageResource(R.drawable.default_loading);                animationDrawable = (AnimationDrawable) animationIV.getDrawable();                animationDrawable.start();            }        });    }}

二、补间动画

补间动画是用得比较多的动画，只需要定义动画开始和结束的两个关键帧，并指定动画变化的时间和方式就可以进行动画，主要包括四种动画，透明度变化Alpha，大小变化Scale，位移变化Translate 以及旋转变化Rotate 这四种效果可以动态组合实现复杂的动画效果

2.1AlphaAnimation动画

步骤1在anim中定义好布局

<set xmlns:android="http://schemas.android.com/apk/res/android">    <alpha        android:fromAlpha="0.0"        android:toAlpha="1.0"        android:duration="200"        ></alpha></set>

步骤2 设计好布局

<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="viewdraw.animation.MainActivity"    android:orientation="vertical"    >  <ImageView      android:id="@+id/img1"      android:layout_gravity="center_horizontal"      android:layout_width="100dp"      android:layout_height="100dp"      android:background="@mipmap/ic_launcher"      tools:layout_editor_absoluteY="0dp"      tools:layout_editor_absoluteX="0dp" />    <Button        android:id="@+id/button1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="xml方式开始透明动画"        tools:layout_editor_absoluteY="0dp"        tools:layout_editor_absoluteX="8dp" />    <Button        android:id="@+id/button2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="代码方式开始透明动画"        tools:layout_editor_absoluteY="0dp"        tools:layout_editor_absoluteX="8dp" /></LinearLayout>

步骤3在代码中绑定

     button1.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);                img.startAnimation(animation);            }        });

或者直接用代码实现

 button2.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);                alphaAnimation.setDuration(1000);                img.startAnimation(alphaAnimation);            }        });

2.2 ScaleAnimation 缩放动画

步骤1 配置xml文件

<set xmlns:android="http://schemas.android.com/apk/res/android"><scale    android:duration="2000"    android:fromXScale="1.0"    android:fromYScale="1.0"    android:toXScale="0.1"    android:toYScale="0.1"    android:pivotX="50%"    android:pivotY="50%"    ></scale></set>

配置布局文件 与上面雷同

绑定代码

    button3.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);                img.startAnimation(animation);            }        });

代码方式实现

  button4.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //参数 1为动画开始x的尺寸 2动画结束x的尺寸 3 动画开始Y的尺寸 4 动画结束Y 的尺寸 5缩放的参照物对象 6 x轴的缩放点 7缩放的参照物 8Y轴的缩放点                ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4f,1.0f,4.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,0.0f);                scaleAnimation.setDuration(1000);                img.startAnimation(scaleAnimation);            }        });

2.3TranslateAnimation 位移动画

xml 配置文件

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

　布局与上面雷同　

代码绑定实现
　　

  button5.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);                img.startAnimation(animation);            }        });直接代码实现   button6.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TranslateAnimation animation= new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,100f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);                img.startAnimation(animation);            }        });    }

2.4RotateAnimation 旋转动画

xml配置文件

<rotate    android:duration="2000"    android:fromDegrees="0"    android:toDegrees="360"    android:pivotY="50%"    android:pivotX="50%"    ></rotate>

布局文件与上面雷同

代码布局

  button7.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);                img.startAnimation(animation);                 img.startAnimation(animation);            }        });

直接代码实现

   button8.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                RotateAnimation animation= new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);                animation.setDuration(2000);                img.startAnimation(animation);            }        });

三、属性动画

在补间动画中View的真实属性并没有被改变，而属性动画可以直接改变View对象的属性值，从某种意义上说属性动画是补间动画的加强版

3.1直接代码

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    xmlns:android="http://schemas.android.com/apk/res/android"><ImageView    android:id="@+id/img"    android:layout_gravity="center_horizontal"    android:layout_width="100dp"    android:layout_height="100dp"    android:background="@mipmap/ic_launcher"    />    <Button        android:id="@+id/button1"        android:layout_width="match_parent"        android:layout_height="wrap_content"         android:text="开始属性动画拉伸X"        />    <Button        android:id="@+id/button2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始属性动画透明"        />    <Button        android:id="@+id/button3"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始属性动画旋转"        />    <Button        android:id="@+id/button4"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始属性动画移动"        />    <Button        android:id="@+id/button5"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始属性动画监听集合"        /></LinearLayout>

代码文件

package viewdraw.propertyanimation;import android.animation.Animator;import android.animation.AnimatorSet;import android.animation.ObjectAnimator;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {    ImageView imageView;    Button button,button2,button3,button4,button5;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        imageView= (ImageView) findViewById(R.id.img);        button= (Button) findViewById(R.id.button1);        button2= (Button) findViewById(R.id.button2);        button3= (Button) findViewById(R.id.button3);        button4= (Button) findViewById(R.id.button4);        button5= (Button) findViewById(R.id.button5);        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0, 3,1);                scaleY.setDuration(2000);                scaleY.start();            }        });        button2.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f);                alpha.setDuration(2000);                alpha.start();            }        });        button3.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ObjectAnimator rotation = ObjectAnimator.ofFloat(imageView, "rotation", 0, 360);                rotation.setDuration(2000);                rotation.start();            }        });        button4.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ObjectAnimator alpha = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 500f);                alpha.setDuration(2000);                alpha.start();            }        });        button5.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ObjectAnimator moveIn = ObjectAnimator.ofFloat(imageView, "translationX", -500f, 0f);                ObjectAnimator rotate = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 360f);                ObjectAnimator fadeInOut = ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f, 1f);                AnimatorSet animSet = new AnimatorSet();                animSet.play(rotate).with(fadeInOut).after(moveIn);                animSet.setDuration(5000);                animSet.start();                animSet.addListener(new Animator.AnimatorListener() {                    @Override                    public void onAnimationStart(Animator animation) {                        Toast.makeText(getApplicationContext(),"动画开始了",Toast.LENGTH_SHORT).show();                    }                    @Override                    public void onAnimationRepeat(Animator animation) {                    }                    @Override                    public void onAnimationEnd(Animator animation) {                        Toast.makeText(getApplicationContext(),"动画结束了",Toast.LENGTH_SHORT).show();                    }                    @Override                    public void onAnimationCancel(Animator animation) {                    }                });            }        });    }}