圆点旋转收缩放大缩小效果的实现"/>
Android的属性动画(二)加载框圆点旋转收缩放大缩小效果的实现
案例效果图如下,
案例实现步骤
1.首先用drawCircle()画好6个圆点
private void drawCircles(Canvas canvas) {//每个小圆之间的间隔角度 = 2π/小圆的个数float rotationAngle = (float) (2*Math.PI/mCircleColors.length);Log.i("barry","length------:"+mCircleColors.length);for (int i=0; i < mCircleColors.length; i++){/*** x = r*cos(a) +centerX* y= r*sin(a) + centerY* 每个小圆i*间隔角度 + 旋转的角度 = 当前小圆的真是角度*/double angle = i*rotationAngle + mCurrentRotationAngle;float cx = (float) (mCurrentRotationRadius*Math.cos(angle) + mCenterX);float cy = (float) (mCurrentRotationRadius*Math.sin(angle) + mCenterY);Log.e("Test", "弧度="+angle+ " 对应的值="+mCurrentRotationRadius*Math.sin(angle));mPaint.setColor(mCircleColors[i]);canvas.drawCircle(cx,cy,mCircleRadius,mPaint);}}
2.通过属性动画让6个圆点开始旋转
//1.动画的初始工作;2.开启动画//花1200ms,计算某个时刻当前的角度是多少? 0~2πmAnimator = ValueAnimator.ofFloat(0f,(float)Math.PI*2);//Math.PI*2 用于代表360度//在重复执行的过程中,会有卡顿的现象,LinearInterpolator 可以用于解决卡顿mAnimator.setInterpolator(new LinearInterpolator());mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {//计算某个时刻当前的大圆旋转了的角度是多少?mCurrentRotationAngle = (float) valueAnimator.getAnimatedValue();postInvalidate();}});mAnimator.setDuration(mRotationDuration);mAnimator.setRepeatCount(ValueAnimator.INFINITE);//重复mAnimator.start();
3.当网络数据加载成功后,让旋转动画停止,同时让6个圆点先开始收缩,然后再回弹
//花1200ms,计算某个时刻当前的大圆半径是多少? r~0中的某个值mAnimator = ValueAnimator.ofFloat(0, mRotationRadius);mAnimator.setDuration(mRotationDuration);mAnimator.setInterpolator(new OvershootInterpolator(10f));mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {
// 某个时刻当前的大圆半径是多少?mCurrentRotationRadius = (float)valueAnimator.getAnimatedValue();invalidate();}});mAnimator.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);mState = new ExpandState();}});
// mAnimator.start();mAnimator.reverse();;
注意细节
mAnimator.setInterpolator(new OvershootInterpolator(10f));
使6个圆点反向扩散时,具备张力效果
mAnimator.reverse();
让动画反向执行,可以达到从扩散到收缩的效果
4.让背景以圆的方式扩散
如下图,当旋转的6个点消失后,背景也应该以圆的方式进行扩展,以显示背后的内容
if(mHoleRadius>0f){//得到画笔的宽度 = 对角线/2 - 空心圆的半径float strokeWidth = mDiagonalDist - mHoleRadius;mPaintBackground.setStrokeWidth(strokeWidth);//画圆的半径 = 空心圆的半径 + 画笔的宽度/2float radius = mHoleRadius + strokeWidth/2;canvas.drawCircle(mCenterX,mCenterY,radius,mPaintBackground);Log.e("Test","画圆: radius="+radius+" strokeWidth="+strokeWidth);}else {canvas.drawColor(mSplashBgColor);}
更多推荐
Android的属性动画(二)加载框圆点旋转收缩放大缩小效果的实现
发布评论