美文网首页基础小问题UI-今晚吃啥子? -罗非鱼。
1. Android 100行代码搞定抖音加载动画

1. Android 100行代码搞定抖音加载动画

作者: 鹏城十八少 | 来源:发表于2021-05-27 17:50 被阅读0次

请问:简书怎么可以把代码格式调整?我贴出来换格式了。你们直接去Github下载工程!

分析动画

首先分析动画,初始状态是由两个相切的圆形图案组成。 将动画拆解为两部分看。

假象:表面看是旋转,其实是移动导致视觉差

 1.中间,先往左边,然后往右边到中心点。然后切换颜色

     中间,先往右边,然后往左边到中心点,切换颜色

2.同第一步相同,只是两小球变换位置。

具体实现

1.绘制蓝色小球,绘制红色小球。防止在中心的位置

2.蓝色小球位移和缩放动画

3.相交的部分变黑:

```

注意地方

1.小圆的绘制

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

    float cx = getWidth()/2;//对于控件来说

    float cy = getHeight()/2;

    canvas.drawCircle(cx, cy, 30, paint);

}

2.位置的放置

RelativeLayout.LayoutParams layoutParams =new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

layoutParams.addRule(CENTER_IN_PARENT);//设置位置居中

circleViewRedLeft =new CircleView(getContext());

circleViewBlueRight =new CircleView(getContext());

addView(circleViewRedLeft, layoutParams);

addView(circleViewBlueRight, layoutParams);

3.移动动画

ObjectAnimator animatorleft = ObjectAnimator.ofFloat(circleViewRedLeft, "translationX", 0, -translationX);//left move

ObjectAnimator animatorRight = ObjectAnimator.ofFloat(circleViewBlueRight, "translationX", 0, translationX);

4.ValueAnimator和ObjectAnimator 区别:

ObjectAnimator :可以设置是旋转,移动,和arg

ValueAnimator不能设置这,只能设置值!主要应用:通过监听得到value。然后进行绘制

```

具体代码:

```

具体代码:

public class DouYinLayoutextends RelativeLayout {

public DouYinLayout(Context context) {

this(context, null);

    }

public DouYinLayout(Context context, AttributeSet attrs) {

this(context, attrs, 0);

        init();

    }

public DouYinLayout(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

    }

private CircleViewcircleViewRedLeft, circleViewBlueRight;

    private float translationX =30;

    /**

    * 把2个点添加进去

    */

    private void init() {

RelativeLayout.LayoutParams layoutParams =new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        layoutParams.addRule(CENTER_IN_PARENT);//设置位置居中

        circleViewRedLeft =new CircleView(getContext());

        circleViewBlueRight =new CircleView(getContext());

        addView(circleViewRedLeft, layoutParams);

        addView(circleViewBlueRight, layoutParams);

        circleViewRedLeft.changeCorlor(Color.RED);

        circleViewBlueRight.changeCorlor(Color.BLUE);

        oneAnimation();

    }

private void oneAnimation() {

//动起来:中间的先向左移动。然后向右移动。然后不停的循环

        ObjectAnimator animatorleft = ObjectAnimator.ofFloat(circleViewRedLeft, "translationX", 0, -translationX);//left move

        ObjectAnimator animatorRight = ObjectAnimator.ofFloat(circleViewBlueRight, "translationX", 0, translationX);

        AnimatorSet animatorSet =new AnimatorSet();

        animatorSet.playTogether(animatorleft, animatorRight);

        animatorSet.setDuration(300);//

        animatorSet.start();

        animatorSet.addListener(new AnimatorListenerAdapter() {

@Override

            public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

                circleViewRedLeft.changeCorlor(Color.BLUE);

                circleViewBlueRight.changeCorlor(Color.RED);

                twoAnimation();

            }

});

    }

private void twoAnimation() {

ObjectAnimator animatorleft = ObjectAnimator.ofFloat(circleViewRedLeft, "translationX", -translationX, 0);//left move

        ObjectAnimator animatorRight = ObjectAnimator.ofFloat(circleViewBlueRight, "translationX", translationX, 0);

        AnimatorSet animatorSet =new AnimatorSet();

        animatorSet.playTogether(animatorleft, animatorRight);

        animatorSet.setDuration(300);//

        animatorSet.start();

        animatorSet.addListener(new AnimatorListenerAdapter() {

@Override

            public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

                circleViewRedLeft.changeCorlor(Color.RED);

                circleViewBlueRight.changeCorlor(Color.BLUE);

                oneAnimation();

            }

});

    }

}

```

动画的两种实现:setX跟setTranslationX区别

Canvas.save()跟Canvas.restore()的调用时机

区别Animation和Animator的用法,概述其原理

动画优化总结

1.在setVivible的时候,去移除一些view和图片

2.在ondestory的时候,取消动画等

3.动画的类,不要循环创建变量。因为动画是循环的!!

4.过渡绘制,最主要的就是背景多重复制了

demo地址:https://github.com/pengcaihua123456/shennandadao

相关文章

网友评论

    本文标题:1. Android 100行代码搞定抖音加载动画

    本文链接:https://www.haomeiwen.com/subject/paumjltx.html