红橙Darren视频笔记 圆点loadingView 动画ANR

最新推荐文章于 2021-05-20 20:16:56 发布
最新推荐文章于 2021-05-20 20:16:56 发布
阅读量319 收藏
点赞数
分类专栏： 自定义view 文章标签： 安卓
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011109881/article/details/112393542
版权

效果
在这里插入图片描述

思路

思路比较简单 先自定义view 该view只是一个圆，可以设置绘制的颜色。再自定义一个ViewGroup，在里面放三个之前自定义好的view。初始化的部分就完成了。下面接着看动画部分，动画可以分为两部分，一部分是向外移动 一部分是向内移动，这里使用属性动画+AnimatorSet很容易实现，接着就是监听动画执行完毕，执行向内移动的动画，向内移动的动画结束执行向外移动的动画，循环执行。注意需要提供一个方法，在加载完毕的时候停止动画释放资源。

遇到的坑

１.crash问题

2021-01-09 15:43:03.653 21938-21938/com.example.circleloadingview E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.circleloadingview, PID: 21938
    java.lang.NullPointerException: Attempt to get length of null array
        at android.animation.ValueAnimator.initAnimation(ValueAnimator.java:555)
        at android.animation.ObjectAnimator.initAnimation(ObjectAnimator.java:894)
        at android.animation.ValueAnimator.startAnimation(ValueAnimator.java:1231)
        at android.animation.ValueAnimator.start(ValueAnimator.java:1041)
        at android.animation.ValueAnimator.start(ValueAnimator.java:1065)
        at android.animation.ObjectAnimator.start(ObjectAnimator.java:852)
        at android.animation.ValueAnimator.startWithoutPulsing(ValueAnimator.java:1058)
        at android.animation.AnimatorSet.handleAnimationEvents(AnimatorSet.java:1142)
        at android.animation.AnimatorSet.startAnimation(AnimatorSet.java:1227)
        at android.animation.AnimatorSet.start(AnimatorSet.java:729)
        at android.animation.AnimatorSet.start(AnimatorSet.java:684)
        at com.example.circleloadingview.CircleLoadingView.startInAnimate(CircleLoadingView.java:106)
        at com.example.circleloadingview.CircleLoadingView.lambda$nASjswge2JPrJsLIt_Asff7ch5s(Unknown Source:0)

原因出在创建ObjectAnimator的方式上
不应该这样创建

            ObjectAnimator translationRightIn = new ObjectAnimator();
            translationRightIn.ofFloat(mCircleRight, "translationX", mAnimateDistance, 0);

而应该这样创建

ObjectAnimator translationRightIn = ObjectAnimator.ofFloat(mCircleRight, "translationX", mAnimateDistance, 0);

其实Android studio一开始就有警告了
Static member ‘android.animation.ObjectAnimator.ofFloat(java.lang.Object, java.lang.String, float…)’ accessed via instance reference
只不过被我忽视了,自己坑自己…

２.复用AnimatorSet时遇到问题

    private void innerAnimation() {
        // 左边跑
        ObjectAnimator leftTranslationAnimator = ObjectAnimator.ofFloat(mLeftView,"translationX",-mTranslationDistance,0);
        // 右边跑
        ObjectAnimator rightTranslationAnimator = ObjectAnimator.ofFloat(mRightView,"translationX",mTranslationDistance,0);
        AnimatorSet set = new AnimatorSet();
        set.setInterpolator(new AccelerateInterpolator());
        set.setDuration(ANIMATION_TIME);
        set.playTogether(leftTranslationAnimator,rightTranslationAnimator);
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 往里外面跑
                // 切换颜色顺序  左边的给中间 中间的给右边  右边的给左边
                int leftColor = mLeftView.getColor();
                int rightColor = mRightView.getColor();
                int middleColor = mMiddleView.getColor();
                mMiddleView.exchangeColor(leftColor);
                mRightView.exchangeColor(middleColor);
                mLeftView.exchangeColor(rightColor);
                expendAnimation();
            }
        });
        set.start();
    }

这是视频里面的代码 我看到执行动画每次都会创建一个AnimatorSet，于是想将他抽成类变量，结果动画出现卡顿，之后竟然ANR了，后面发现虽然我把AnimatorSet抽成类变量，但是每次动画都会执行set.setInterpolator set.setDuration set.playTogether set.addListener很大可能是这里出错了，后面我加了判断，只有初始化的时候才执行就OK了

3.其他优化

利用AnimatorSet的reverse方法 可以只使用一个动画 另外一个动画反过来执行就可以,不过这样用起来逻辑可能比较混乱,有时候代码复用之后,逻辑会变得没有原来清晰,这时候,是否复用代码就见仁见智了.
这里我虽然发现可以使用AnimatorSet的reverse方法减少很多冗余代码,但是为了让逻辑清晰,我最终放弃了这种方案.

    @RequiresApi(api = Build.VERSION_CODES.O)
    private void startInAnimate() {
        Log.d(TAG, "startInAnimate: ");
        if (animatorSet4In == null) {
            animatorSet4In = new AnimatorSet();
            ObjectAnimator translationLeftIn = ObjectAnimator.ofFloat(mCircleLeft, "translationX", -mAnimateDistance, 0);
            ObjectAnimator translationRightIn = ObjectAnimator.ofFloat(mCircleRight, "translationX", mAnimateDistance, 0);
            animatorSet4In.setInterpolator(new AccelerateInterpolator(2f));
            animatorSet4In.playTogether(translationLeftIn, translationRightIn);
            animatorSet4In.setDuration(mAnimateDuration);
            animatorSet4In.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation, boolean isReverse) {
                    i++;
                    if (i % 2 != 0) {
                        exchangeColor();
                        animatorSet4In.reverse();
                        Log.d(TAG, "startInAnimate reverse: "+i);
                    } else {
                        Log.d(TAG, "startInAnimate start: "+i);
                        animatorSet4In.start();
                    }

                }
            });
        }
        Log.d(TAG, "startInAnimate first: "+i);
        animatorSet4In.start();
    }

最终代码

自定义View

class SingleCircle extends View {
    private Paint mPaint;
    private int mRadius;
    private int mColor;

    public SingleCircle(Context context) {
        this(context, null);
    }

    public SingleCircle(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SingleCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //onMeasure onLayout onDraw的执行顺序 此时可以知道测量宽高
        mRadius = Math.min(getMeasuredHeight(), getMeasuredWidth()) / 2;
        canvas.drawCircle(getMeasuredWidth() >> 1, getMeasuredHeight() >> 1, Util.dip2px(mRadius, getContext()), mPaint);
    }

    public void changeColor(int color) {
        mPaint.setColor(color);
        mColor = color;
        invalidate();//交换颜色之后需要重新绘制 否则颜色没有实际变化
    }

    public int getColor() {
        return mColor;
    }

}

自定义ViewGroup

class CircleLoadingView extends RelativeLayout {
    private static final String TAG = "CircleLoadingView";
    private SingleCircle mCircleLeft, mCircleCenter, mCircleRight;
    private float mAnimateDistance;
    private int mAnimateDuration = 500;
    AnimatorSet mAnimatorSet4Out;
    AnimatorSet mAnimatorSet4In;


    public CircleLoadingView(Context context) {
        this(context, null);
    }

    public CircleLoadingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mAnimateDistance = Util.dip2px(80, context);
        inflate(context, R.layout.layout_circle_loading_view, this);
        mCircleLeft = findViewById(R.id.circle_left);
        mCircleCenter = findViewById(R.id.circle_center);
        mCircleRight = findViewById(R.id.circle_right);
        mCircleLeft.changeColor(Color.RED);
        mCircleCenter.changeColor(Color.GREEN);
        mCircleRight.changeColor(Color.BLUE);
        post(this::startOutAnimate);
    }


    //往外跑
    private void startOutAnimate() {
        if (mAnimatorSet4Out == null) {
            ObjectAnimator translationLeftOut = ObjectAnimator.ofFloat(mCircleLeft, "translationX", 0, -mAnimateDistance);
            ObjectAnimator translationRightOut = ObjectAnimator.ofFloat(mCircleRight, "translationX", 0, mAnimateDistance);
            mAnimatorSet4Out = new AnimatorSet();
            mAnimatorSet4Out.setInterpolator(new DecelerateInterpolator(2f));//2f表示比原来的动画更明显 减速动画
            mAnimatorSet4Out.playTogether(translationLeftOut, translationRightOut);
            mAnimatorSet4Out.setDuration(mAnimateDuration);
            mAnimatorSet4Out.start();
            mAnimatorSet4Out.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation, boolean isReverse) {
                    startInAnimate();//往里跑
                }
            });
        }
        mAnimatorSet4Out.start();
    }

    //往里跑
    private void startInAnimate() {
        if (mAnimatorSet4In == null) {
            ObjectAnimator translationLeftIn = ObjectAnimator.ofFloat(mCircleLeft, "translationX", -mAnimateDistance, 0);
            ObjectAnimator translationRightIn = ObjectAnimator.ofFloat(mCircleRight, "translationX", mAnimateDistance, 0);
            mAnimatorSet4In = new AnimatorSet();
            mAnimatorSet4In.setInterpolator(new AccelerateInterpolator(2f));//2f表示比原来的动画更明显 加速动画
            mAnimatorSet4In.playTogether(translationLeftIn, translationRightIn);
            mAnimatorSet4In.setDuration(mAnimateDuration);
            mAnimatorSet4In.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation, boolean isReverse) {
                    exchangeColor();//交换颜色
                    startOutAnimate();//往外跑
                }
            });
        }
        mAnimatorSet4In.start();
    }

    //点集中到中间 交换颜色
    private void exchangeColor() {
        int leftColor = mCircleLeft.getColor();
        int centerColor = mCircleCenter.getColor();
        int rightColor = mCircleRight.getColor();
        mCircleCenter.changeColor(leftColor);
        mCircleRight.changeColor(centerColor);
        mCircleLeft.changeColor(rightColor);
    }

    //释放资源
    public void loadingComplete() {
        mAnimatorSet4Out.cancel();
        mAnimatorSet4In.cancel();
        removeAllViews();
    }
}

自定义ViewGroup的布局

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


    <com.example.circleloadingview.SingleCircle
        android:id="@+id/circle_left"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_centerInParent="true" />

    <com.example.circleloadingview.SingleCircle
        android:id="@+id/circle_right"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_centerInParent="true" />

    <com.example.circleloadingview.SingleCircle
        android:id="@+id/circle_center"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_centerInParent="true" />

</RelativeLayout>

Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CircleLoadingView circleLoadingView = findViewById(R.id.loadingView);
        circleLoadingView.postDelayed(circleLoadingView::loadingComplete, 1000 * 10);//10s后假装加载完毕
    }
}

Activity布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <com.example.circleloadingview.CircleLoadingView
        android:id="@+id/loadingView"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

后记

没有做这个自定义View的时候,我觉得这是个很简单的功能,预计最多两小时完成.视频里面也说个小时就可以收工.然而由于各种问题+优化+笔记,最后我还是花了一个下午才完成.即使是很小的东西,我也从中学到了不少东西,比如ObjectAnimator创建方式不对会导致crash,AnimatorSet的复用如果不正确会导致动画ANR,代码的复用与逻辑的清晰有时不能兼得.
所以再小的东西,也要认真对待呀.
收工!
代码:
https://github.com/caihuijian/learn_darren_android

洌冰
关注
专栏目录
essayJoke-1:红橙Darren仿写内涵段子
05-15
essayJoke 红橙Darren仿写内涵段子
CSS红橙黄蓝4色动态扩散圆点效果源码.html
07-19
您想网页上加入动态标注吗，这个CSS红橙黄蓝4个不同颜色的动态扩散圆点效果源码，一定是您要的，查看源码直接引用就好了。
红橙Darren视频笔记 点赞效果 动画练习
积跬步 至千里
01-13 206
效果 知识点 位移动画 随机数 估值器（TypeEvaluator ）使用 思路 1.在底部中心位置初始化图片 1.1用上透明度变化和scale变化的动画 2.计算二阶贝塞尔曲线 3.添加透明度变化动画，飘到顶部时颜色最淡 4.优化 4.1加一些随机的插值器 4.2动画结束时将添加的View删除 大部分代码 1 自定义Layout class LikesLayout extends RelativeLayout { private static final String TAG = "LikesL
红橙Darren视频笔记 自定义TextView 基线的理解 问题引申（viewgroup 不触发onDraw方法）
积跬步 至千里
12-06 400
1.自定义属性以备使用 新建attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <!-- name 自定义view的名字 --> <declare-styleable name="MyTextView"> <!-- name 属性名称 format 格式 --> <attr name="ChjText" format="str
红橙Darren视频笔记 自己捕获异常并保存到本地
积跬步 至千里
02-22 301
应用场景，我们经常遇到这样的情况，有些bug是偶现的，实际遇到的时候可能来不及获取log，那么我们可以自己写个异常捕获的类，将捕获的异常输出到文件，当然最好能上传到服务器，因为我们并不一定能拿到用户的机器。 这次我们先简单处理，将文件保存在本地。 大致思路 1.构建自己的异常捕获类 2.获取崩溃信息 手机版本号 apk版本信息 利用StringWriter StringBuilder等辅助类进行拼装 3.在内部存储创建文件 存储上面的那些信息（为避免应用产生的文件吃内存，在创建之前会判断当前是否存在cras
红橙Darren视频笔记 缓存方案 缓存到数据库（数据库操作） 上
积跬步 至千里
03-17 288
1.涉及知识 反射 工厂模式 单例 关于工厂模式：抽象工厂用于创建相对复杂的对象，适用于对象包含很多零件或生产大批对象的情景 关于泛型: 泛型方法 public class Test { public static <T> T init(String s, Class<T> clazz){ s = clazz.getSimpleName(); System.out.println("s "+s); return null; } class Person{
bootstrap响应式红橙渐变风格综合娱乐
07-13
在"bootstrap响应式红橙渐变风格综合娱乐"这个项目中，我们可以推测这是一个基于Bootstrap构建的娱乐类网站模板，它采用了红橙渐变的色彩方案，旨在提供一个吸引眼球且用户体验良好的界面。红橙色调通常能营造出活力...
CSS3红橙黄绿不同颜色按钮
11-04
当鼠标悬停在按钮上时，我们可以改变背景颜色或增加其他动画效果。这可以通过`:hover`伪类实现： ```css .button:hover { background-color: darken(currentColor, 10%); box-shadow: 0 4px 8px rgba(0, 0, 0, ...
红橙扁平化商务汇报PPT图表大全
07-16
5. **文件格式**：资源以`.PPTX`格式提供，这是Microsoft PowerPoint的最新文件格式，支持添加动画、交互元素以及更高的图像质量。用户可以使用PowerPoint 2007及以上版本打开并编辑这些图表，也可以与他人轻松共享...
红橙Darren视频笔记 旋转加载界面
积跬步 至千里
01-16 290
效果 知识点 三角函数 动画结合画笔使用 状态机模式 关于数学中的度再逼逼两句 我们数学里面的度一半是是弧度的意思。即在一个圆中，角度代表当前角度对应的弧长AB是圆半径r的几倍。 我们知道圆周计算公式C＝2πr，因此360°的弧长对应弧度2π，因此我们平常所说的30° 60° 90°对应弧度是π/6 π/3 π/2。视频里面讲到的时候我还一脸懵，以前的知识忘得差不多了。。。 关于状态机的使用 我在自定义View中有详细说明，如果不明白可以自己搜索一下，是个比较简单的设计模式 实现思路分析 黑色的十字交叉
红橙Darren视频笔记 builder设计模式+navigationBar导航条
积跬步 至千里
03-08 201
思路 套用之前的builder设计模式的思路 Product(NavigationBar)+Builder+Parameter 效果： mainActivity代码 @Override protected void initTitle() { new DefaultNavigationBar.Builder(this) .setTitle("投稿") .setRightIcon(R.mipmap.ic_laun
红橙Darren视频笔记 仿QQ步数计数view 画笔的使用
积跬步 至千里
12-06 240
步骤 1.自定义属性 2.在xml中使用 3.创建自定义view文件 写好构造函数 4.在上面的Java文件中访问自定义属性 5.实现onMeasure方法 6.画外圆弧 内圆弧 文字 7.添加一点动画 效果图 新建attrs文件夹 编写自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- step1 定义组定义属性 --> <declare-styleable name="QQ
红橙Darren视频笔记 仿QQ侧滑效果
积跬步 至千里
12-26 197
这一篇没有什么新的内容 就是改写 红橙Darren视频笔记 仿酷狗侧滑效果 的侧滑的效果 1.去掉淡入淡出效果 2.加上黑色模板效果 效果： 去掉淡入淡出效果很简单 就是注释掉onScrollChanged对应代码即可 而添加灰色蒙板效果的思路也很简单 就是在主体界面添加一个覆盖整体的View 给一个背景，在slidingMenu中获取到这个view 同样在onScrollChanged调整透明度 以下只给出变化的部分 <?xml version="1.0" encoding="utf-8"?>
红橙Darren视频笔记 仿酷狗侧滑效果
积跬步 至千里
12-26 308
效果 需求 1.思路利用ScrollView包裹两个布局+scroll实现侧滑效果 2.新建menu和主体的xml布局文件 自定义属性 并获取 4.在onFinishInflate修改布局宽度 思考onFinishInflate的调用时机 5.利用api smoothScrollTo关闭 打开菜单(默认状态关闭菜单) 6.利用onScrollChanged+setAlpha实现淡入淡出效果 7.利用onScrollChanged+setScaleX setScaleY实现右侧内容放大缩小的效果 8.利用o
红橙Darren视频引申 第一次写NDK项目（Android studio 4.1.1）
积跬步 至千里
05-20 251
1.第一次创建NDK项目 使用Android studio创建NDK的步骤如下： 打开Android Studio中的File->Settings->Android SDK 打开SDK Tools tab页 选择NDK和CMake下载 下载完毕之后 看看项目的NDK路径有没有识别 如果识别即可创建C++项目 下载完毕之后点击 invalidate Caches/Restart 重启Android Studio 创建完毕 后等待sync结束即可运行项目 可以从c++层获取到一个string 如
红橙Darren视频笔记 流式布局tagLayout measure layout方法学习 adapter使用 学习感悟
积跬步 至千里
12-19 287
效果： 自定义View public class TagLayout extends ViewGroup { private static final String TAG = "TagLayout"; List<List> childViewsInLines = new ArrayList<>(); List<View> oneLineViews = new ArrayList<>(); public TagLayout(
红橙Darren视频笔记 贝塞尔曲线实现消息拖拽粘性效果 画笔练习
积跬步 至千里
01-10 248
效果图 要实现这样的效果 我们要先知道那段弧线是如何绘制的,实际上那段弧线就是贝塞尔曲线 一. 什么是贝塞尔曲线 https://www.jianshu.com/p/8f82db9556d2 上面有个链接 里面的动图比较形象 二阶Bezier曲线公式： P0A/P1A=P1B/P2B=AC/BC 在维持以上比例的同时，A点从P0出发到达P1点 点C所经过的路径就是Bezier曲线 其中P1叫做控制点，控制点不同，绘制的路径也会大有不同 当控制点有0个时，点C的路径叫1阶Bezier曲线 当控制点有1个时
红橙Darren视频笔记 界面优化与屏幕适配（下）
积跬步 至千里
02-02 438
1.几个概念 1.1 屏幕尺寸 屏幕对角线的长度，单位是英寸，计算结果为根号下（屏幕宽度的平方+屏幕高度的平方） 注意屏幕宽度的平方和屏幕高度的平方的单位是英寸 1.2 px 像素，屏幕上最小绘制的点为一个像素 1.3 屏幕分辨率 也叫屏幕的物理尺寸 单位是px 比如一般的屏幕物理尺寸有768x1920，768x1280等等，这里的单位都是px，以768x1920为例，他的意思是该屏幕最多可以绘制768x1920个不重叠的点 我们可以使用以下命令获取手机的物理尺寸 adb shell wm size Phy
红橙Darren视频笔记 自定义View总集篇
积跬步 至千里
01-27 444
本节目的 了解 ActivityManagerService Activity ActivityManager Window WindowManager WindowManagerService Session ViewRootImpl等的关系 学完应该能够回答 1 Activity怎么创建的？ 2 布局怎么加载 3 View绘制流程 4 View的touch事件 5 WindowManger与window的关系 第一部分 activity如何创建 我们找到MainActivity的setContentV
红橙紫旗舰店年终总结：销售业绩与未来规划
"2简约商务年终总结PPT模板.pptx是一个用于年终总结报告的PPT模板，设计风格简约商务，适用于各类企业或个人进行年度工作回顾与展望。该模板包含多个章节，如年度工作概述、工作完成情况、成功项目展示、工作不足...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值