先上图,UI说了,这里要做动画,让小车感觉在奔跑的动画。
UI的建议是背景图不停的移动,视觉上就是小车不停的在奔跑。
那么,怎么实现呢?很简单,可能不是最佳的实现方式,但是很暴力。
码代码:
public class AutoPlayView extends View {
Drawable mDrawableLeft, mDrawableRight;
int drawableWidth, drawableHeight;
ValueAnimator valueAnimator;
public AutoPlayView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
mDrawableLeft = getResources().getDrawable(R.mipmap.ic_my_banner);
drawableWidth = mDrawableLeft.getMinimumWidth();
drawableHeight = mDrawableLeft.getMinimumHeight();
mDrawableLeft.setBounds(0, 0, drawableWidth, drawableHeight);
mDrawableRight = getResources().getDrawable(R.mipmap.ic_my_banner);
mDrawableRight.setBounds(drawableWidth, 0, drawableWidth * 2, drawableHeight);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int wdMode = MeasureSpec.getMode(widthMeasureSpec);
int hdMode = MeasureSpec.getMode(heightMeasureSpec);
//测量布局大小,默认为屏幕的宽,图片的高
if (wdMode == MeasureSpec.EXACTLY && hdMode == MeasureSpec.EXACTLY) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} else {
int wd = MeasureSpec.makeMeasureSpec(DensityUtil.getScreenWidth(getContext()), MeasureSpec.EXACTLY);
int hd = MeasureSpec.makeMeasureSpec(drawableHeight, MeasureSpec.EXACTLY);
setMeasuredDimension(wd, hd);
}
}
@Override
protected void onDraw(Canvas canvas) {
//思路:左边一张图,右边隐藏一张图,不停的scrollto
mDrawableLeft.draw(canvas);
mDrawableRight.draw(canvas);
}
public void startPlay() {
//一张图片的宽的移动距离,即可视觉上达到不停的在滚动
valueAnimator = ValueAnimator.ofInt(0, drawableWidth);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setRepeatCount(-1);
valueAnimator.setDuration(2000);
valueAnimator.setRepeatMode(ValueAnimator.RESTART);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (int) animation.getAnimatedValue();
scrollTo(value, 0);
}
});
valueAnimator.start();
}
public void stopPlay() {
if (valueAnimator != null && valueAnimator.isRunning() && valueAnimator.isStarted()) {
valueAnimator.cancel();
}
}
}
效果图:
完事了,是不是很简单暴力?
有问题,欢迎评论指正,thx。