在使用新浪微博时,通过点击主界面底部的“+”按钮,会弹出一个包含各种按钮操作的界面。
接下来,我们对该页面的动画效果进行分析。
在整个操作流程中,涉及到的动画如下:
(1).当面板视图显示时,按钮从屏幕底部进入并附带弹性效果的动画;
(2).点击按钮时,手指按下,按钮被放大的动画;
(3).点击按钮时,手指拿起,按钮从放大状态回归初始尺寸的动画;
(4).当面板视图隐藏时,按钮从屏幕底部退出的动画;
(5).关闭按钮旋转的动画。
有了上述动画xml文件,我们将其应用到java代码中。
(1).初始化动画。
(2).打开面板视图时,启动按钮的进入动画,并未关闭按钮添加旋转动画。
(3).给按钮添加touch事件监听,根据用户操作执行放大和缩小的动画。
(4).关闭面板视图时,启动按钮的退出动画。
这个界面的用户体验比较酷炫,如中华万年历等app都在使用,首先我们来看一下效果图。
接下来,我们对该页面的动画效果进行分析。
在整个操作流程中,涉及到的动画如下:
(1).当面板视图显示时,按钮从屏幕底部进入并附带弹性效果的动画;
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="250"
android:fromYDelta="100%"
android:interpolator="@android:anim/overshoot_interpolator"
android:toYDelta="0%"/>
(2).点击按钮时,手指按下,按钮被放大的动画;
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="150"
android:fillAfter="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.2"
android:toYScale="1.2"/>
(3).点击按钮时,手指拿起,按钮从放大状态回归初始尺寸的动画;
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="150"
android:fillAfter="true"
android:fromXScale="1.2"
android:fromYScale="1.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0"/>
(4).当面板视图隐藏时,按钮从屏幕底部退出的动画;
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="150"
android:fromYDelta="0%"
android:toYDelta="500%"/>
(5).关闭按钮旋转的动画。
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fillAfter="true"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90"/>
有了上述动画xml文件,我们将其应用到java代码中。
(1).初始化动画。
// 初始化动画
private void initAnimation() {
mButtonInAnimation = AnimationUtils.loadAnimation(this, R.anim.button_in);
mButtonOutAnimation = AnimationUtils.loadAnimation(this, R.anim.button_out);
mButtonScaleLargeAnimation = AnimationUtils.loadAnimation(this, R.anim.button_scale_to_large);
mButtonScaleSmallAnimation = AnimationUtils.loadAnimation(this, R.anim.button_scale_to_small);
mCloseRotateAnimation = AnimationUtils.loadAnimation(this, R.anim.close_rotate);
}
(2).打开面板视图时,启动按钮的进入动画,并未关闭按钮添加旋转动画。
// 打开面板视图
private void openPanelView() {
mPanelView.setVisibility(View.VISIBLE);
mIdeaButton.startAnimation(mButtonInAnimation);
mPhotoButton.startAnimation(mButtonInAnimation);
mWeiboButton.startAnimation(mButtonInAnimation);
mLbsButton.startAnimation(mButtonInAnimation);
mReviewButton.startAnimation(mButtonInAnimation);
mMoreButton.startAnimation(mButtonInAnimation);
mCloseButton.startAnimation(mCloseRotateAnimation);
}
(3).给按钮添加touch事件监听,根据用户操作执行放大和缩小的动画。
@Override
public boolean onTouch(final View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 手指按下,按钮执行放大动画
v.startAnimation(mButtonScaleLargeAnimation);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
// 手指移开,按钮执行缩小动画
v.startAnimation(mButtonScaleSmallAnimation);
v.postDelayed(new Runnable() {
@Override
public void run() {
// 缩小动画执行完毕后,将按钮的动画清除。这里的150毫秒是缩小动画的执行时间。
v.clearAnimation();
}
}, 150);
break;
}
return true;
}
(4).关闭面板视图时,启动按钮的退出动画。
// 关闭面板视图
private void closePanelView() {
// 给6个按钮添加退出动画
mIdeaButton.startAnimation(mButtonOutAnimation);
mPhotoButton.startAnimation(mButtonOutAnimation);
mWeiboButton.startAnimation(mButtonOutAnimation);
mLbsButton.startAnimation(mButtonOutAnimation);
mReviewButton.startAnimation(mButtonOutAnimation);
mMoreButton.startAnimation(mButtonOutAnimation);
}
最后附上完整的工程代码下载链接: