美文网首页Android开发Android开发
Android-仿闲鱼底部发布按钮动画

Android-仿闲鱼底部发布按钮动画

作者: 落花有意而流水无情 | 来源:发表于2019-04-03 09:53 被阅读20次

功能实现比较简单,弹出的菜单具有可点击性,故使用android3.0之后推出的属性动画来实现。(传统补间动画没有改变View的属性,只是改变视觉效果。而属性动画则直接改变view的属性值,不仅仅是视觉效果,实现了和用户的交互性功能)

效果图:
QQ20190403-094605-HD.gif

下边直接是代码:

布局文件.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".PostActivity">



        <ImageView
            android:id="@+id/iv_men1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:onClick="menu1Click"
            android:layout_marginBottom="50dp"
            tools:ignore="OnClick" />

        <ImageView
            android:id="@+id/iv_men2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:onClick="menu2Click"
            android:layout_marginBottom="50dp"
            tools:ignore="OnClick" />

        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="50dp"
            android:onClick="startAnim"/>


</RelativeLayout>
java代码
public class PostActivity extends AppCompatActivity {

    private ImageView iv_menu1;
    private ImageView iv_menu2;
    private ImageView iv_add;
    //启始坐标 x,y
    private float startX;
    private float startY;

    private boolean flag = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_post);

        iv_add = findViewById(R.id.iv_add);
        iv_menu1 = findViewById(R.id.iv_men1);
        iv_menu2 = findViewById(R.id.iv_men2);


    }


    public void startAnim(View view) {
        startX = iv_add.getTranslationX();
        startY = iv_add.getTranslationY();

        //x轴偏移量
        float endX_menu1 = getScreenWidth() / 4;
        //Y轴坐标 向上偏移量300px  可自己根据dp转换成px
        float endY_menu1 = startY - 300;

        Log.d("Tag", "startX=" + startX + " startY =" + startY);
        Log.d("Tag", "endX_menu1=" + endX_menu1 + " endY_menu1=" + endY_menu1);

        if (flag) {
            //点击按钮的旋转动画
            ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", 0, 270);
            rotation.setDuration(500);
            rotation.start();

            //分别设置x轴Y轴的偏移量
            ObjectAnimator menu1_animatorX = ObjectAnimator.ofFloat(iv_menu1, "translationX", startX, endX_menu1);
            ObjectAnimator menu1_animatorY = ObjectAnimator.ofFloat(iv_menu1, "translationY", startY, endY_menu1);
            //缩放动画
            ObjectAnimator menu1_animator_scaleX = ObjectAnimator.ofFloat(iv_menu1, "scaleX", 0f, 1f);
            ObjectAnimator menu1_animator_scaleY = ObjectAnimator.ofFloat(iv_menu1, "scaleY", 0f, 1f);

            AnimatorSet menu1Set = new AnimatorSet();
            menu1Set.setDuration(500);
          //OvershootInterpolator插值器实现动画抖动效果
            menu1Set.setInterpolator(new OvershootInterpolator());
            menu1Set.playTogether(menu1_animatorX, menu1_animatorY, menu1_animator_scaleX, menu1_animator_scaleY);
            menu1Set.start();


            ObjectAnimator menu2_animatorX = ObjectAnimator.ofFloat(iv_menu2, "translationX", startX, -endX_menu1);
            ObjectAnimator menu2_animatorY = ObjectAnimator.ofFloat(iv_menu2, "translationY", startY, endY_menu1);
            ObjectAnimator menu2_animator_scaleX = ObjectAnimator.ofFloat(iv_menu2, "scaleX", 0f, 1f);
            ObjectAnimator menu2_animator_scaleY = ObjectAnimator.ofFloat(iv_menu2, "scaleY", 0f, 1f);
            AnimatorSet menu2Set = new AnimatorSet();
            menu2Set.setDuration(500);
            menu2Set.setInterpolator(new OvershootInterpolator());
            menu2Set.playTogether(menu2_animatorX, menu2_animatorY, menu2_animator_scaleX, menu2_animator_scaleY);
            menu2Set.start();


        } else {

            ObjectAnimator rotation = ObjectAnimator.ofFloat(view, "rotation", 270, 0);
            rotation.setDuration(500);
            rotation.start();

            ObjectAnimator menu1_animatorX = ObjectAnimator.ofFloat(iv_menu1, "translationX", endX_menu1, startX);
            ObjectAnimator menu1_animatorY = ObjectAnimator.ofFloat(iv_menu1, "translationY", endY_menu1, startY);

            ObjectAnimator menu1_animator_scaleX = ObjectAnimator.ofFloat(iv_menu1, "scaleX", 1f, 0f);
            ObjectAnimator menu1_animator_scaleY = ObjectAnimator.ofFloat(iv_menu1, "scaleY", 1f, 0f);

            AnimatorSet menu1Set = new AnimatorSet();
            menu1Set.setDuration(500);
            menu1Set.playTogether(menu1_animatorX, menu1_animatorY, menu1_animator_scaleX, menu1_animator_scaleY);
            menu1Set.start();


            ObjectAnimator menu2_animatorX = ObjectAnimator.ofFloat(iv_menu2, "translationX", -endX_menu1, startX);
            ObjectAnimator menu2_animatorY = ObjectAnimator.ofFloat(iv_menu2, "translationY", endY_menu1, startY);
            ObjectAnimator menu2_animator_scaleX = ObjectAnimator.ofFloat(iv_menu2, "scaleX", 1f, 0f);
            ObjectAnimator menu2_animator_scaleY = ObjectAnimator.ofFloat(iv_menu2, "scaleY", 1f, 0f);
            AnimatorSet menu2Set = new AnimatorSet();
            menu2Set.setDuration(500);
            menu2Set.playTogether(menu2_animatorX, menu2_animatorY, menu2_animator_scaleX, menu2_animator_scaleY);
            menu2Set.start();


        }

        flag = !flag;

    }


    public void menu1Click(View v) {
        Toast.makeText(getApplicationContext(), "menu1 click", Toast.LENGTH_SHORT).show();
    }

    public void menu2Click(View v) {
        Toast.makeText(getApplicationContext(), "menu2 click", Toast.LENGTH_SHORT).show();
    }


    private int getScreenWidth() {
        WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;         // 屏幕宽度(像素)
        return width;
    }


    private int getScreenHeight() {
        WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        int height = dm.heightPixels;
        return height;
    }


}

相关文章

网友评论

    本文标题:Android-仿闲鱼底部发布按钮动画

    本文链接:https://www.haomeiwen.com/subject/uuxabqtx.html