MetroLoading 加载动画

Posted 2022-11-15 BIGPiePieTree

Metro风格的条形谱线加载动画

           这个类似于Metro风格的动画在水平方向有很多的条形谱线上下缩放，并且有一定的规律 。先看一下效果吧 

然后就是怎么实现了，其实这个控件的实现很简单，就从动画的形式来说吧 第一、条形是呈水平排列的，第一想法肯定是继承ViewGroup然后拥有多个子View（我选择的是继承LinearLayout，这样的话就省去了onMeasure和onLayout啦 0.0） 第二、每一个单独的条形谱都在竖直方向上上下缩放，我想到的使用属性动画就可以很容易的实现了。
既然思路也有了 ， show the code
首先我们先定义一些这个控件的attrs属性吧

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="lodingView">
        <attr name="color" format="color" />
        <attr name="barWidth" format="dimension" />
        <attr name="barHeight" format="dimension" />
        <attr name="barCount" format="integer" />
        <attr name="duration" format="integer" />
        <attr name="peakCount" format="integer"/>
    </declare-styleable>
</resources>

解释一下每个属性对应的控件表现，color 是条的颜色（当然条形的颜色也可以是彩色的），barWidth是条的宽度，barHeight是条的高度，barCount是条的数目，duration是动画时间，peakCount是在条形上下缩放的时候产生的波峰。那定义一个这样的控件的时候就是这样的

    <org.createjoy.myview.LodingView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        test:barHeight="60dp"
        test:barWidth="6dp"
        test:barCount="20"
        test:peakCount="2"
        test:duration="1000"
        test:color="@color/colorPrimary">

    </org.createjoy.myview.LodingView>

然后呢然后呢，就是我们的View具体代码了 先是基本的那些变量和属性balabala

    private View[] views;
    private Context context;
    private float barWidth;   //条形宽度
    private float barHeight;   //条形高度
    private int barColor;   //条形背景色
    private int barCount;   //条形数目
    private int duration;   //动画时间
    private int peakCount;      //波峰个数

        this.context = context;

        //从xml中获取各个属性值

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.lodingView);
        barWidth = a.getDimension(R.styleable.lodingView_barWidth, 20);
        barHeight = a.getDimension(R.styleable.lodingView_barHeight, 20);
        barColor = a.getColor(R.styleable.lodingView_color, 0xFFFF11FF);
        barCount = a.getInt(R.styleable.lodingView_barCount, 4);
        duration = a.getInt(R.styleable.lodingView_duration, 800);
        peakCount = a.getInt(R.styleable.lodingView_peakCount, 2);
        a.recycle();
        init();

然后就是我们的主要的init()方法了，

    private void init() 
        views = new View[barCount];
        for (int i = 0; i < views.length; i++) 
            View view = new View(context);
            LayoutParams layoutParams = new LayoutParams((int) barWidth, (int) barHeight);
            layoutParams.setMargins(10, 0, 0, 0);
            layoutParams.gravity = Gravity.CENTER_VERTICAL;
            view.setLayoutParams(layoutParams);
            view.setBackgroundColor(barColor);
            int m = barCount / peakCount;

            int delaytime;
            int time = duration * 2 / m;

            if (i % m <= m / 2) 
                delaytime = (i % m) * time;
             else 
                delaytime = (m - i % m) * time;
            
            views[i] = view;
            ObjectAnimator customAnim = ObjectAnimator.ofFloat(view,"scaleY",1.0f,0.2f);
            customAnim.setStartDelay(delaytime);
            customAnim.setRepeatMode(ValueAnimator.REVERSE);
            customAnim.setRepeatCount(1000);
            customAnim.setDuration(duration);
            customAnim.start();
            addView(view);
        

    

代码还是比较少的，逻辑也很简单，首先根据barCount创建相应的view，我们可以看到上面的动态，每个条形的来回时间其实是一样的，要想达到波浪的效果，我们就需要它们在前后有一定时间差下先后执行动画。首先我们先把每个不同的部分分开，就像下图
在红线的左边就是一个峰，对应的条数也就是m ，每一个峰囊括的部分动画应该是一样的， 然后就是在左边部分又用绿线分成了两部分，左边的条，第一条和最後一条，先后动画的时间差就是我们的duration，所以每一条的时间差就是这里的time 。绿线左边执行的时间是慢慢增加的，右边的线是慢慢减少的，基本就是对称的。然后就是给每个view添加动画了

            ObjectAnimator customAnim = ObjectAnimator.ofFloat(view,"scaleY",1.0f,0.2f);
            customAnim.setStartDelay(delaytime);
            customAnim.setRepeatMode(ValueAnimator.REVERSE);
            customAnim.setRepeatCount(1000);
            customAnim.setDuration(duration);
            customAnim.start();

这样我们想要的效果就达到了。 这样的一个view在动画上面还可以有很多的拓展。改进之后同样在github可以看到。
Github代码下载