【Android】详解Android动画

目录结构：

contents structure [+]

在这篇文章中，笔者会详细介绍Android的动画。安卓中的动画大致分为tweened animation(补间动画)、frame-by-frame animation(逐帧动画)、Property Animation(属性动画)，这个三个概念之间有点重合，下面介绍三种属性动画的产生时间顺序，其中补间动画和逐帧动画是Android1.0中被加入的，随着时间的推移简单的动画已经不能满足需求了，在Android4.0之后就加入了属性动画。本文还会介绍View、surfaceView和GLSurfaceView之间的比较。

补间动画（tweened animation）都继承自android.view.animation.Animation抽象类，android.view.animation.Animation有五个直接实现子类：AlphaAnimation,AnimationSet,RotateAnimation,ScaleAnimation,TranslateAnimation。
其中AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation是效果动画类，而AnimationSet是用于完成一系列组合动画的。

1.1 使用java代码实现Alpha、Rotate、Scale、Translate动画

下面这个栗子，演示了Alpha(淡入淡出)、Rotate(旋转)、Scale(缩放)、Translate(移动)的效果:
xml文件布局如下:

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
         <Button
            android:id="@+id/rotateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋转" />
         <Button
            android:id="@+id/scaleButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缩放" />
         <Button
            android:id="@+id/alphaButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="淡入淡出" />
         <Button
            android:id="@+id/translateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="移动" />
    </LinearLayout>
         <ImageView
             android:id="@+id/image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerHorizontal="true"
             android:layout_centerVertical="true"
             android:src="@drawable/ic_launcher" />

java代码如下：

public class MainActivity extends Activity {
    private Button rotateButton = null;
    private Button scaleButton = null;
    private Button alphaButton = null;
    private Button translateButton = null;
    private ImageView image = null;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        rotateButton = (Button)findViewById(R.id.rotateButton);
        scaleButton = (Button)findViewById(R.id.scaleButton);
        alphaButton = (Button)findViewById(R.id.alphaButton);
        translateButton = (Button)findViewById(R.id.translateButton);
        image = (ImageView)findViewById(R.id.image);
        
        rotateButton.setOnClickListener(new RotateButtonListener());
        scaleButton.setOnClickListener(new ScaleButtonListener());
        alphaButton.setOnClickListener(new AlphaButtonListener());
        translateButton.setOnClickListener(new TranslateButtonListener());
    }
    class AlphaButtonListener implements OnClickListener{
        public void onClick(View v) {
            //创建一个AnimationSet对象，参数为Boolean型，
            //true表示使用Animation的interpolator，false则是使用自己的
            AnimationSet animationSet = new AnimationSet(true);
            //创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明
            AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
            //设置动画执行的时间
            alphaAnimation.setDuration(2000);
            //将alphaAnimation对象添加到AnimationSet当中
            animationSet.addAnimation(alphaAnimation);
            //使用ImageView的startAnimation方法执行动画
            image.startAnimation(animationSet);
        }
     }
    class RotateButtonListener implements OnClickListener{
        public void onClick(View v) {
            AnimationSet animationSet = new AnimationSet(true);
            //参数1：从哪个旋转角度开始
            //参数2：转到什么角度
            //后4个参数用于设置围绕着旋转的圆的圆心在哪里
            //参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
            //参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
            //参数5：确定y轴坐标的类型
            //参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
            RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                   Animation.RELATIVE_TO_SELF,0.5f,
                   Animation.RELATIVE_TO_SELF,0.5f);
            rotateAnimation.setDuration(2000);
            animationSet.addAnimation(rotateAnimation);
            image.startAnimation(animationSet);
        }
    }
    class ScaleButtonListener implements OnClickListener{
        public void onClick(View v) {
                AnimationSet animationSet = new AnimationSet(true);
                //0f从相对0点开始(若x和y的开始点都是0，那么就是从一个点开始)，1f表示目前一个控件长度的位置（若x和y的结束点都是1f，那么就是缩放到原本大小。）
                //参数1：x轴的初始值
                //参数2：x轴收缩后的值
                //参数3：y轴的初始值
                //参数4：y轴收缩后的值
                //参数5：确定x轴坐标的类型
                //参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
                //参数7：确定y轴坐标的类型
                //参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
                ScaleAnimation scaleAnimation = new ScaleAnimation(
                       0f, 1f,0f,1f,
                       Animation.RELATIVE_TO_SELF,0.5f,
                       Animation.RELATIVE_TO_SELF,0.5f);
                scaleAnimation.setDuration(2000);
                animationSet.addAnimation(scaleAnimation);
                image.startAnimation(animationSet);
        }
    }
    class TranslateButtonListener implements OnClickListener{
        public void onClick(View v) {
                AnimationSet animationSet = new AnimationSet(true);
                //参数1～2：x轴的开始位置，0f代表从当前x轴点移动，1f代表以右移当前控件长度开始
                //参数3～4：y轴的开始位置，0f代表从当前y轴点移动，1f代表下移当前控件长度开始
                //参数5～6：x轴的结束位置
                //参数7～8：y轴的结束位置
                TranslateAnimation translateAnimation =
                   new TranslateAnimation(
                       Animation.RELATIVE_TO_SELF,0f,
                       Animation.RELATIVE_TO_SELF,0f,
                       Animation.RELATIVE_TO_SELF,0f,
                       Animation.RELATIVE_TO_SELF,2f);
                translateAnimation.setDuration(2000);
                animationSet.addAnimation(translateAnimation);
                image.startAnimation(animationSet);
       }
   }
}

效果图如下：
【Android】详解Android动画

1.2 通过xml文件实现Alpha、Rotate、Scale、Translate动画

上面是在java代码中使用的使用Animation,这样的方式方便调试、运行，但是代码的重用性却不好，下面通过xml来实现Animation。

1.2.1 步骤

1) 在res文件夹下面建立anim文件夹
2) 创建xml文件，并加入set标签
3) 向set标签中加入rotate，alpha，scale或者translate标签
4) 使用AnimationUtils类加载xml文件

1.2.2 xml实现Animation案例

建立如下图的文件格式
【Android】详解Android动画
alpha.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="2000"/>
</set>
alpha.xml

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode