android自定义动画菜单

先上效果图:


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" />


Activity调用:

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

以上就是全部代码,感兴趣的童靴还可以将菜单项封装到里面去。

需求源码的,可以在下面回帖。





  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值