2019獨角獸企業重金招聘Python工程師標準>>>

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

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

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"><ProgressBarandroid: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"/><TextViewandroid: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();}}};@Overrideprotected 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 視圖的中心點 2sRotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setDuration(2000);//透明度動畫 AlphaAnimation: 0-->1 2sAlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);alphaAnimation.setDuration(2000);//縮放動畫 ScaleAnimation: 0-->1 視圖的中心點 2sScaleAnimation 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" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="向導111111" /><Buttonandroid: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"?> <translatexmlns: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"?> <translatexmlns: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 {@Overrideprotected 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"><EditTextandroid:id="@+id/et_main_name"android:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="用戶名" /><Buttonandroid: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 ProjectLicensed 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 athttp://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations 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;@Overrideprotected 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" ><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="手機殺毒"android:background="#FFCFCE"android:textSize="25sp"android:gravity="center"android:padding="5dp"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:background="@drawable/ic_scanner_malware"><ImageViewandroid:id="@+id/iv_main_scan"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/act_scanning_03" /></FrameLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center_vertical"android:layout_marginLeft="10dp"><TextViewandroid:id="@+id/tv_main_scan"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView" /><ProgressBarandroid: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;@Overrideprotected 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("手機殺毒引擎正在掃描中...");//設置進度條的最大值100pb_main_scan.setMax(100);}//2. 分線程, 做長時間的工作(掃描應用)@Overrideprotected 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);} }

運行的效果圖：

到此逐幀動畫和補間動畫所有的都講完了，希望能幫到各位看客，哈哈！

轉載于:https://my.oschina.net/quguangle/blog/798305

總結

以上是生活随笔為你收集整理的逐帧动画和补间动画的使用场景（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。