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

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

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

运行的效果图：

到此逐帧动画和补间动画所有的都讲完了，希望能帮到各位看客，哈哈！