canvas教程

android自定义组件(手机加速球+水面波动效果)(3)

字号+ 作者:H5之家 来源:H5之家 2017-04-26 12:03 我要评论( )

在onDraw()的方法中,获取坐标Y值的时候,添加一条可变的全局变量,动态改变初相值。开启时间任务: public void moveWaterLine() {final Timer timer = new Timer();timer.schedule(new TimerTask() {@Overridepub

在onDraw()的方法中,获取坐标Y值的时候,添加一条可变的全局变量,动态改变初相值。开启时间任务:

public void moveWaterLine() { final Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { //不断改变初相 move += 1; //重新绘制(子线程中调用) postInvalidate(); } }, 500, 200); }

在时间任务中,这里没用去关闭时间任务,它会一直动,,动态去改变,并在构造方法中去调用

手机加速球

效果已经很不错了,如何让它去增加和减少呢,让它从下往上增加,只要不断去影响Y的值就好了,

这里写图片描述


如果坐标系不改变,绘制水波的时候还要判断是增加还是减少,为了方便计算,只需要将坐标系移动到底部就好了,为0的时候代表什么都没用,有的时候让Y值不断的减去一个值就实现了网上增加。

@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i + move) - up); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + move + 10) - up); } // 裁剪成圆形区域 Path path = new Path(); path.reset(); float clipRadius = len / 2; //添加圆形路径 //Path.Direction.CCW逆时针 //Path.Direction.CW顺时针 path.addCircle(len / 2, len / 2, clipRadius, Path.Direction.CCW); // (剪裁路径)裁剪成圆形区域 //(REPLACE用当前要剪切的区域代替画布中的内容的区域) canvas.clipPath(path, android.graphics.Region.Op.REPLACE); canvas.save(); canvas.translate(0, len); //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } canvas.restore(); ; }

在onDraw()方法中将坐标系移动到底部,并且声明一个全局变量up来动态改变Y值,因为是从下往上运动,所以是减去,开启时间任务:

//如果在运行,就不会执行下次动画 private boolean isRunning; //判断是上升还是下降 public int state = 1; public void change(final int trueAngle) { if (isRunning) { return; } final Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { switch (state) { case 1: isRunning = true; up -= 10; if (up <= 0) { up = 0; state = 2; } break; case 2: up += 10; if (up >= trueAngle) { up = trueAngle; state = 1; isRunning = false; timer.cancel(); } break; default: break; } postInvalidate(); } }, 500, 30); }

声明一个boolean值来判断是否在运动,如果在动,就不进行下次运动,声明一个state变量来判断是上还是下
up值动态增加或减小,再重复绘制
activity调用

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final WaterView wv= (WaterView) findViewById(R.id.wv); wv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { wv.change(200); } }); } }

设置点击事件,调用动的方法

手机加速球


终于大功告成了
目已经上传到github
github点击下载

最后的最后,个人淘宝店(抱歉,请见谅)。。霓裳雅阁
有喜欢的商品可以和我说下哦,,QQ:1070379530
谢谢

查看原文: android自定义组件(手机加速球+水面波动效果)

 

 

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

相关文章
  • HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash

    HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash

    2017-04-25 13:01

  • CircularSeekBar 自定义 圆形 seekbar

    CircularSeekBar 自定义 圆形 seekbar

    2017-04-25 12:01

  • Android多屏幕适配

    Android多屏幕适配

    2017-04-25 11:02

  • Android图形图像之自定义控件属性(demo:刮刮乐与打

    Android图形图像之自定义控件属性(demo:刮刮乐与打

    2017-04-24 13:01

网友点评
t