Android使用属性动画property animation,实现分散式弹出菜单

来源:互联网 发布:淘宝上丰胸霜可信吗 编辑:程序博客网 时间:2024/05/18 08:57

Android提供了多种动画类型,有View Animation 、Drawable Animation 、Property Animation 。
View Animation只能支持简单的缩放、平移、旋转、透明度基本的动画,且有一定的局限性。比如动画结束后,如果View的位置改变,而他的事件监听还在移动前的位置,这不是我们想要的。
很多App都有很炫酷的动画效果,其实实现并不难,下面是一个点击分散式弹出菜单的小例子,先看效果图:
这里写图片描述

图片式电脑里随便搜的, 一共6张,对应6个ImageView,初始叠加正在一起,点击最外的ImageView,弹出另外5个,另外每个弹出的ImageView 都添加了时间监听,点击会弹出一个Toast,显示icon的序号
下面是代码实现

package com.example.animationdemo;import android.animation.ObjectAnimator;import android.animation.PropertyValuesHolder;import android.annotation.SuppressLint;import android.app.Activity;import android.graphics.Matrix;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;public class MainActivity extends Activity implements OnClickListener {    private ImageView mIvIcon1;    private ImageView mIvIcon2;    private ImageView mIvIcon3;    private ImageView mIvIcon4;    private ImageView mIvIcon5;    private ImageView mIvIcon6;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        initView();        setImageListener();    }    /**     * 初始化视图     */    private void initView() {        setContentView(R.layout.activity_main);        mIvIcon1 = (ImageView) findViewById(R.id.iv_icon1);        mIvIcon2 = (ImageView) findViewById(R.id.iv_icon2);        mIvIcon3 = (ImageView) findViewById(R.id.iv_icon3);        mIvIcon4 = (ImageView) findViewById(R.id.iv_icon4);        mIvIcon5 = (ImageView) findViewById(R.id.iv_icon5);        mIvIcon6 = (ImageView) findViewById(R.id.iv_icon6);         }    /**     * 添加时间监听     */    private void setImageListener() {        mIvIcon1.setOnClickListener(this);        mIvIcon2.setOnClickListener(this);        mIvIcon3.setOnClickListener(this);        mIvIcon4.setOnClickListener(this);        mIvIcon5.setOnClickListener(this);        mIvIcon6.setOnClickListener(this);    }    /**     * 集中处理监听事件     */    @Override    public void onClick(View v) {        switch (v.getId()) {        case R.id.iv_icon1:            Toast.makeText(this, "icon1", 0).show();            break;        case R.id.iv_icon2:            Toast.makeText(this, "icon2", 0).show();            break;        case R.id.iv_icon3:            Toast.makeText(this, "icon3", 0).show();            break;        case R.id.iv_icon4:            Toast.makeText(this, "icon4", 0).show();            break;        case R.id.iv_icon5:            Toast.makeText(this, "icon5", 0).show();            break;        case R.id.iv_icon6:            //点击最外层icon,展开icon动画            showIcon();            break;        default:            break;        }    }    /**     * 动画实现,因为除了沿X,Y轴的图标,另外3个都有角度,所有,要有三角函数计算     * 使图标位移距离相等,实现扇形效果     */    @SuppressLint("NewApi") private void showIcon() {        //设置动画时间        int duration = 500;        //动画距离,屏幕宽度的60%        float distance = getScreenWidth()*0.6f;        //相邻ImageView运动角度式22.5度        float angle1 = (float)(22.5f*Math.PI/180);        float angle2 = (float)(45f*Math.PI/180);        float angle3 = (float)(67.5f*Math.PI/180);        //icon1        PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("TranslationX", 0f, distance);        //icon2        PropertyValuesHolder p21 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float)(distance*Math.cos(angle1)));        PropertyValuesHolder p22 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float)(distance*Math.sin(angle1)));        //icon3        PropertyValuesHolder p31 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float)(distance*Math.cos(angle2)));        PropertyValuesHolder p32 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float)(distance*Math.sin(angle2)));        //icon4        PropertyValuesHolder p41 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float)(distance*Math.cos(angle3)));        PropertyValuesHolder p42 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float)(distance*Math.sin(angle3)));        //icon5        PropertyValuesHolder p5 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -distance);        ObjectAnimator animator1 = ObjectAnimator.ofPropertyValuesHolder(mIvIcon1, p1).setDuration(duration);        ObjectAnimator animator2 = ObjectAnimator.ofPropertyValuesHolder(mIvIcon2, p21, p22).setDuration(duration);        ObjectAnimator animator3 = ObjectAnimator.ofPropertyValuesHolder(mIvIcon3, p31,p32).setDuration(duration);        ObjectAnimator animator4 = ObjectAnimator.ofPropertyValuesHolder(mIvIcon4, p41,p42).setDuration(duration);        ObjectAnimator animator5 = ObjectAnimator.ofPropertyValuesHolder(mIvIcon5, p5).setDuration(duration);        //添加自由落体效果插值器        animator1.setInterpolator(new BounceInterpolator());        animator2.setInterpolator(new BounceInterpolator());        animator3.setInterpolator(new BounceInterpolator());        animator4.setInterpolator(new BounceInterpolator());        animator5.setInterpolator(new BounceInterpolator());        //启动动画        animator1.start();        animator2.start();        animator3.start();        animator4.start();        animator5.start();          }    /**     * 竖屏时获取屏幕宽度,横屏时,获取高度     * @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;    }}

源码下载
http://download.csdn.net/detail/laxian2009/9134973

0 1
原创粉丝点击