逐帧动画和补间动画的使用场景（二）

                     逐帧动画和补间动画的使用场景（二） 

上一节咱们详细的介绍了补间动画和逐帧动画的基本使用,若是你对这还不熟悉的请看这篇文章：

https://my.oschina.net/quguangle/blog/798242

下面咱们基于上一篇对补间动画和逐帧动画应用给出讲解

1.场景1：

•功能1 : 欢迎界面的透明度动画和自定义环形进度条

•功能2 : 界面切换的平移动画

•功能3 : 输入框没有输入的水平晃动动画

补充的知识：

功能1 : 欢迎界面的透明度动画和自定义环形进度条

WelcomeActivity布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_welcome_root"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background">

    
    <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"/>
    
    <TextView
        android:id="@+id/tv_welcome_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/pb_welcome_loading"
        android:layout_marginBottom="10dp"
        android:text="当前版本: 1.0"
        android:textSize="20sp" />
    

</RelativeLayout>

主WelcomeActivity

/**
 * 欢迎界面
 * @author quguangle
 *
 */
public class WelcomeActivity extends Activity {

	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, SetupGuide1Activity.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_root);
		
		//显示动画
		showAnimation();
		
		//发送延迟3s的消息
		handler.sendEmptyMessageDelayed(1, 6000);
	}

	/**
	 * 显示动画
	 * 
	 * 旋转动画  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);
	}
}

运行效果图：

功能2 : 界面切换的平移动画

SetUpGuideActivity的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="向导111111" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="下一步" 
        android:onClick="next"/>

</RelativeLayout>

动画布局：R.anim.right_in,  R.anim.left_out

<!-- right_out -->
<?xml version="1.0" encoding="utf-8"?>
<translate
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="100%"
     android:toXDelta="0"
     android:duration="500">
</translate>

<!-- left_out -->
<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0" 
    android:toXDelta="-100%"
    android:duration="500">
</translate>

主SetUpGuideActivity

/**
 * 设置向导1界面
 * @author quguangle
 *
 */
public class SetupGuide1Activity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_setup_guide1);
	}
	
	public void next(View v) {
		startActivity(new Intent(this, SetupGuide2Activity.class));
		overridePendingTransition(R.anim.right_in, R.anim.left_out);
	}
}

对于SetupGuide2Activity , SetupGuide3Activity咱们就不作介绍了同理，有兴趣的朋友能够本身去写写。

功能3 : 输入框没有输入的水平晃动动画

Activity的布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/et_main_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="用户名" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_main_name"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="41dp"
        android:text="登录" 
        android:onClick="login"/>

</RelativeLayout>

动画布局文件：R.anim.shake

<?xml version="1.0" encoding="utf-8"?>
<!--
     Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:interpolator="@anim/cycle_8"
    android:toXDelta="10" />

这个动画是系统自带的，有兴趣的朋友能够本身去看看。

主MainActivity

public class MainActivity extends Activity {

	private EditText et_main_name;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		et_main_name = (EditText) findViewById(R.id.et_main_name);
	}
	
	public void login(View v) {
		//获得输入框的文本
		String name = et_main_name.getText().toString();
		//判断是不是空串, 若是为空串, 显示抖动动画
		if("".equals(name.trim())) {
			Animation animation = AnimationUtils.loadAnimation(this, R.anim.shake);
			et_main_name.startAnimation(animation);
		} else {
			//不然, 提示登录
			Toast.makeText(this, "去登录", Toast.LENGTH_SHORT).show();
		}
		
	}
}

效果图以下：

因为这些效果都有动画，我这截的图都是静态的，不能直接看出效果，仍是那句话，有兴趣的朋友能够本身动手写写。

2.场景2

•功能1 : 自定义水平进度条

•功能2 : 雷达扫描旋转动画

功能1 : 自定义水平进度条

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 指定背景图片 id为background -->
    <item android:id="@android:id/background"
        android:drawable="@drawable/security_progress_bg"/>
    <!-- 指定宽度变化的进度图片 id为progress -->
    <item android:id="@android:id/progress"
         android:drawable="@drawable/security_progress"/>
</layer-list>

android:progressDrawable="@drawable/my_progress"

功能2 : 雷达扫描旋转动画

Activity的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

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

    <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="TextView" />

            <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>

主MainActivity:

public class MainActivity extends Activity {

	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_main);

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

		//1. 显示扫描动画
		showScanAnimation();

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

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

			//1. 主线程, 显示提示视图
			protected void onPreExecute() {
				tv_main_scan.setText("手机杀毒引擎正在扫描中...");
				//设置进度条的最大值100
				pb_main_scan.setMax(100);
			}

			//2. 分线程, 作长时间的工做(扫描应用)
			@Override
			protected Void doInBackground(Void... params) {
				for(int i=0;i<100;i++) {
					SystemClock.sleep(300);
					//扫描完成一个
					//发布进度
					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);
	}
}

运行的效果图：

到此逐帧动画和补间动画全部的都讲完了，但愿能帮到各位看客，哈哈！