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();
}
}

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



如果有好的方法,请留言或者联系我哦.点此查看联系方式

更多文章请移步我的博客:DevWiki’s Bolg