android 炫酷的加载库SpinKit

最新推荐文章于 2025-06-26 01:41:07 发布

原创最新推荐文章于 2025-06-26 01:41:07 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android #spinkit #库

android 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用SpinKit库中的FadingCircle样式来实现类似iOS的加载效果。通过自定义RectLayoutContainer和FadingRect类，并调整动画参数，最终完成了一个矩形旋转的加载动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无意中看见一个炫酷的加载库：SpinKit （地址：http://ybq.github.io/Android-SpinKit/）

效果如下：

那么我想要一个类似IOS的加载呢？

看上面的效果FadingCircle跟IOS的效果相似，那么我们就基于FadingCircle改成IOS加载的效果

首先：在sprite目录下创建 RectLayoutContainer.java

public abstract class RectLayoutContainer extends SpriteContainer {

    @Override
    public void drawChild(Canvas canvas) {
        for (int i = 0; i < getChildCount(); i++) {
            Sprite sprite = getChildAt(i);
            int count = canvas.save();
            canvas.rotate(i * 360 / getChildCount(),
                    getBounds().centerX(),
                    getBounds().centerY());
            sprite.draw(canvas);
            canvas.restoreToCount(count);
        }
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        bounds = clipSquare(bounds);
        int radius = (int) (bounds.width() / getChildCount() / 2);
        int left = bounds.centerX() - radius;
        int right = bounds.centerX() + radius;
        for (int i = 0; i < getChildCount(); i++) {
            Sprite sprite = getChildAt(i);
            sprite.setDrawBounds(left, bounds.top, right, bounds.top + radius * 5);
        }
    }
}

在style目录下创建FadingRect.java ，注意，我们是要画一个矩形，所以继承的是RectSprite

public class FadingRect extends RectLayoutContainer {

    @Override
    public Sprite[] onCreateChild() {
        RectItem[] dots = new RectItem[12];
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new RectItem();
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
                dots[i].setAnimationDelay(1200 / 12 * i);
            } else {
                dots[i].setAnimationDelay(1200 / 12 * i + -1200);
            }
        }
        return dots;
    }

    private class RectItem extends RectSprite {

        RectItem() {
            setAlpha(0);
        }

        @Override
        public ValueAnimator onCreateAnimation() {
            float fractions[] = new float[]{0f, 0.39f, 0.4f, 1f};
            return new SpriteAnimatorBuilder(this).
                    alpha(fractions, 50, 50, 255, 50).
                    duration(1200).
                    easeInOut(fractions).build();
        }
    }
}