美文网首页
书本打开效果

书本打开效果

作者: 主音King | 来源:发表于2019-01-09 17:59 被阅读3次

打开:书本(MainActivity称作scene1) -->打开书动画-->展示书本内容(MainActivity2称作scene2)
关闭:scene2 -->合上书本-->scene1
打开书动画部分:
BookOpenViewValue:book的view的坐标信息。
BookOpenView:打开book动画view
把book分为两部分:封面(page_cover)和内容(page_content)
scene1布局-->bookopen布局-->scene2布局

AnimatorSet来实现组合动画playTogether同时执行反转、缩放、平移动画就实现了open book效果。伪代码如下:

// 首先确定翻页的坐标(默认是以view的中心为坐标原点的。修改为以书边为轴,进行 x 轴方向反转)
page_cover.setPivotX(0);
page_cover.setPivotY(y1);
 ObjectAnimator rotationY = ObjectAnimator.ofFloat(page_cover, "rotationY", 0, -150);
rotationY.setDuration(600);

// 对 封面进行缩放
ObjectAnimator scaleX = ObjectAnimator.ofFloat(page_cover, "scaleX", 1.0f, sX * 0.8f);
scaleX.setDuration(1000);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(page_cover, "scaleY", 1.0f, sY);
scaleY.setDuration(1000);

从scene2返回到scene1中实现关闭书本部分代码:

    @Override
    protected void onResume() {
        super.onResume();
        if (mBookOpenView != null) {
            mBookOpenView.closeAnim();
        }
    }

// 封面进行平移到屏幕外
ObjectAnimator translationLine = ObjectAnimator.ofFloat(page_cover, "translationX", startValue.getLeft(), 0);
translationLine.setDuration(1000);

当然在执行完上面动画后跳转到scene2(过度渐变)
```java
MainActivity.this.startActivity(new Intent(MainActivity.this, Main2Activity.class));
overridePendingTransition(R.anim.read_fade_in, R.anim.read_fade_out);

在scene2中主要是渐变显示内容,代码如下:

    @Override
    public void finish() {
        ObjectAnimator alpha = ObjectAnimator.ofFloat(picTop, "alpha", 0, 1);
        alpha.setDuration(500);
        mAnimatorSet1 = new AnimatorSet();
        mAnimatorSet1.playTogether(alpha);
        mAnimatorSet1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Main2Activity.super.finish();
                overridePendingTransition(0, 0);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        mAnimatorSet1.start();

    }

    @Override
    protected void onResume() {
        super.onResume();
        ObjectAnimator alpha = ObjectAnimator.ofFloat(picTop, "alpha", 1, 0);
        alpha.setDuration(200);
        mAnimatorSet1 = new AnimatorSet();
        mAnimatorSet1.playTogether(alpha);
        mAnimatorSet1.start();
    }

BookOpenView--->BookOpenView3不同层级的变形
demo

相关文章

  • 书本打开效果

    打开:书本(MainActivity称作scene1) -->打开书动画-->展示书本内容(MainActivit...

  • 熄灭屏幕,打开书本

    一大早的,皮皮进来请安。 问罢早安,又拿了靠枕给我,笑嘻嘻的坐在床边上。什么情况?这不科学,也不正常。 没等我开口...

  • Android 书本打开关闭动效

    先上效果图: 封面类CoverView: 打开或关闭书本方法 原理:使用Matrix对bitmap进行放大和自定义...

  • vue 书本翻页的效果

    第一种效果 1.对应的效果图。如下: 2.对应翻页的代码。如下: 第二种效果 1.对应的效果图。如下: 2.对应翻...

  • 📖阅读最美的灵魂

    当你打开书本,书本便敞开心扉,让你阅读它最美的灵魂!

  • 一个少年人的懒惰与思考

    20来岁的懒惰与思考是这世上最最挣扎的酷刑。 打开书本,打开手机,走进教室,拿起书本......每当想做点事...

  • 如何用PPT做出杂志、书本效果?| 100个PPT技巧专栏·01

    本期主题:如何用PPT做出杂志、书本效果? 方法一:为线条添加阴影效果 效果预览: 制作方法: a、点击【视图】-...

  • 打开书本就像打开一扇大门

    文/加得plus 当你打开一本绘画书就会看见,目录有很多页,画了什么,以及主题,还有他告诉我们什么?但是看似很普通...

  • 走出了校园却打开了书本

    我自己都忘记了离开校门是那一年的事情了,在我身边学业有成的人也寥寥无几曾经我以为除了上学还有别的出路人生是一个多元...

  • 【开发】书本翻页效果Turn.js

    【软件名称】 Turn.js 书本翻页效果 【软件描述】 Turn.js 是一个轻量级的 (15kb) jQ...

网友评论

      本文标题:书本打开效果

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