美文网首页
仿掌阅书城书架切换

仿掌阅书城书架切换

作者: zyc_214 | 来源:发表于2017-06-28 17:59 被阅读0次

首先我们先分析一下掌阅在书城书架的切换效果:

  • 首先书架、书城两个视图都会移动,速度不同所以大概得出在摆放的时候会有一定的偏移。
  • 再有就是透明度、和移动位置随着手指的滑动而变化。
  • 书架视图的右边界有一个阴影来达到层叠的效果。

在模仿别人的视图中,一般都会使用到系统的显示布局边界的功能。

  • 在这个图片中可以看到右边有一条边界线应该是视图的初始位置,可以证明第一个特点,下层视图有一定的偏移,大概的偏移量为屏幕的4/5。所以在onLayout()就需要对布局重新排布一下。
DisplayMetrics dm = context.getResources().getDisplayMetrics();
widthPixels = dm.widthPixels;
// 用于计算被覆盖的移动的距离,产生上下同时完成单速度不同的效果
firstLayoutOffset = (widthPixels / 5)*4;
getChildAt(0).layout(getChildAt(0).getLeft() + firstLayoutOffset,
                        0,getChildAt(0).getLeft() + getChildAt(0).getWidth()
                                + firstLayoutOffset,
                        getChildAt(0).getMeasuredHeight()); ```
- 重写onTouchEvent()方法,在MotionEvent.ACTION_MOVE:中计算X轴的偏移距离,从而根据偏移的大小来变化透明度和偏移量。通过X滑动大小和方向来进行变化。

private void doAnimation(int dx, boolean isMoveToLeft) {
isStartDrag = true;
// 计算移动中当前透明度的值,通过变化因子和变化值计算
currentAlpha += (float) alphaForctor * dx;
// 计算当前的偏移值
currentTranslate += translateFactor * dx;
// 防止超过透明度的开始值也为最大值
currentAlpha = currentAlpha < START_ALPHA ? currentAlpha : START_ALPHA;
if (currentAlpha <= 0) {
currentAlpha = 0;
}
if ((currentTranslate <= 0 && !isCollapse)
|| (currentTranslate >= 0 && isCollapse)) {
this.invalidate();
} else {
currentTranslate = START_TRANSLATE;
}
}

- 在MotionEvent.ACTION_UP:中根据当前移动的偏移距离来判断是取消动画还是完成动画。

case MotionEvent.ACTION_UP:
if (x >= mFirstMotionX) {
isMoveToRight = true;
} else {
isMoveToRight = false;
}
lastAlpha = currentAlpha;
lastTranslate = currentTranslate;
if (isMoveToRight) {
if (x - mFirstMotionX > widthPixels * 0.5f) {
endAnimation();
} else {
cancelAnimation();
}
} else {
if (x + (widthPixels - mFirstMotionX) < widthPixels * 0.5f) {
endAnimation();
} else {
cancelAnimation();
}
}
break;

- 结束动画、和取消动画。

private void endAnimation() {
//根据已经完成的距离,来计算一下还需要多长时间来完成后续的动画
int duration = (int) (((1 - Math.abs(currentTranslate)) * SCREEN_DIVID_BY) * averageDuration);
accelerantTween.start(duration);
}
private void cancelAnimation() {
this.isCancel = true;
accelerantTween.start(CANCEL_ANIMATION_TIME);
}

- AccelerantTween类:创建一个线程,根据需要完成的时间,和每一帧的时间来进行事件的回调,完成相应的动作。

Runnable mTick = new Runnable() {

    public void run() {
        long baseTime = mBaseTime;
        long now = SystemClock.uptimeMillis();
        long diff = now - baseTime;
        int duration = mDuration;
        float val = diff / (float) duration;
        val = Math.max(Math.min(val, 1.0f), 0.0f);
        currentValue = val;
        if (!isPause) {
            if (diff >= duration) {
                mCallback.onTweenFinished(next);
                isLastFrame = true;
            }
            mCallback.onTweenValueChanged(currentValue, isLastFrame);
        } else {
            mCallback.onTweenStop();
        }
        int frame = (int) (diff / FRAME_TIME);
        next = baseTime + ((frame + 1) * FRAME_TIME);
        if (diff < duration && !isPause) {
            mHandler.postAtTime(this, next);
        }
        if (diff >= duration) {
            mRunning = false;
        }
    }
};
- 在根据计算出的偏移距离和透明度进行绘制。
- 大概逻辑详细可以看源码:https://github.com/zhaoyongchao/SlideSwitchScreen

相关文章

  • 仿掌阅书城书架切换

    首先我们先分析一下掌阅在书城书架的切换效果: 首先书架、书城两个视图都会移动,速度不同所以大概得出在摆放的时候会有...

  • 读书12陈寅恪的最后20年

    [cp]掌阅居然在大封推《陈寅恪的最后20年》,不知道有暗藏是花头。 这本书当时非常,记得刚的那年上海书城书架子望...

  • 掌阅精选 | 一款很能打的出版书籍阅读软件

    2014年9月,在我大学入学前,我的第一部手机里预装了掌阅软件,从那时候开始使用掌阅。在掌阅书城里书越买越多,越来...

  • 01 项目需求分析

    书架==> 书城 ==> 推荐==> 详情项目需求分析

  • 掌阅

    突然想了解自己用掌阅这个电纸书软件的阅读情况,认真打开主页,有如下发现 消费情况 2016.8-2017.10大概...

  • 掌阅

    掌阅之后: 自激,过分。这是几十年前的文章,看着真新鲜!就我目前的认知,我觉得做点本职工作其实没必要夸大它!每种职...

  • 慢生活:八月琐事记

    1 新书《秋风误》在掌阅书城上架了,有几分高兴。 写作,在某种程度上说,是一件私人的事:表达自己想表达的,喜欢自己...

  • IOS(Swift)最完整小说阅读器Demo

    (仿iReader(掌阅),QQ阅读等常用阅读器阅读页面) 老版本推到重做 代码简洁注释多 方法封装可拷贝 该项目...

  • 仿掌阅实现书籍打开动画

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发 一. 前言 上次打开掌阅的时...

  • 仿掌阅实现书籍打开动画

    一. 前言 上次打开掌阅的时候看到书籍打开动画的效果还不错,正好最近也在做阅读器的项目,所以想在项目中实现一下。 ...

网友评论

      本文标题:仿掌阅书城书架切换

      本文链接:https://www.haomeiwen.com/subject/caaucxtx.html