动画——Android弹出菜单动画

最近项目需要在底部按钮点击弹出菜单,再点击菜单隐藏,如下图:

图片随便搞的,根据需要替换
先上代码:XML文件
直接将图片叠在一起,点击图片在最上面:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.my.popmenudemo.MainActivity">

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/logo_sinaweibo" />

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/logo_wechat" />

    <ImageView
        android:id="@+id/iv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/logo_wechatmoments" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/logo_start2" />

</RelativeLayout>

动画:
插补器可根据自己需要进行替换

import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

/**
 * Created by wk on 2016/11/14.
 */

public class MainActivity extends Activity {
    @BindView(R.id.iv1)
    ImageView iv1;
    @BindView(R.id.iv2)
    ImageView iv2;
    @BindView(R.id.iv3)
    ImageView iv3;
    @BindView(R.id.iv)
    ImageView iv;

    /**
     * 动画时间
     */
    private static final int ANIM_DURATION = 500;
    /**
     * 菜单是否展示
     */
    private boolean IS_SHOW = false;
    private ObjectAnimator anim1;
    private ObjectAnimator anim2;
    private ObjectAnimator anim3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
    }

    @OnClick({R.id.iv1, R.id.iv2, R.id.iv3, R.id.iv})
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.iv1:
                Toast.makeText(this, "iv1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.iv2:
                Toast.makeText(this, "iv2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.iv3:
                Toast.makeText(this, "iv3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.iv:
                if (!IS_SHOW) {
                    showMenu();
                    IS_SHOW = true;
                } else {
                    hideMenu();
                    IS_SHOW = false;
                }

                break;
        }
    }
    /**
     * 隐藏菜单
     */
    private void hideMenu() {
        anim1.reverse();
        anim2.reverse();
        anim3.reverse();
    }

    /**
     * 竖屏时获取屏幕宽度
     *
     * @return
     */
    public int getScreenWidth() {
        DisplayMetrics outMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        int x = outMetrics.widthPixels;
        return x;
    }

    /**
     * 弹出菜单动画
     */
    private void showMenu() {

        //图标移动屏幕宽度的40%,每一个的距离可以不同
        float distance = getScreenWidth() * 0.4f;
        //相邻ImageView运动角度式45度,Math.PI记录的圆周率
        float degree1 = (float) (45f * Math.PI / 180);
        float degree2 = (float) (90f * Math.PI / 180);
        float degree3 = (float) (135f * Math.PI / 180);

        //创建偏移属性持有者对象
        PropertyValuesHolder pvh11 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree1)));
        PropertyValuesHolder pvh12 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree1)));
        PropertyValuesHolder pvh21 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree2)));
        PropertyValuesHolder pvh22 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree2)));
        PropertyValuesHolder pvh31 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree3)));
        PropertyValuesHolder pvh32 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree3)));
        //创建动画对象
        anim1 = ObjectAnimator.ofPropertyValuesHolder(iv1, pvh11, pvh12).setDuration(ANIM_DURATION);
        anim2 = ObjectAnimator.ofPropertyValuesHolder(iv2, pvh21, pvh22).setDuration(ANIM_DURATION);
        anim3 = ObjectAnimator.ofPropertyValuesHolder(iv3, pvh31, pvh32).setDuration(ANIM_DURATION);

        //添加反弹效果插值器
        //OvershootInterpolator 超出插补器
        //OvershootInterpolator 超出插补器
        //AnticipateInterpolator 向前插补器
        //DecelerateInterpolator 减速插补器
        //AccelerateDecelerateInterpolator 加速减速插补器
        anim1.setInterpolator(new BounceInterpolator());
        anim2.setInterpolator(new BounceInterpolator());
        anim3.setInterpolator(new BounceInterpolator());

        //启动动画
        anim1.start();
        anim2.start();
        anim3.start();
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值