[置顶] 仿蚂蚁森林能量球效果遇到的问题记录

标签: 动画 蚂蚁森林 属性动画
8人阅读 评论(0) 收藏 举报
分类:

仿蚂蚁森林能量球效果遇到的问题记录

前提内容

仿做一个蚂蚁森林的能量球效果,计划使用属性动画,来实现能量球上下摆动,然后点击能量球有一个收集的动画。

本来以为就这么几个简单的需求不会太难,做完后发现问题:

问题:

页面动画太多会卡顿,出现动画不流畅的问题,并且内存占用率很高。

在使用动画的时候要特别注意动画的回收工作,否则内存会出现占用过高的问题。

给每个view设置动画显然不是很好,数量少可能不明显,如果数量很多就会卡的不动了了。

思路:

将所有的能量球添加统一的一个动画,然后每个能量球的移动距离和速度不同,通过消息去更新所有的能量球位置。

过程:

1.初始化指定数量的能量球(view),并设置一些需要的属性。

private void drawMyCircle() {
        for (int i = 0; i < waterList.size(); i++) {
            View view = mInflater.inflate(R.layout.item_grid_view, this, false);
            TextView textView = view.findViewById(R.id.tv_grid);
            textView.setText(waterList.get(i).value + "g");
            textView.setTag(R.string.value, waterList.get(i));
            textView.setTag(R.string.speed, speList[mRandom.nextInt(speList.length)]);
            textView.setTag(R.string.isUP, mRandom.nextBoolean());
            //设置view位置
            setViewLocation(textView);
            //将初始化好的view添加到容器
            addView(textView);
            //设置点击事件
            textView.setOnClickListener(this);
            waterViewList.add(textView);
        }
        //开始移动容器中所有的能量球了
        mHandler.sendEmptyMessage(1);

    }

这里需要的属性有几种,1.能量球的显示样式,包括大小、颜色、透明度 2.能量球具体在容器中的位置,这也是一个比较重要的点,这里我只是通过随机数来处理的,可以通过算法来尽量保证球的不重合。3.能量球的点击事件。4.保存所有的能量球view

2.能量球放到容器view中,并开始播放动画。

private void setViewOffset() {
        for (int i = 0; i < waterViewList.size(); i++) {
            TextView textView = waterViewList.get(i);
            float y = textView.getY();
            //偏移方向
            Boolean isUP = (Boolean) textView.getTag(R.string.isUP);
            //速度
            float speed = (float) textView.getTag(R.string.speed);
            //原始坐标
            float originalY = (float) textView.getTag(R.string.originalY);
            //移动的坐标
            float translationY;
            if (isUP) {
                translationY = y - speed;
            } else {
                translationY = y + speed;
            }

            if (translationY - originalY > VIEW_OFFSET) {
                translationY = originalY + VIEW_OFFSET;
                textView.setTag(R.string.isUP, true);
            } else if (translationY - originalY < -VIEW_OFFSET) {
                translationY = originalY - VIEW_OFFSET;
                textView.setTag(R.string.isUP, false);
                setSpe(textView);
            }

            textView.setY(translationY);

        }

    }

播放动画需要注意的问题:

首先我们不能使用动画来做,虽然动画写起来比较简单,因为在页面上同时播放过多的动画会导致页面卡顿,内存暴涨(我用动画的方式写了,大约10个球就有点卡了)。

这里选择的是循环去改变每个view的球的y轴上的位置来模拟动画,并且通过handler来循环改变球的位置,消息发送的间隔控制在20毫秒内。测试放过200个球,动画比较平滑。

3.点击能量球后要移除并伴随一个动画。

/**
     * 移除动画
     *
     * @param view
     */
    private void removeViewAnimation(final View view) {
        //清除抖动动画
        view.clearAnimation();
        Interpolator Interpolator = new LinearInterpolator();

        ObjectAnimator transYAnim = ObjectAnimator.ofFloat(view, "translationY", viewHeight - textWidth);
        ObjectAnimator transXAnim = ObjectAnimator.ofFloat(view, "translationX", textWidth);
        ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(view, "scaleX", 1.0f, 0.0f);
        ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(view, "scaleY", 1.0f, 0.0f);
        ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 0.0f);

        AnimatorSet set = new AnimatorSet();
        set.setInterpolator(Interpolator);
        set.playTogether(transYAnim, transXAnim, scaleXAnim, scaleYAnim, alphaAnim);
        //不同距离可以设置不同的时间,需要通过移动的距离来计算时间,不过我
        //        int maxLine = viewHeight * viewHeight + viewWidth * viewWidth;
//        int towPointDistance = getTowPointDistance(new Point((int)view.getX(), (int)view.getY()),new Point(0,viewHeight));
//        int time = (int) (Math.sqrt(maxLine) / towPointDistance * 1000);
//        set.setDuration(1000);
        set.setDuration(1000);
        set.start();

        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.clearAnimation();
                removeView(view);
            }
        });


    }

这里就是简单的使用的属性动画,动画很少写,就算是熟悉了一下。

finish

简单做个记录,不断学习,欢迎指教。

源码点这里,没分的可以留言邮箱

查看评论

iOS蚂蚁森林的loading效果

最近有在玩收能量,于是就发现了一个很好玩的东西,就是在抢能量的时候,就是在网络比较差的时候,就会出现有个loading的界面,一直在那里,首先是看到那个loading页面,很烦人,所以就突发奇想,直接...
  • Asong_ge
  • Asong_ge
  • 2017-02-23 21:44:32
  • 1787

仿支付宝蚂蚁森林水滴浮动效果

可以有多个水滴,可以控制位置,水滴上下浮动。点击水滴产生搜集动画,水滴向树移动并逐渐消失,如图:那么是如何实现的呢,下面我们一步步来分析:1、定义一个继承Relativelayout 的子类作为容器放...
  • yangyong915
  • yangyong915
  • 2018-01-09 16:05:08
  • 2025

蚂蚁森林能量球效果

  • 2018年04月16日 15:19
  • 38.17MB
  • 下载

Python&Auto.js:实现蚂蚁森林自动收能量(懒人的高效生活)

我是真的懒,连能量都不想好好收,因此写了脚本来自动帮我收能量.Auto.js 这款脚本应用我们在应用市场可以很方便搜索到,它在没有root的时候可以通过开启无障碍服务来实现模拟点击滑动,监听等等.使用...
  • oliverchu
  • oliverchu
  • 2018-03-15 20:49:40
  • 2271

老司机带你顺手撸一个支付宝蚂蚁森林效果

老司机,不存在的,其实我还算不上,哈哈。。。 最近公司产品突然有一个类似支付宝蚂蚁森林的功能,大致功能跟支付宝蚂蚁森林相像,在看了一下支付宝蚂蚁森林的效果之后,本来这种东西用RN实现是最好不...
  • qq_41077703
  • qq_41077703
  • 2018-01-22 13:39:07
  • 1390

iOS逆向-手把手教你写支付宝蚂蚁森林收集能量助手

iOS逆向-手把手教你写支付宝蚂蚁森林收集能量助手前言 发现iOS支付宝逆向的分析并不多,蚂蚁森林基于H5应用 套着UIWebView 基本也没这类JS和原生交互分析的帖子,就拿此练手吧 作技术分...
  • kissing_huo
  • kissing_huo
  • 2017-11-16 11:08:00
  • 2998

蚂蚁森林|科技,是这个时代最大的公益

作者:浅忆全文共 4778 字 6 图,阅读需要 10 分钟———— / BEGIN / ————你以为我要写一篇情感类文章?不,这是一篇关于产品的文章,但从产品设计的角度来说它确实考验了人性的一些东...
  • k7Jz78GeJJ
  • k7Jz78GeJJ
  • 2018-02-09 00:00:00
  • 294

Auto.js 脚本自动收取自己和好友的蚂蚁森林能量

用autoJS写的能量收取脚本软件.说一下达到的效果,把蚂蚁森林按钮要设置在常用应用中.先收取自己主页的能量,然后进入排行榜收集好友的能量.中途可以按下音量下键提前结束脚本运行.改改测测基本上现在运行...
  • Kimipoker
  • Kimipoker
  • 2018-04-07 21:24:01
  • 300

蚂蚁森林

我是「蚂蚁森林」产品经理,听说有2.3亿人想认识我? 2017/09/05 阅读 2.4万  评论 75 收藏 171 零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面...
  • BM_Uranus
  • BM_Uranus
  • 2017-09-09 10:01:47
  • 714

IOS 仿Path水滴刷新效果

  • 2014年01月10日 16:45
  • 78KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 679
    排名: 7万+
    最新评论