Android 属性动画,沿着一定角度弹出菜单

在前面的博客中已经简单的介绍了属性动画的一些特性。本文是对《Android 属性动画特效》http://blog.csdn.net/antimage08/article/details/50903894 的延续。在该基础上增加对一定角度上,菜单的弹射。效果如下:


该效果是沿着一定角度进行弹射的,那么我们可以把该效果分解成沿着 X 轴和 Y 轴两个方向上的效果来做。其中的可变参数为距离的正弦余弦函数。具体代码如下:

布局文件:

act_pro.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_three"
        android:src="@drawable/ic_launcher"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/img_two"
        android:src="@drawable/ic_launcher"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/img_one"
        android:src="@drawable/ic_launcher"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


</RelativeLayout>


Test.java :

package com.example.scrollevent;


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

import java.util.ArrayList;
import java.util.List;

public class Test extends Activity implements OnClickListener{

    private int[] mRes = {R.id.img_one, R.id.img_two, R.id.img_three};
    private List<ImageView> mImageViews = new ArrayList<>();
    private boolean mFlag = true;

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

        int sum = mRes.length;
        for (int i = 0; i < sum; i++) {
            ImageView imageView = (ImageView) findViewById(mRes[i]);
            imageView.setOnClickListener(this);
            mImageViews.add(imageView);
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_one:
                if (mFlag) {
                    startAnim();
                } else {
                    closeAnim();
                }
                break;
            case R.id.img_two:
                Toast.makeText(Test.this, "相机", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img_three:
                Toast.makeText(Test.this, "音乐", Toast.LENGTH_SHORT).show();
                break;
        }
    }

    private void closeAnim() {
        //动画距离,屏幕宽度的50%
        float distance = getScreenWidth()*0.5f;
        //相邻ImageView运动角度式45度
        float angle1 = (float)(45f*Math.PI/180);
        float angle2 = (float)(135f*Math.PI/180);
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(mImageViews.get(0),
                "alpha", 0.5F, 1F);

        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageViews.get(1),
                "TranslationX", (float)(distance*Math.cos(angle1)), 0);
        ObjectAnimator animator11 = ObjectAnimator.ofFloat(mImageViews.get(1),
                "TranslationY", -(float)(distance*Math.sin(angle1)), 0);

        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageViews.get(2),
                "translationX", (float)(distance*Math.cos(angle2)), 0);
        ObjectAnimator animator22 = ObjectAnimator.ofFloat(mImageViews.get(2),
                "translationY", -(float)(distance*Math.sin(angle2)), 0);

        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(animator0, animator1, animator11, animator22, animator2);
        set.start();
        mFlag = true;
    }

    private void startAnim() {
        //动画距离,屏幕宽度的50%
        float distance = getScreenWidth()*0.5f;
        //相邻ImageView运动角度式45度
        float angle1 = (float)(45f*Math.PI/180);
        float angle2 = (float)(135f*Math.PI/180);
        ObjectAnimator animator0 = ObjectAnimator.ofFloat(
                mImageViews.get(0),
                "alpha",
                1F,
                0.5F);

        ObjectAnimator animator1 = ObjectAnimator.ofFloat(
                mImageViews.get(1),
                "TranslationX",
                (float)(distance*Math.cos(angle1)));
        ObjectAnimator animator11 = ObjectAnimator.ofFloat(
                mImageViews.get(1),
                "translationY",
                -(float)(distance*Math.sin(angle1)));

        ObjectAnimator animator2 = ObjectAnimator.ofFloat(
                mImageViews.get(2),
                "translationX",
                (float)(distance*Math.cos(angle2)));
        ObjectAnimator animator22 = ObjectAnimator.ofFloat(
                mImageViews.get(2),
                "translationY",
                -(float)(distance*Math.sin(angle2)));

        AnimatorSet set = new AnimatorSet();
        set.setDuration(500);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(
                animator0,
                animator1,
                animator11,
                animator22,
                animator2);
        set.start();
        mFlag = false;
    }

    /**
     * 竖屏时获取屏幕宽度,横屏时,获取高度
     * @return
     */
    public int getScreenWidth(){
        DisplayMetrics outMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        int x = outMetrics.widthPixels;
        int y = outMetrics.heightPixels;
        return x>y?y:x;
    }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值