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) {
                    }
                });
            }
        });

    }
}