Android实现微信录制小视频的计时动画

使用微信录制小视频时会有一个倒计时的横线,如下图:

这个横线怎么实现呢?

尝试了以下几种方法:

ProgressBar
自定义View + 定时器 + 重绘
TextView动态改变宽度

第一种方式使用ProgressBar,但是暂时不知道如何实现.
第二种方式在绘制过程中出现卡顿,没有更好的解决办法,相对较麻烦.
第三种方式定时器动态改变宽度仍旧会出现卡顿现象.

卡顿! 卡顿!! 卡顿!!!

用什么解决卡顿呢?

用动画,对了,使用Animator.动画来解决卡顿,动态改变View的宽度.

于是自定义了一个LineView

public class LineView extends View{

    public LineView(Context context) {
        super(context);
    }

    public LineView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setLayoutWidth(int width){
        ViewGroup.LayoutParams params = getLayoutParams();
        params.width = width;
        setLayoutParams(params);
    }
}

和普通的view相比,就多了一个方法:

    public void setLayoutWidth(int width){
        ViewGroup.LayoutParams params = getLayoutParams();
        params.width = width;
        setLayoutParams(params);
    }

为什么加一个这个方法呢?这个方法的其实就是设置View的布局宽度,但是在ObjectAnimator里面,需要一个可以使用的属性来改变,为此我创造一个属性layoutWidth,于是动画就可以这样写:

animator = ObjectAnimator.ofInt(lineView, "layoutWidth", width, 0);

布局文件很简单,就放一个LineView,一个Button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <net.devwiki.lineview.LineView
        android:id="@+id/lineView"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:background="@color/colorPrimary"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginTop="100dp"
        android:text="START"/>
</LinearLayout>

在这把MainActivity也贴出来,如下:

public class MainActivity extends AppCompatActivity {

    private Animator animator;
    private LineView lineView;
    private int width;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startAnimator();
            }
        });
        lineView = (LineView) findViewById(R.id.lineView);
        ViewTreeObserver observer = lineView.getViewTreeObserver();
        observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                width = lineView.getMeasuredWidth();
                Log.d("-----", "width:" + width);
                return true;
            }
        });
    }

    private void startAnimator(){
        animator = ObjectAnimator.ofInt(lineView, "layoutWidth", width, 0);
        animator.setDuration(6000);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
    }
}

噔噔噔噔,大功告成,看一下效果吧: