Android仿花束直播加載動(dòng)畫
效果圖
分析動(dòng)畫
首先分析動(dòng)畫，如上圖所示：動(dòng)畫由三個(gè)圓形幾何圖形組成，中間圓形圖案不動(dòng)，左側(cè)右側(cè)圓形圖案向中間平移，到達(dá)中間后，圓形圖案變換顏色，在進(jìn)行反向平移。
動(dòng)畫慢放如下：
慢放圖我們可以看出圓形圖案交換顏色的順序?yàn)椋?br style="box-sizing: border-box;color: rgb(64, 64, 64);font-family: -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">左->中 中->右 右->左
進(jìn)行繪制
主要運(yùn)用Drawable動(dòng)畫進(jìn)行繪制。
public class ThreeBallsLoadingDrawable extends Drawable implements Animatable {}
準(zhǔn)備三只畫筆，分別繪制三個(gè)圓形圖案
private Paint mLeftPaint,mMiddlePaint,mRightPaint;@Overridepublic void draw(Canvas canvas) {canvas.save();//平移canvas.translate(translateX,0);canvas.drawCircle(RADIUS,mHeight/2,RADIUS,mLeftPaint);canvas.restore();canvas.save();canvas.drawCircle(mWidth/2,mHeight/2,RADIUS,mMiddlePaint);canvas.restore();canvas.save();canvas.translate(-translateX,0);canvas.drawCircle(mWidth-RADIUS,mHeight/2,RADIUS,mRightPaint);????????canvas.restore();}
進(jìn)行動(dòng)畫部分代碼編寫，主要運(yùn)用ValueAnimator
分析動(dòng)畫，左側(cè)圓形圖案，向右平移到中間，然后變換顏色，在反向平移到原來位置。所以我們動(dòng)畫分為兩部分，向內(nèi)平移和向外平移。向內(nèi)平移動(dòng)畫結(jié)束，變化圓形圖案顏色（變化策略在上方）
/*** 向內(nèi)平移*/private void innerMove() {final ValueAnimator translateXInnerAnimation = ValueAnimator.ofFloat(0,170);translateXInnerAnimation.setDuration(ANIMATION_DURATION);translateXInnerAnimation.setInterpolator(new AccelerateInterpolator());translateXInnerAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {translateX = (float) translateXInnerAnimation.getAnimatedValue();invalidateSelf();}});translateXInnerAnimation.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);//變換顏色exchangeColor();expendMove();}});translateXInnerAnimation.start();}/*** 向外平移*/private void expendMove(){final ValueAnimator translateXExpendAnimation = ValueAnimator.ofFloat(170,0);translateXExpendAnimation.setDuration(ANIMATION_DURATION);translateXExpendAnimation.setInterpolator(new DecelerateInterpolator());translateXExpendAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {translateX = (float) translateXExpendAnimation.getAnimatedValue();invalidateSelf();}});translateXExpendAnimation.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);innerMove();}});translateXExpendAnimation.start();}/*** 變換顏色方法*/private void exchangeColor(){int mLeftPaintColor = mLeftPaint.getColor();int mRightPaintColor = mRightPaint.getColor();int mMiddlePaintColor = mMiddlePaint.getColor();mLeftPaint.setColor(mRightPaintColor);mRightPaint.setColor(mMiddlePaintColor);mMiddlePaint.setColor(mLeftPaintColor);????}
動(dòng)畫使用
在ImageView中設(shè)置drawable即可
ThreeBallsLoadingDrawable threeBallsLoadingDrawable = new ThreeBallsLoadingDrawable();imageView.setImageDrawable(threeBallsLoadingDrawable);threeBallsLoadingDrawable.start();
源碼地址：
https://github.com/mariolu0605/ShapeLoading
到這里就結(jié)束啦。