翻页效果的动画实现

这篇文章是为在

http://blog.csdn.net/hmg25/archive/2011/04/22/6342539.aspx

的翻页的实现的加入了一点点个人的优化,当然是在班门弄斧。

 

http://blog.csdn.net/hmg25/archive/2011/04/22/6342539.aspx

 

本来应该把实现的代码传上来的,但是公司新出了规定。作了信息安全处理,USB和上传全作了限制,所有的代码弄不出来, 为把我的自动弹回的实现原理说一下。

 

 

主要就是使用Scroller 的弹回效果

1.首先重写翻页类的如下方法。

public void computeScroll() {

super.computeScroll();

if (mScroller.computeScrollOffset()) {

float x = mScroller.getCurrX();

float y = mScroller.getCurrY();

mTouch.x = x;

mTouch.y = y;

mCanvas.drawColor(0xFFAAAAAA);

postInvalidate();

}

}

当然需要先初始化一个Scroller对象

Scroller mScroller = new Scroller(getContext());

 

2.在手指松开的时候,判断下当前的位置和滑动速度。

首先判断速度,如果正向超过200表示翻回,如果负向超过200表示下一页。否则的话根据位置来判断是否翻页。

 

代码:

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; min-height: 16.0px} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #646464} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #3f7f5f} p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #0000c0} p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #7f0055} span.s1 {color: #000000} span.s2 {color: #7f0055} span.s3 {color: #0000c0} span.s4 {color: #3f7f5f} span.Apple-tab-span {white-space:pre}

 

@Override

public boolean onTouchEvent(MotionEvent event) {

/*每次触碰的时候判断翻页动画是否结束,如果没有结束,则立即结束动画*/

if (!mScroller.isFinished()) {

mScroller.abortAnimation();

}

if (isShowNext) {

showNext();

}

/*检测滑动速度*/

if (mVelocityTracker == null) {

mVelocityTracker = VelocityTracker.obtain();

}

mVelocityTracker.addMovement(event);

/*触摸事件*/

int action = event.getAction();

float eventX = event.getX();

float eventY = event.getY();

switch (action) {

case MotionEvent.ACTION_DOWN:

mCanvas.drawColor(0xFFAAAAAA);

mTouch.x = eventX;

mTouch.y = eventY;

postInvalidate();

break;

case MotionEvent.ACTION_MOVE:

mCanvas.drawColor(0xFFAAAAAA);

mTouch.x = eventX;

mTouch.y = eventY;

postInvalidate();

break;

case MotionEvent.ACTION_UP

/* 手指离开的时候检测一下滑动的速度 */

            final VelocityTracker velocityTracker = mVelocityTracker;

            velocityTracker.computeCurrentVelocity(1000);

            int velocityX = (int) velocityTracker.getXVelocity();

if (velocityX < -200) {

goNext(); /*下一页*/

} else  if (velocityX > 200) {

goBack();

} else {

if (mTouch.x < mWidth / 2) {

goNext();

} else {

goBack();

}

}

postInvalidate();

break;

}

return true;

}

 

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #3f5fbf} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #3f7f5f} p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; min-height: 16.0px} p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #0000c0} p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #646464} p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #2a00ff} span.s1 {color: #7f0055} span.s2 {color: #000000} span.s3 {color: #7f9fbf} span.s4 {color: #0000c0} span.Apple-tab-span {white-space:pre}

/**

* 返回该页

*/

private void goBack() {

// TODO 根据当前翻页的位置自动彈回,或者翻向下一页

mCanvas.drawColor(0xFFAAAAAA);

mScroller.startScroll((int)mTouch.x, (int)mTouch.y, (int)-(mTouch.x - mCornerX), (int)-(mTouch.y - mCornerY), 1000);

}

/**

* 切换到下一页

*/

private void goNext() {

mScroller.startScroll((int)mTouch.x, (int)mTouch.y, (int)(-(mWidth + (mWidth -(mTouch.x - mCornerX)))), (int)-(mTouch.y - mCornerY), 3000);

isShowNext = true;

//TODO 把下一页变成当前页, 加载下一页

handler.postDelayed(new Runnable() {

@Override

public void run() {

if (isShowNext) {

showNext();

}

}

}, mScroller.getDuration());

}

private void showNext() {

isShowNext = false;

/*把下一页变成当前页*/

Canvas canvas = new Canvas(mCurPageBitmap);

canvas.drawBitmap(mNextPageBitmap, 0, 0, null);

/*下一页填充新的数据*/

canvas = new Canvas(mNextPageBitmap);

BitmapDrawable bmpDrawable = new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.image1));

bmpDrawable.setBounds(0, 0, mWidth, mHeight);

bmpDrawable.draw(canvas);

/*重绘*/

/*每次触碰的时候判断翻页动画是否结束,如果没有结束,则立即结束动画*/

if (!mScroller.isFinished()) {

mScroller.abortAnimation();

}

mCanvas.drawColor(0xFFAAAAAA);

mTouch.x = mCornerX;

mTouch.y = mCornerY;

Log.i("zbkc", "onTouch event, mTouch(" + mTouch.x + ", " + mTouch.y + ")");

postInvalidate();

}

其他的具体翻页实现在之前的那位仁兄的博文中已经写的够好了。。。

 

呵呵

 

 

希望能帮到大家

 

展开阅读全文

没有更多推荐了,返回首页