Android仿58同城加載動畫
效果圖：
分析動畫
首先分析動畫，如上圖所示：
動畫分為三部分，分別為上方跳動部分，中間陰影部分，和下方文字部分:
上方跳動部分，三個幾何圖形，實現(xiàn)上拋下落（平移），上拋過程中幾何圖形進行旋轉(zhuǎn)，到達最底部時，變換幾何圖形
中間陰影部分，一個橢圓，進行縮放
下方文字部分居中
進行繪制
主要運用Drawable動畫進行繪制。
public class ShapeLoadingDrawable extends Drawable implements Animatable{}
先將上方部分三個幾何圖和中間部分橢圓形繪制出來
//畫圓private void drawCircle(Canvas canvas) {mPaint.setColor(Color.parseColor("#aa738ffe"));canvas.drawCircle(mWidth / 2, mHeight / 2, radius, mPaint);}//畫正方形private void drawRect(Canvas canvas) {mPaint.setColor(Color.parseColor("#aae84e49"));canvas.drawRect(mWidth / 2 -rectLength/2, mHeight / 2 - rectLength/2, mWidth / 2 + rectLength/2, mHeight / 2 + rectLength/2, mPaint);}//畫三角形private void drawTriangle(Canvas canvas) {mPaint.setColor(Color.parseColor("#aa72d572"));Path path = new Path();path.moveTo(mWidth / 2, mHeight / 2 - rectLength/2);path.lineTo((float) (mWidth / 2 - Math.sqrt(Math.pow(rectLength,2) / 3)), mHeight / 2 + rectLength/2);path.lineTo((float) (mWidth / 2 + Math.sqrt(Math.pow(rectLength,2) / 3)), mHeight / 2 + rectLength/2);path.close();canvas.drawPath(path, mPaint);}//畫橢圓private void drawShadow(Canvas canvas) {mPaint.setColor(Color.parseColor("#25808080"));canvas.scale(scale, scale, mWidth / 2, mHeight / 2 + 90);canvas.drawArc(mWidth / 2 - rectLength/2, mHeight / 2 + 80, mWidth / 2 + 50, mHeight / 2 + 100, 0, 360, false, mPaint);}
進行動畫部分代碼編寫，主要運用ValueAnimator
分析動畫：兩個部分的動畫，一個是上面幾何圖形的下落上拋動畫，一個是中間陰影指示器放大縮小的動畫，如果能這樣組合就算實現(xiàn)了: 當幾何圖形下落時配合陰影放大，當幾何圖形上拋時配合中間陰影縮小。當幾何圖形下落到最低點時，變換幾何圖形
/*** 上拋動畫*/private void upAnimation() {final ValueAnimator upAnimation = ValueAnimator.ofFloat(0, -200);upAnimation.setInterpolator(new DecelerateInterpolator(1.2f));//為動畫設(shè)置更新時候的監(jiān)聽upAnimation.addUpdateListener(newValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {translateY = (float) upAnimation.getAnimatedValue();//刷新invalidateSelf();}});//監(jiān)聽動畫結(jié)束，進行下落動畫upAnimation.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {downAnimation();}});//縮放動畫final ValueAnimator scaleAnimation = ValueAnimator.ofFloat(1, 0.3f);scaleAnimation.setInterpolator(new DecelerateInterpolator(1.2f));scaleAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {scale = (float) scaleAnimation.getAnimatedValue();}});//三角形旋轉(zhuǎn)動畫final ValueAnimator rotateTriangleAnimation = ValueAnimator.ofFloat(0, 120);rotateTriangleAnimation.setInterpolator(new DecelerateInterpolator(1.2f));rotateTriangleAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {rotateTriangle = (float) rotateTriangleAnimation.getAnimatedValue();}});//正方形旋轉(zhuǎn)動畫final ValueAnimator rotateRectAnimation = ValueAnimator.ofFloat(0, 180);rotateRectAnimation.setInterpolator(new DecelerateInterpolator(1.2f));rotateRectAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {rotateRect = (float) rotateRectAnimation.getAnimatedValue();}});upAnimatorSet = new AnimatorSet();upAnimatorSet.setDuration(300);upAnimatorSet.playTogether(upAnimation, scaleAnimation, rotateTriangleAnimation, rotateRectAnimation);upAnimatorSet.start();}/*** 下落動畫*/private void downAnimation() {final ValueAnimator downAnimation = ValueAnimator.ofFloat(-200, 0);downAnimation.setInterpolator(new DecelerateInterpolator(1.2f));downAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {translateY = (float) downAnimation.getAnimatedValue();invalidateSelf();}});downAnimation.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {upAnimation();exchangeDraw();}});final ValueAnimator scaleAnimation = ValueAnimator.ofFloat(0.3f, 1);scaleAnimation.setInterpolator(new DecelerateInterpolator(1.2f));scaleAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {scale = (float) scaleAnimation.getAnimatedValue();}});downAnimatorSet = new AnimatorSet();downAnimatorSet.setDuration(500);downAnimatorSet.playTogether(downAnimation, scaleAnimation);downAnimatorSet.start();}
動畫使用
在ImageView中設(shè)置drawable即可
ShapeLoadingDrawable shapeLoadingDrawable = new ShapeLoadingDrawable();imageView.setImageDrawable(shapeLoadingDrawable);shapeLoadingDrawable.start();
到這里就結(jié)束啦.
評論
圖片
表情