分享

Android开发笔记折叠动画效果

 greenyun588 2013-09-15

实现左右两个页面,左边页面作为右边的附属页,并且可以拖动缩放左边的页面,左边的页面有纸张折叠的动画效果。


 


由于android系统的动画只有默认的4种,即:移动、缩放、旋转、拉伸(倾斜),无法满足折叠的要求。


这些动画都是一个时间段执行完的,动画开始后,无需再操作,直到动画完成,这里的折叠需要有点击屏幕拖动的折叠效果。


根据上述4种动画的原理(其中拉伸比较相仿),都是需要View对象重新执行onDraw方法重新画图。


我们可以获取右边页面的图片效果,再把这张图重新按需要重新画出来。但是对一张图的拉伸无法达到折叠效果,由于折叠效果图是对称的两个梯形组成的,我们可以分别画两个梯形来实现。


实际步骤:


1.获取左边页面的图形,把图形按左右两个分为两个图形。


2.在左边页面上面再添加一个View,设为V1,即覆盖一个View,用于画梯形。


3.在最顶层添加一个View,用于监听onTouch事件


4.当onTouch事件移动时,缩放左边的页面宽度,这时会自动触发V1的onDraw事件。


获取左边图形的方法,


private Bitmap getBitmap() {
          int width = this.getWidth();
          int height = this.getHeight();
          Bitmap returnedBitmap = null;
          if (width > 0 && height > 0)
                returnedBitmap = getBitmapFromView(r1, width, height);
          return returnedBitmap;
    }


private Bitmap getBitmapFromView(View view, int width, int height) {
          int widthSpec = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);
          int heightSpec = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY);
          view.measure(widthSpec, heightSpec);
          view.layout(0, 0, width, height);
          Bitmap bitmap = new WeakReference<Bitmap>(Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)).get();
          Canvas canvas = new Canvas(bitmap);
          view.draw(canvas);
          return bitmap;
    }


创建左右两个图形的方法


private Bitmap getBitmapLeftOrRight(Bitmap bitmap, boolean isLeft) {
          Bitmap returnedBitmap = null;
          if (bitmap == null)
                return returnedBitmap;
          int width = bitmap.getWidth();
          int height = bitmap.getHeight();
          returnedBitmap = Bitmap.createBitmap(bitmap, isLeft ? 0 : width / 2, 0, width / 2, height);
          return returnedBitmap;
    }


添加View,V1


view = new View(context) {
              @Override
              protected void onDraw(Canvas canvas) {
                    super.onDraw(canvas);
                    drawBitmap(canvas);
              }
        };


view.setBackgroundColor(Color.BLACK);


r1.addView(view);


顶层添加View,监听onTouch事件


l2 = new View(context);
        l2.setOnTouchListener(new OnTouchListener() {
              @Override
              public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                              isAutoMove = false;
                              isOpen = r1.getWidth() > 0;
                              lastX = event.getX();
                              resultMove = (isOpen && lastX > riwidth - 50) || (!isOpen && lastX < 100);
                              isMove = false;
                              break;
                        case MotionEvent.ACTION_MOVE:
                              isMove = true;
                              xvalue = event.getX() - lastX;
                              move();
                              break;
                        case MotionEvent.ACTION_UP:
                              autoMove();
                              break;
                  }
                  lastX = event.getX();
                  return resultMove;
            }
        });
        addView(l2);


 


private void move() {
          int width = r1.getWidth();
          if (width <= riwidth && width >= 0) {
                initeBitmap();
                setView(true);
                setR1Width();
          }
    }


 


private void drawBitmap(Canvas canvas) {
          if (this.isMove) {
                int width = r1.getWidth();
                drawBitmap(canvas, true, width);
                drawBitmap(canvas, false, width);
          }
    }


    private void setR1Width() {
          if (r1 == null || !isMove)
                return;
          int width = r1.getWidth() + (int) xvalue;
          if (width < 0)
                width = 0;
          if (width > riwidth)
                width = riwidth;
          ViewGroup.LayoutParams param = r1.getLayoutParams();
          param.width = width;
          r1.setLayoutParams(param);
    }


    private void drawBitmap(Canvas canvas, boolean isLeft, int width) {
          Bitmap image = isLeft ? bitmapLeft : bitmapRight;


          if (image == null)
              return;
          int WIDTH = image.getWidth();
          int HEIGHT = image.getHeight();
          Matrix headingMatrix = new Matrix();
          int p1x = 0;
          int p1y = 0;
          int p2x = WIDTH;
          int p2y = p1y;
          int p3x = p2x;
          int p3y = HEIGHT;
          int p4x = p1x;
          int p4y = p3y;
          float[] src="http://blogs.com/48347/new" rel="nofollow"/>

          int flat_height =  (int)(FLAT_HEIGHT * (1 - (double)width / riwidth));
          p1x = isLeft ? 0 : width / 2;
          p1y = isLeft ? 0 : flat_height;
          p2x = isLeft ? width / 2 : width;
          p2y = isLeft ? flat_height : 0;
          p3x = p2x;
          p3y = isLeft ? HEIGHT - flat_height : HEIGHT;
          p4x = p1x;
          p4y = isLeft ? HEIGHT : HEIGHT - flat_height;


          float[] dst = new float[]{p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y};
          headingMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);
          canvas.drawBitmap(image, headingMatrix, solidPaint);
    }


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多