Android 带有弹出收缩动画的扇形菜单实例

最近试着做了个android 带有弹出收缩动画的扇形菜单，留个笔记记录一下。

效果如下

public class mainactivity extends appcompatactivity implements view.onclicklistener {

  private imageview imgpublish;
  private textview textview1;
  private textview textview2;

  private boolean ismenuopen = false;

  private list<textview> textviews = new arraylist<>();


  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    imgpublish = (imageview) findviewbyid(r.id.img_publish);
    textview1 = (textview) findviewbyid(r.id.tv_1);
    textview2 = (textview) findviewbyid(r.id.tv_2);

    textviews.add(textview1);
    textviews.add(textview2);

    imgpublish.setonclicklistener(this);
  }

  @override
  public void onclick(view v) {
    switch (v.getid()) {
      case r.id.img_publish:

        if (!ismenuopen) {
          showopenanim(80);
          imgpublish.setimageresource(r.mipmap.publish_select);
        }else {
          showcloseanim(80);
          imgpublish.setimageresource(r.mipmap.fabu);
        }
        break;
    }

  }

  //打开扇形菜单的属性动画， dp为半径长度
  private void showopenanim(int dp) {
    textview1.setvisibility(view.visible);
    textview2.setvisibility(view.visible);


    //for循环来开始小图标的出现动画
    for (int i = 0; i < textviews.size(); i++) {
      animatorset set = new animatorset();
      //标题1与x轴负方向角度为20°，标题2为100°，转换为弧度
      double a = -math.cos(20 * math.pi / 180 * (i * 2 + 1));
      double b = -math.sin(20 * math.pi / 180 * (i * 2 + 1));
      double x = a * dip2px(dp);
      double y = b * dip2px(dp);

      set.playtogether(
          objectanimator.offloat(textviews.get(i), "translationx", (float) (x * 0.25), (float) x),
          objectanimator.offloat(textviews.get(i), "translationy", (float) (y * 0.25), (float) y)
          , objectanimator.offloat(textviews.get(i), "alpha", 0, 1).setduration(2000)
      );
      set.setinterpolator(new bounceinterpolator());
      set.setduration(500).setstartdelay(100);
      set.start();

      set.addlistener(new animator.animatorlistener() {
        @override
        public void onanimationstart(animator animation) {

        }

        @override
        public void onanimationend(animator animation) {

          //菜单状态置打开
          ismenuopen = true;
        }

        @override
        public void onanimationcancel(animator animation) {

        }

        @override
        public void onanimationrepeat(animator animation) {

        }
      });
    }

    //转动加号大图标本身45°
    objectanimator rotate = objectanimator.offloat(imgpublish, "rotation", 0, 90).setduration(300);
    rotate.setinterpolator(new bounceinterpolator());
    rotate.start();

  }

  //关闭扇形菜单的属性动画，参数与打开时相反
  private void showcloseanim(int dp) {


    //for循环来开始小图标的出现动画
    for (int i = 0; i < textviews.size(); i++) {
      animatorset set = new animatorset();
      double a = -math.cos(20 * math.pi / 180 * (i * 2 + 1));
      double b = -math.sin(20 * math.pi / 180 * (i * 2 + 1));
      double x = a * dip2px(dp);
      double y = b * dip2px(dp);

      set.playtogether(
          objectanimator.offloat(textviews.get(i), "translationx", (float) x, (float) (x * 0.25)),
          objectanimator.offloat(textviews.get(i), "translationy", (float) y, (float) (y * 0.25)),
          objectanimator.offloat(textviews.get(i), "alpha", 1, 0).setduration(2000)
      );
//      set.setinterpolator(new accelerateinterpolator());
      set.setduration(500);
      set.start();

      set.addlistener(new animator.animatorlistener() {
        @override
        public void onanimationstart(animator animation) {

        }

        @override
        public void onanimationend(animator animation) {

          textview1.setvisibility(view.gone);
          textview2.setvisibility(view.gone);

          //菜单状态置关闭
          ismenuopen = false;
        }

        @override
        public void onanimationcancel(animator animation) {

        }

        @override
        public void onanimationrepeat(animator animation) {

        }
      });
    }


    //转动加号大图标本身45°
    objectanimator rotate = objectanimator.offloat(imgpublish, "rotation", 0, 90).setduration(300);
    rotate.setinterpolator(new bounceinterpolator());
    rotate.start();


  }

  private int dip2px(int value) {
    float density = getresources()
        .getdisplaymetrics().density;
    return (int) (density * value + 0.5f);
  }

}

布局文件

<?xml version="1.0" encoding="utf-8"?>
  <framelayout 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"
    tools:context="com.example.lina.animationapplication.mainactivity">


  <textview
    android:id="@+id/tv_1"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="bottom|end"
    android:layout_marginbottom="40dp"
    android:layout_marginright="40dp"
    android:gravity="center"
    android:text="标题1"
    android:textcolor="#ffffff"
    android:visibility="gone"
    android:background="@drawable/circle_purple"
    />

  <textview
    android:id="@+id/tv_2"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="bottom|end"
    android:layout_marginbottom="40dp"
    android:layout_marginright="40dp"
    android:gravity="center"
    android:text="标题2"
    android:textcolor="#ffffff"
    android:visibility="gone"
    android:background="@drawable/circle_orange"/>


  <imageview
      android:id="@+id/img_publish"
      android:layout_width="60dp"
      android:layout_height="60dp"
      android:layout_gravity="bottom|end"
      android:layout_marginbottom="35dp"
      android:layout_marginright="35dp"
      android:src="@mipmap/fabu"
      />

  </framelayout>

circle_purple.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">

  <solid android:color="#5d2a89" />

</shape>

参考

android开罐头———快速打造扇形卫星菜单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。