先上效果图:
1.自定义控件继承ImageView并实现点击事件
public class ItemAnimationView extends ImageView implements OnClickListener{
List<ImageView> imageViewList = new ArrayList<>();//控件集
boolean flag;//判断是否打开
public void setImageViewList(List<ImageView> imageViewList ){
this.imageViewList=imageViewList;
}
点击事件通过flag来执行打开和关闭动画:
@Override
public void onClick(View view) {
if (flag) {
closeAnim();
flag = false;
} else {
startAnim();
flag = true;
}
}
打开动画方法:
先给菜单按钮打开时设置半透明效果
1首先根据view的个数来计算
2根据item的个数计算间隔的角度
3为每个item设置属性动画:分为x轴偏移动画和y轴偏移动画
4然后添加到动画集set播放动画
private void startAnim() {
// 为菜单按钮设置半透明
ObjectAnimator objectAnimator0 = ObjectAnimator.
ofFloat(this,"alpha", 1F, 0.5F);
AnimatorSet set = new AnimatorSet();
set.setDuration(500);
List<Animator> animators=new ArrayList<>();
set.setInterpolator(new BounceInterpolator());
double per;//计算间隔的角度
if(imageViewList.size()>1){
per=180/(imageViewList.size()-1);
}else{
per=0;
}
animators.add(objectAnimator0);
for(int i=0;i<imageViewList.size();i++){//为每个item设置想轴和y轴的位移动画
animators.add(getXAnim(i*per,imageViewList.get(i)));
animators.add(getYAnim(i*per,imageViewList.get(i)));
}
set.playTogether(animators);
set.start();
}
接下来看看利用正余弦函数获取每个view的x和y偏移量:
半径固定,利用正余弦计算x和y偏移量
private ObjectAnimator getXAnim(double du, ImageView view) {
float offset;//偏移量
offset = (float) (-200F * Math.cos(Math.toRadians(du)));
ObjectAnimator objectAnimatorX = ObjectAnimator.
ofFloat(view, "translationX", offset);
return objectAnimatorX;
}
private ObjectAnimator getYAnim(double du, ImageView view) {
float offset;//偏移量
offset = (float) (-200F * Math.sin(Math.toRadians(du)));
ObjectAnimator objectAnimatorY = ObjectAnimator.
ofFloat(view, "translationY", offset);
return objectAnimatorY;
}
关闭动画:
关闭动画就比较简单了,位移到初始位置0,0就行了
private void closeAnim() {
ObjectAnimator objectAnimator0 = ObjectAnimator.
ofFloat(this,"alpha", 0.5F, 1F);
AnimatorSet set = new AnimatorSet();
set.setDuration(500);
List<Animator> animators=new ArrayList<>();
set.setInterpolator(new BounceInterpolator());
animators.add(objectAnimator0);
for(int i=0;i<imageViewList.size();i++){
ObjectAnimator objectAnimatorX = ObjectAnimator.
ofFloat(imageViewList.get(i), "translationX", 0);
ObjectAnimator objectAnimatorY = ObjectAnimator.
ofFloat(imageViewList.get(i), "translationY", 0);
animators.add(objectAnimatorX);
animators.add(objectAnimatorY);
}
set.playTogether(animators);
set.start();
}
接下来看布局文件:
<ImageView
android:layout_width="40dp"
android:id="@+id/iv_test1"
android:src="@mipmap/test1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:layout_height="40dp" />
<ImageView
android:layout_width="40dp"
android:id="@+id/iv_test2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:src="@mipmap/test2"
android:layout_height="40dp" />
<ImageView
android:layout_width="40dp"
android:id="@+id/iv_test3"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:src="@mipmap/test3"
android:layout_height="40dp" />
<ImageView
android:layout_width="40dp"
android:id="@+id/iv_test4"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="@mipmap/test4"
android:layout_marginBottom="25dp"
android:layout_height="40dp" />
<ImageView
android:layout_width="40dp"
android:id="@+id/iv_test5"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:src="@mipmap/test5"
android:layout_height="40dp" />
<com.cl.kira.utu.ItemAnimationView
android:layout_width="50dp"
android:id="@+id/iv_itemview"
android:src="@mipmap/add"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_height="50dp" />
iv_content = (ImageView) findViewById(R.id.iv_content);
iv_test1 = (ImageView) findViewById(R.id.iv_test1);
iv_test2 = (ImageView) findViewById(R.id.iv_test2);
iv_test3 = (ImageView) findViewById(R.id.iv_test3);
iv_test4 = (ImageView) findViewById(R.id.iv_test4);
iv_test5 = (ImageView) findViewById(R.id.iv_test5);
imageViewList.add(iv_test1);
imageViewList.add(iv_test2);
imageViewList.add(iv_test3);
imageViewList.add(iv_test4);
imageViewList.add(iv_test5);
ItemAnimationView itemAnimationView= (ItemAnimationView) findViewById(R.id.iv_itemview);
itemAnimationView.setOnClickListener(itemAnimationView);//调用自己写好的点击事件
itemAnimationView.setImageViewList(imageViewList);
//为菜单项设置点击事件
iv_test1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"itemview click!",Toast.LENGTH_SHORT).show();
}
});
以上就是全部代码,感兴趣的童靴还可以将菜单项封装到里面去。
需求源码的,可以在下面回帖。