书本打开效果

2019-01-09  本文已影响3人  主音King

打开:书本(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

上一篇 下一篇

猜你喜欢

热点阅读