逐幀動畫和補間動畫的使用場景（二）

                     逐幀動畫和補間動畫的使用場景（二） 

上一節咱們詳細的介紹了補間動畫和逐幀動畫的基本使用,若是你對這還不熟悉的請看這篇文章：

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

運行的效果圖：

到此逐幀動畫和補間動畫全部的都講完了，但願能幫到各位看客，哈哈！