本文介绍了如何在Android中实现PathButton的动画效果，包括布局文件的编写、点击按钮的弹出和收回动画、白色十字选中效果以及黑色按钮的点击效果。详细讲述了每个步骤，并提供了相关学习资源链接。
一、先看下效果图
二、实现步骤
1. 编写布局文件
<?xml version="1.0" encoding="utf-8"?>
<!-- 使用merge进行布局优化 -->
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- 文字 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Path Button" />
</LinearLayout>
<!-- 红色按钮和弹出收回按钮放到一起 -->
<RelativeLayout
android:id="@+id/composer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clipChildren="false"
android:clipToPadding="false" >
<loveworld.view.InOutRelativeLayout
android:id="@+id/buttons_wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:clipChildren="false"
android:clipToPadding="false" >
<!-- 拍照 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="213.0px"
android:layout_marginLeft="16.0px"
android:background="@drawable/composer_camera"
android:visibility="gone" />
<!-- 人物 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_people"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="203.0px"
android:layout_marginLeft="78.0px"
android:background="@drawable/composer_with"
android:visibility="gone" />
<!-- 位置 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="175.0px"
android:layout_marginLeft="134.0px"
android:background="@drawable/composer_place"
android:visibility="gone" />
<!-- 音乐 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="131.0px"
android:layout_marginLeft="178.0px"
android:background="@drawable/composer_music"
android:visibility="gone" />
<!-- 消息 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_thought"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="75.0px"
android:layout_marginLeft="206.0px"
android:background="@drawable/composer_thought"
android:visibility="gone" />
<!-- 睡眠 -->
<loveworld.view.InOutImageButton
android:id="@+id/button_sleep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="13.0px"
android:layout_marginLeft="216.0px"
android:background="@drawable/composer_sleep"
android:visibility="gone" />
</loveworld.view.InOutRelativeLayout>
<!-- 红色按钮 -->
<loveworld.view.InOutRelativeLayout
android:id="@+id/button_control_show_hide"
android:layout_width="90.0px"
android:layout_height="86.0px"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="@drawable/composer_button_center">
<!-- 十字按钮 -->
<ImageView
android:id="@+id/button_control_show_hide_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32.0px"
android:layout_marginTop="29.0px"
android:src="@drawable/composer_icn_plus"/>
</loveworld.view.InOutRelativeLayout>
</RelativeLayout>
</merge>如果图片未隐藏，来看下效果图
2. 编写点击红色按钮，弹出和收回动画
/**
* 弹出收回按钮移动轨迹动画集合
*/
public class PopupButtonAnimationSet extends AbstractInOutAnimationSet {
private static final int mXOffset = 16;
private static final int mYOffset = 243;
public PopupButtonAnimationSet(Direction directioin, long duration,
View subject) {
super(directioin, duration, new View[]{ subject});
}
@Override
protected void addInAnimation(View[] views) {
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) views[0].getLayoutParams();
// 计算每个弹出收回按钮的移动轨迹
float x = -layoutParams.leftMargin + mXOffset;
float y = layoutParams.bottomMargin + mYOffset;
// 移动位置动画
TranslateAnimation translateAnimation = new TranslateAnimation(x, 0.0f, y, 0.0f);
addAnimation(translateAnimation);
}
@Override
protected void addOutAnimation(View[] views) {
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) views[0].getLayoutParams();
float x = -layoutParams.leftMargin + mXOffset;
float y = layoutParams.bottomMargin + mYOffset;
TranslateAnimation animation = new TranslateAnimation(0.0F, x, 0.0F, y);
addAnimation(animation);
}
}
看下效果
三、编写红色按钮中白色十字选中效果
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 红色按钮
mControlButton = findViewById(R.id.button_control_show_hide);
mControlButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
toggleButton();
}
});
// 红色按钮中心，白色十字
mButtonControlIcon = findViewById(R.id.button_control_show_hide_icon);
mRotateInAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_story_add_button_in);
mRotateOutAniamtion = AnimationUtils.loadAnimation(this, R.anim.rotate_story_add_button_out);
}
/**
* 弹出收回开关
*/
private void toggleButton() {
if (mAreButtonsShowins) {
AnimationControlUtils.startAnimations(mButtonsWrapper, Direction.OUT);
// 红色按钮内白色十字旋转
mButtonControlIcon.startAnimation(mRotateOutAniamtion);
} else {
AnimationControlUtils.startAnimations(mButtonsWrapper, Direction.IN);
mButtonControlIcon.startAnimation(mRotateInAnimation);
}
mAreButtonsShowins = !mAreButtonsShowins;
}两个布局文件
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:duration="150"
android:fromDegrees="0.0"
android:toDegrees="-225.0"
android:pivotX="50.0%"
android:pivotY="50.0%"
android:fillAfter="true"
android:fillEnabled="true" /><?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:duration="150"
android:fromDegrees="-225.0"
android:toDegrees="0.0"
android:pivotX="50.0%"
android:pivotY="50.0%"
android:fillAfter="true"
android:fillEnabled="true" />四、编写点击黑色按钮效果
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 所有弹出收回按钮视图集合
mButtonsWrapper = (InOutRelativeLayout) findViewById(R.id.buttons_wrapper);
// 所有弹出收回按钮视图集合
mButtonsWrapper = (InOutRelativeLayout) findViewById(R.id.buttons_wrapper);
// 设置每个弹出收回按钮的点击事件，点击后放大并隐藏
for (int i = 0, count = mButtonsWrapper.getChildCount(); i < count; i++) {
if (mButtonsWrapper.getChildAt(i) instanceof InOutImageButton) {
View view = mButtonsWrapper.getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View subject) {
startButtonClickAnimations(subject);
}
});
}
}
}
/**
* 弹出收回按钮点击后动画
*
* @param view
*/
private void startButtonClickAnimations(View subject) {
mAreButtonsShowins = false;
// 红色按钮动画
AnimationSet shrinkAnimationSet = new NotClickAnimationSet(600);
shrinkAnimationSet.setInterpolator(new AnticipateInterpolator(2.0F));
shrinkAnimationSet.setAnimationListener(new CustomAnimationListener());
mControlButton.startAnimation(shrinkAnimationSet);
// 为每一个按钮都设置动画
for (int i = 0, count = mButtonsWrapper.getChildCount(); i < count; i++) {
if (mButtonsWrapper.getChildAt(i) instanceof InOutImageButton) {
View view = mButtonsWrapper.getChildAt(i);
if (view.getId() == subject.getId()) {
// 点击按钮放大并消失
view.startAnimation(new ClickAnimationSet(600));
} else {
// 未点击按钮缩小并消失
view.startAnimation(new NotClickAnimationSet(600));
}
}
}
}五、跳转回来，重新显示按钮
@Override
protected void onResume() {
super.onResume();
reshowButton();
}
/**
* 跳转回来重置
*/
private void reshowButton() {
// 尺寸，透明度渐变
ResetAnimationSet resetAnimationSet = new ResetAnimationSet(300);
resetAnimationSet.setInterpolator(new OvershootInterpolator(2.0F));
mControlButton.startAnimation(resetAnimationSet);
mButtonControlIcon.startAnimation(mRotateOutAniamtion);
}
三、点击下载源码
四、本篇文章是学习PathButton实现例子，学习的是大牛写的PathButton实现：https://mobility.googlecode.com/svn/trunk/jxtras/ExpandableMenuDemo
待参考资料：
原文地址：http://blog.csdn.net/love_world_/article/details/8714769
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
