canvas教程

使用属性动画实现一个简单的加载动画

字号+ 作者:H5之家 来源:H5之家 2017-02-07 11:01 我要评论( )

安卓的动画各种各样,新加的属性动画可以很好的实现动画效果。如何实现一个简单的加载动画呢?Fristofall,Becauseofyouarecustomview,youneedextendstheView,and

安卓的动画各种各样,新加的属性动画可以很好的实现动画效果。
如何实现一个简单的加载动画呢?
Frist of all, Because of you are custom view, you need extends the View,and implement there important method,such as onMeasure()、onDraw()、onLayout()..
Then, you need some paints to draw,so that…

public FourCirlceRotate(Context context, AttributeSet attrs) { super(context, attrs); paint1 = new Paint(); paint2 = new Paint(); paint3 = new Paint(); paint4 = new Paint(); paint5 = new Paint(); paint1.setColor(Color.parseColor("#ff0099cc")); paint2.setColor(Color.parseColor("#ff669900")); paint3.setColor(Color.parseColor("#ffcc0000")); paint4.setColor(Color.parseColor("#ffaa66cc")); paint5.setColor(Color.parseColor("#ffffbb33")); }

and you should get the value animator, just like this!

private ValueAnimator getValueAnimator() { ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 8f); valueAnimator.setDuration(4000); valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.start(); return valueAnimator; }

and you should fresh your screen when your application had runing.

public void startAnimation() { if (valueAnimator == null) { valueAnimator = getValueAnimator(); } else { valueAnimator.start(); } R = getHeight() / 6; postDelayed(new Runnable() { @Override public void run() { if (!stop) { startAnimation(); invalidate(); } } }, valueAnimator.getDuration()); init = true; }

then,The best part of it is you need set some coding on onDraw() method to make it happen.

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Log.i(TAG, "onDraw " + where); if (!init) { startAnimation(); } Log.e(">>>>>>>>>>>>>>>>>","show:"+show+"where:"+where); //显示固定的圆,逐个出现 if (show <= 4) { canvas.drawCircle(R, R, R, paint2); } if (show <= 3) { canvas.drawCircle(getWidth() - R, R, R, paint3); } if (show <= 2) { canvas.drawCircle(getWidth() - R, getHeight() - R, R, paint4); } if (show <= 1) { canvas.drawCircle(R, getHeight() - R, R, paint5); } //逐个消失 if (show > 4) { if (show <= 4) { canvas.drawCircle(R, R, R, paint2); } if (show <= 5) { canvas.drawCircle(getWidth() - R, R, R, paint3); } if (show <= 6) { canvas.drawCircle(getWidth() - R, getHeight() - R, R, paint4); } if (show <= 7) { canvas.drawCircle(R, getHeight() - R, R, paint5); } } //移动 if (where < 1 && where > 0) { canvas.drawCircle(R + (getWidth() - 2 * R) * where, R, R, paint1); show = 4; } if (where < 2 && where > 1) { canvas.drawCircle(getHeight() - R, R + (getHeight() - 2 * R) * (where - 1), R, paint1); show = 3; } if (where < 3 && where > 2) { canvas.drawCircle(getWidth() - R - (getWidth() - 2 * R) * (where - 2), getHeight() - R, R, paint1); show = 2; } if (where < 4 && where > 3) { canvas.drawCircle(R, getHeight() - R - (getHeight() - 2 * R) * (where - 3), R, paint1); show = 1; } if (where > 4 && where < 5) { canvas.drawCircle(R + (getWidth() - 2 * R) * (where - 4), R, R, paint1); show = 5; } if (where > 5 && where < 6) { canvas.drawCircle(getHeight() - R, R + (getHeight() - 2 * R) * (where - 5), R, paint1); show = 6; } if (where > 6 && where < 7) { canvas.drawCircle(getWidth() - R - (getWidth() - 2 * R) * (where - 6), getHeight() - R, R, paint1); show = 7; } if (where > 7 && where < 8) { canvas.drawCircle(R, getHeight() - R - (getHeight() - 2 * R) * (where - 7), R, paint1); show = 8; } if (isStart) { where = (float) valueAnimator.getAnimatedValue(); } if (valueAnimator.isRunning()) { isStart = true; invalidate(); } }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用XML DOM生成XML(2)

    使用XML DOM生成XML(2)

    2017-02-05 18:01

  • HTML5 Canvas 图像动画的实现(实例小球弹跳)

    HTML5 Canvas 图像动画的实现(实例小球弹跳)

    2017-02-05 17:03

  • 免费HTML5在线教程

    免费HTML5在线教程

    2017-02-05 10:01

  • 使用HTML5 Canvas API控制字体的显示与渲染的方法

    使用HTML5 Canvas API控制字体的显示与渲染的方法

    2017-02-05 09:00

网友点评
>