Android动画学习（三）之补间动画常用的实例

Android动画学习（三）之补间动画常用的实例

本篇主要介绍补间动画几个使用的功能

• App欢迎界面的动画跳转
• 输入框EditText没有输入的水平晃动动画
• 仿360雷达扫描旋转动画

App欢迎界面的透明度动画

实现效果
App启动时设置定时动画跳转到MainActivity.
效果图：

开机启动动画使用复合动画。在Java中配置动画属性。
废话不说，直接上Activity代码

package com.example.administrator.androidanimation.practice;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;

import com.example.administrator.androidanimation.R;
import com.example.administrator.androidanimation.activity.MainActivity;
/**
*欢迎界面的透明度动画和自定义环形进度条
*@author ZD
*created at 2017/7/20 9:38
*description：
*/
public class WelcomeActivity extends AppCompatActivity {
    private RelativeLayout rl_welcome_root;
    private Handler handler  = new Handler(){
        public void handleMessage(android.os.Message msg) {
            if(msg.what==1) {
                startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
                //关闭自己
                finish();
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_welcome);
        rl_welcome_root = (RelativeLayout) findViewById(R.id.rl_welcome);

        //显示动画
        showAnimation();

        //发送延迟3s的消息
        handler.sendEmptyMessageDelayed(1, 3000);
    }
    /**
     * 显示动画
     *
     * 旋转动画  RotateAnimation: 0-->360 视图的中心点 2s
     * 透明度动画 AlphaAnimation: 0-->1 2s
     * 缩放动画 ScaleAnimation: 0-->1 视图的中心点 2s
     */
    private void showAnimation() {
        //旋转动画  RotateAnimation: 0-->360 视图的中心点 2s
        RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2000);
        //透明度动画 AlphaAnimation: 0-->1 2s
        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
        alphaAnimation.setDuration(2000);
        //缩放动画 ScaleAnimation: 0-->1 视图的中心点 2s
        ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(2000);
        //创建复合动画,并添加
        AnimationSet animationSet = new AnimationSet(true);
        animationSet.addAnimation(rotateAnimation);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);
        //启动
        rl_welcome_root.startAnimation(animationSet);
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_welcome"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/mei1"
    tools:context="com.example.administrator.androidanimation.practice.WelcomeActivity">
    <ProgressBar
        android:id="@+id/pb_welcome_loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:indeterminateDrawable="@anim/image_progress"
        android:indeterminateDuration="700"/>
</RelativeLayout>

输入框EditText没有输入的水平晃动动画

实现效果：
在EditText输入文本，得到输入框的文本，判断断是否是空串, 如果为空串, 显示抖动动画
效果图

Java代码

package com.example.administrator.androidanimation.practice;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.EditText;
import android.widget.Toast;

import com.example.administrator.androidanimation.R;
/**
*输入框没有输入的水平晃动动画
*@author ZD
*created at 2017/7/20 9:38
*description：
*/ 
public class InputETShakeActivity extends AppCompatActivity {
    private EditText et_main_name;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_input_etshake);

        et_main_name = (EditText) findViewById(R.id.et_main_name);
    }

    public void login(View v) {
        //得到输入框的文本
        String name = et_main_name.getText().toString();
        //判断是否是空串, 如果为空串, 显示抖动动画
        if(TextUtils.isEmpty(name.trim())) {
            Animation animation = AnimationUtils.loadAnimation(this, R.anim.shake);
            et_main_name.startAnimation(animation);
        } else {

            //否则, 提示操作成功
            Toast.makeText(this, "操作成功", Toast.LENGTH_SHORT).show();
        }

    }
}

XMl

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.administrator.androidanimation.practice.InputETShakeActivity">

    <EditText
        android:id="@+id/et_main_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="用户名"
        android:layout_above="@+id/button15"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="25dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登陆"
        android:onClick="login"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/button15" />
</RelativeLayout>

仿360雷达扫描旋转动画

实现效果：
模仿360杀毒时雷达不断旋转的效果
效果图

Java代码

package com.example.administrator.androidanimation.practice;

import android.os.AsyncTask;
import android.os.Bundle;
import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.example.administrator.androidanimation.R;

import static android.R.attr.id;

/**
 * 仿360雷达扫描旋转动画和自定义水平进度条
 *
 * @author ZD
 *         created at 2017/7/20 9:54
 *         description：
 */
public class RadarSkannaActivity extends AppCompatActivity {
    private ImageView iv_main_scan;
    private TextView tv_main_scan;
    private ProgressBar pb_main_scan;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radar_skanna);
        iv_main_scan = (ImageView) findViewById(R.id.iv_main_scan);
        tv_main_scan = (TextView) findViewById(R.id.tv_main_scan);
        pb_main_scan = (ProgressBar) findViewById(R.id.pb_main_scan);


    }

    public void scanRadar(View view) {
        //1. 显示扫描动画
        showScanAnimation();

        //2. 扫描,并显示扫描进度
        scan();
    }

    /**
     * 进度条
     * 扫描,并显示扫描进度
     */
    private void scan() {
        //启动异步任务做
        new AsyncTask<Void, Void, Void>() {

            //1. 主线程, 显示提示视图
            protected void onPreExecute() {
                tv_main_scan.setText("手机杀毒引擎正在扫描中...");
            }

            //2. 分线程, 做长时间的工作(扫描应用)
            @Override
            protected Void doInBackground(Void... params) {
                int appCount = 60;
                //设置进度条的最大值
                pb_main_scan.setMax(appCount);
                for (int i = 0; i < appCount; i++) {
                    SystemClock.sleep(40);
                    //扫描完成一个
                    //发布进度
                    publishProgress();
                }
                return null;
            }

            //在主线程执行, 更新进度
            protected void onProgressUpdate(Void[] values) {
                pb_main_scan.incrementProgressBy(1);//增加1
                //pb_main_scan.setProgress(pb_main_scan.getProgress()+1);//原始的方式
            }

            //3. 主线程, 更新界面
            protected void onPostExecute(Void result) {
                //隐藏进度条
                pb_main_scan.setVisibility(View.GONE);
                //更新文本
                tv_main_scan.setText("扫描完成, 未发现病毒应用, 请放心使用!");
                //停止扫描动画
                iv_main_scan.clearAnimation();
            }
        }.execute();
    }

    /**
     * 显示扫描动画
     * iv_main_scan的旋转动画
     */
    private void showScanAnimation() {
        //创建动画对象
        RotateAnimation animation = new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        //设置
        animation.setDuration(1000);
        animation.setRepeatCount(Animation.INFINITE);
        animation.setInterpolator(new LinearInterpolator());
        //启动
        iv_main_scan.startAnimation(animation);
    }
}

XMl

<?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"
    android:orientation="vertical"
    tools:context="com.example.administrator.androidanimation.practice.RadarSkannaActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="360手机杀毒"
        android:background="#FFCFCE"
        android:textSize="25sp"
        android:gravity="center"
        android:padding="5dp"/>

    <Button
        android:onClick="scanRadar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="扫描" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@drawable/ic_scanner_malware">

            <ImageView
                android:id="@+id/iv_main_scan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/act_scanning_03" />

        </FrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_vertical"
            android:layout_marginLeft="10dp">

            <TextView
                android:id="@+id/tv_main_scan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="自定义水平进度条" />

            <ProgressBar
                android:id="@+id/pb_main_scan"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/my_progress"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

总结

以上使经常使用补间动画实现的效果。当然动画可以实现的效果千千万万，这里只挑选三个常用的效果予以展示。更多的效果请自行实现。
写博客是为了帮助开发者学习使用技术，同时巩固自己所学技术。如果此篇博客有助于您的学习，那是我的荣幸！如果此篇博客有任何瑕疵，请多多指教!在此感谢您的学习和指教！