欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android动画(翻牌抽奖)实现方法

程序员文章站 2024-01-14 20:00:16
Android动画(翻牌抽奖) 由于公司产品的需求,需要写一个翻牌抽奖的功能,故而写了一个.走了不少弯路,用了三种方法,最终用了最为简单的一种,现将三种方法记录如下: 老规...

Android动画(翻牌抽奖)

由于公司产品的需求,需要写一个翻牌抽奖的功能,故而写了一个.走了不少弯路,用了三种方法,最终用了最为简单的一种,现将三种方法记录如下:

老规矩,先上效果图!

Android动画(翻牌抽奖)实现方法
下面分几个步骤来讲解,主要有布局文件/动画文件/调用方法/点击后的处理等!

布局及动画

xml布局:



    
    

        

        

        

            
        

        

    

    
    

    
    

    
    

    
    

    
    

    

        
        
        
        
        
    

    


主要布局就是GridView!其中的6个item就是用于翻拍的纸牌!注意最下面的ImageView,初始时设置他的visibility=”gone”,当点击到gridview的item时,再显示出来并进行反转,即为大图的反转效果!

动画xml:

动画效果展示,可以通过xml配置,也可以在代码中设置.另外再推荐一个第三方库文件,也可以进行翻转,并且更加酷炫,不过他的翻转效果只能展示一次,和我的需求不同,虽然功能很强大,但是对我的项目没啥帮助,不过以后有人有这种需求的话可以直接使用,貌似是一个德国人写的库,git的链接在这里Rotatable()!
我先将xml配置的方法写下:





    
    

    
    

    
    



    
    

    
    


主要就使用到了这三个动画!

代码
思路如下,首先是自定义adapter,设置好item的布局,在adapter中设定好点击事件,当用户点击时出现大图进行反转!talk is shit, show you code!
建议将adapter和点击事件单独取出为一个类文件!
Adapter文件如下
public class GridViewAdapter extends BaseAdapter {
        List cardsList = new ArrayList<>();

        public boolean refreshGridData(List list) {
            if (list != null && list.size() > 0) {
                cardsList.clear();
                cardsList.addAll(list);
                notifyDataSetChanged();
                return true;
            }
            return false;
        }

        @Override
        public int getCount() {
            return cardsList == null ? 0 : cardsList.size();
        }

        @Override
        public Object getItem(int position) {
            return cardsList == null ? null : cardsList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        GridViewAdapter.ViewHolder holder = null;
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // 1、如果没有可利用item时,找出所有控件
            if (convertView == null) {
                holder = new GridViewAdapter.ViewHolder();
                convertView = LayoutInflater.from(MainActivity.this)
                        .inflate(R.layout.doubledealer_gv_item, parent, false);
//                holder.textView = (TextView) convertView.findViewById(R.id.tv);
                holder.imageView = convertView.findViewById(R.id.imageView_Cards);

                holder.myLayout = convertView
                        .findViewById(R.id.myLayout);
                holder.drawView = convertView.findViewById(R.id.drawView);

                convertView.setTag(holder);
            } else {
                // 3、有可利用的item时就获取赋值使用
                holder = (GridViewAdapter.ViewHolder) convertView.getTag();
            }

            if (mFlag) {
                // 监听点击事件
                holder.myLayout.setClickable(true);
                holder.myLayout.setOnClickListener(new
                        MyClickListener(holder, cardsList, position));
            } else {
                // 监听点击事件
                holder.myLayout.setClickable(false);
                if (clickPosition != position) {
                    holder.drawView.start();
//                    holder.drawView.setCardBackground(Color.parseColor("#B0E2FF"));
//                    holder.drawView.setText(cardsList.get(position) + "");
//                    holder.imageView.setVisibility(View.VISIBLE);
//                    holder.drawView.setImage(BitmapFactory.decodeResource(
//                            getResources(), R.mipmap.cup
//                    ));
//                    imageView_Cards_Animation.setVisibility(View.VISIBLE);
                    setOvershotAnim();
                }
            }

            return convertView;
        }

        private class ViewHolder {
            ImageView imageView;
            LinearLayout myLayout;
            DrawView drawView;
        }
    }

点击事件的方法类也是类似,这个相信很简单了,不贴了,累死了……….

然后就是在Activity中进行调取,包括动画效果的调取和逻辑处理等:
/********************动画效果**************************/

    // 插值器设置    OvershootInterpolator
    private Animation overshotAnim;
    @SuppressLint("ResourceType")
    private void setOvershotAnim() {
        overshotAnim = AnimationUtils.loadAnimation(this, R.anim.scaleanim_overshot);
        imageView_Cards_Animation.startAnimation(overshotAnim);
        largeAnimStart();
    }

    @SuppressLint("ResourceType")
    private void largeAnimStart() {
        imageView_Cards_Animation.setVisibility(View.VISIBLE);
        // 放大
        Animation largeAnim;
        largeAnim = AnimationUtils.loadAnimation(this, R.animator.enlarge);
        imageView_Cards_Animation.startAnimation(largeAnim);
        imageAnimationStart();
    }

    // 旋转
    private Handler handler;
    private final int ANIM_DURATION = 3000;
    private void imageAnimationStart() {
        handler = new Handler();
        runAnimation(R.id.imageView_Cards_Animation, Rotatable.ROTATE_Y,
                360, 100);
    }

    /**
     *  动画进程
     *
     * @param resID         位置
     * @param direction     方向
     * @param degree        度数
     * @param delay         延时
     */
    private  void runAnimation(final int resID, final int direction,
                               final int degree, int delay) {
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Rotatable rotatable = new Rotatable.Builder(findViewById(resID))
                        .direction(Rotatable.ROTATE_BOTH)
                        .build();
                rotatable.rotate(direction, degree, ANIM_DURATION);
            }
        }, delay);

        // 开启弹窗
//        startDialog();
    }

此时我大图的旋转用的就是那个开源库,很舒服,可惜后面产品更换了需求,加了一个纸牌不停更换的功能,我就换了一种逻辑进行处理了.

    此时的话,核心代码都已经贴出来了,另外在代码中
    直接添加动画的代码是:
private final int ANIM_DURATION = 1000;
    private ObjectAnimator animator;
    private void imageAnimationStart() {
        imageView_Cards_Animation_Test.setImageBitmap(BitmapFactory.decodeResource(
                getResources(), R.mipmap.xg
        ));
        animator = ObjectAnimator.ofFloat(imageView_Cards_Animation_Test,
                View.ROTATION_Y, 0, 360).setDuration(ANIM_DURATION);
        animator.start();

至此的话,这个功能就能实现了,大家可以多多思考下,想直接要源码的话也可以,我把源码放在了我的github上了,clone的话可以,就是不要忘了给我加星星哦!