canvas教程

Canvas开篇之drawBitmap方法讲解(2)

字号+ 作者:H5之家 来源:H5之家 2017-11-20 10:13 我要评论( )

我们向外提供两个接口: public void startTranslate() {startTranslate(0, 0, 200, 200, 1000);}/*** 移动位图** @param startLeft 起始左边距* @param startTop 起始距上边距离* @param toLeft 到达左边距* @para

我们向外提供两个接口:

public void startTranslate() { startTranslate(0, 0, 200, 200, 1000); } /** * 移动位图 * * @param startLeft 起始左边距 * @param startTop 起始距上边距离 * @param toLeft 到达左边距 * @param toTop 到达上边距 * @param duration 时长 */ public void startTranslate(int startLeft, int startTop, int toLeft, int toTop, long duration) { mStartLeft = startLeft; mStartTop = startTop; mToLeft = toLeft; mToTop = toTop; // 使用ValueAnimator创建一个过程 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1); valueAnimator.setDuration(duration); valueAnimator.setInterpolator(new AccelerateInterpolator()); valueAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animator) { // 不断重新计算上下左右位置 float fraction = (Float) animator.getAnimatedValue(); int currentLeft = (int) ((mToLeft - mStartLeft) * fraction + mStartLeft); int currentTop = (int) ((mToTop - mStartTop) * fraction + mStartTop); if (mDestRect == null) { mDestRect = new Rect(currentLeft, currentTop, currentLeft + mBitWidth, currentTop + mBitHeight); } mDestRect.left = currentLeft; mDestRect.right = currentLeft + mBitWidth; mDestRect.top = currentTop; mDestRect.bottom = currentTop + mBitHeight; // 重绘 postInvalidate(); } }); valueAnimator.start(); }
Activity 里控制view的移动: final DrawBitmapView drawBitmapView = new DrawBitmapView(this); setContentView(drawBitmapView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); drawBitmapView.startTranslate(); drawBitmapView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { Random random = new Random(); int startLeft = random.nextInt(200); int startTop = random.nextInt(250); int toLeft = random.nextInt(550) + 200; int toBottom = random.nextInt(1000) + 250; drawBitmapView.startTranslate(startLeft, startTop, toLeft, toBottom, 1000); return true; } }); }
点击之后起始点和到达点随机生成,此时效果如下:



相信到这里大家已经能灵活控制bitmap的位置了,顺势咱们再做个水平缩放为0的小例子:

public void startScale(long duration) { // 使用ValueAnimator创建一个过程 ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, 0); valueAnimator.setDuration(duration); valueAnimator.setInterpolator(new AccelerateInterpolator()); valueAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animator) { // 不断重新计算上下左右位置 float fraction = (Float) animator.getAnimatedValue(); if (mDestRect == null) { mDestRect = new Rect(0, 0, mBitWidth, mBitHeight); } mDestRect.right = (int) (fraction * mBitWidth); // 重绘 postInvalidate(); } }); valueAnimator.start(); }
只需要不断减小mDestRect.right即可,非常简单,看下效果:



      上面两个例子都是通过改变mDestRect ,在哪些时候我们需要动态改变mSrcRect 呢?我前面讲过一个水波纹的例子,那里面就是不断截取水波纹的一部分,进行展示,由于是连续截取,所以视觉感受上是连续波纹效果,有兴趣的同学可以看看参考下; 


    好了本篇就讲这么多,有些同学可能会想,尼玛,这么简单的玩意儿能做毛线牛逼动效啊,其实往往再复杂的动效也就是由一个个小点组成的,而思路和方案的选取就已经决定了能否成功的做出酷炫又如丝般顺滑的效果,好的思路又往往来源于对简单方法的深刻理解;

    

    下篇我们就一起完成一个星球浮动的效果!



    转成gif之后失真严重,并且感觉有卡顿,真实情况如梦如幻,如丝般顺滑!

    好了,还是不吹牛逼了,这个栗子只是为了加深对这个方法的理解,同时扩展动效绘制的思路!

    注:哪位大神有好的制作gif的方法,还望不吝赐教,目前我是采用的电脑录屏,然后PS转gif,感觉失真比较严重!



阅读全文

版权声明:本文为博主原创文章,转载请带上文章链接,谢谢!

  • 本文已收录于以下专栏:
  • 相关文章推荐

    图形绘制之——Canvas详解(四)-Bitmap(位图)及Matrix矩阵

    前面我们提到过canvas相当于画家,而bitmap相当于画布,前面博客的例子都是直接利用canvas绘制,这里我们来学习一下,利用bitmap先将图形绘制好,然后一起放到最终的canvas中^^。 ...

    Andriod中绘(画)图----Canvas的使用详解

    转载请注明出处: 由于在网络上找到关于Canvas的使用都比较抽象,也许是我的逻辑思维不太好吧...

    android canvas drawBitmap方法详解

    之前自己在自定义view,用到canvas.drawBitmap(Bitmap, SrcRect, DesRect, Paint)的时候,对其中的第2和3个参数的含义含糊不清。看源码函数也没理解,然后...

    android绘图canvas.drawBitmap方法的作用

     

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

    相关文章
    • Canvas 3D 动画 Three.js 初体验

      Canvas 3D 动画 Three.js 初体验

      2017-11-20 09:03

    • Canvas的画图板设计与实现.doc文档

      Canvas的画图板设计与实现.doc文档

      2017-11-19 18:05

    • 使用Canvas绘制几何图形

      使用Canvas绘制几何图形

      2017-11-18 14:08

    • JS+Canvas绘制动态时钟效果

      JS+Canvas绘制动态时钟效果

      2017-11-17 13:00

    网友点评
    c