自定义控件系列三（小说app打开书籍翻页效果）

最新推荐文章于 2022-05-11 11:14:56 发布

阿邹邹

最新推荐文章于 2022-05-11 11:14:56 发布

阅读量1k

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/weixin_41078100/article/details/105185166

版权

Android 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

打开小说类app，一般老设计都会这样，一个书架上面放着整整齐齐的书籍，然后你点击一个书籍，这个书籍就会慢慢的放大到全屏幕，然后会有一个翻页效果。自定义控件系列三就来实现这么一个效果，这个章节主要内容在动画这一块，其实和自定义控件关系不是很大，但是不管怎么说，学好这个动画对开发还是很有用处的。

这里如果你没用接触过属性动画这一块，我就先简单说一下用法，属性动画用法很简单，主要用到的方法 ofFloat ofInt ofArgb
AnimatorSet 这个比较关键，如果你要同时播放几个动画，比如缩放平移这个了。

您的浏览器不支持播放效果图！复制链接浏览器打开 http://zhx02.xiaoxingxing.online/2020/03/29/4ee85d854030a7b98001dc9e9f201b92.mp4

如上面你看的，翻页效果其实主要在于俩个图，一张封面图，一张是你打开书籍后的第一张图，那么要做的就是这俩个图片的动作。
首先我们要封面图和首图同时慢慢的放大，并且移动位置到中心点（这里的这样做就是你的书籍可以在任意位置最后都是从中心点开始放大），其次我们对封面图进行宽度减少，并且同时向左移动，这样就会产生一个翻页的效果。
那么合上书籍也就是我们相反的逻辑了，这里我就不解释了。
里面稍微复杂的地方就是涉及到了一些宽度和高度的计算，不过你仔细研究一下都是比较清晰的。
上代码

 private void jump(final View imageView) {
        height = m1Group.getMeasuredHeight();
        width = m1Group.getMeasuredWidth();
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "scaleY",
                1f, txfloat(height, imageView.getHeight()));
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "scaleX",
                1f, txfloat(width, imageView.getWidth()));
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(m1I1, "scaleX",
                1f, 0f);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(m1I1, "translationX",
                0, -m1I1.getWidth() / 2);
        ObjectAnimator animator5 = ObjectAnimator.ofFloat(imageView, "translationX",
                0, width / 2 - (imageView.getLeft() + imageView.getWidth() / 2));
        ObjectAnimator animator6 = ObjectAnimator.ofFloat(imageView, "translationY",
                0, height / 2 - (imageView.getTop() + imageView.getHeight() / 2));
        animatorSet.playTogether(animator1, animator2, animator3, animator4, animator5, animator6);
        animatorSet.setDuration(500);
        animatorSet.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationStart(Animator arg0) {
            }

            @Override
            public void onAnimationRepeat(Animator arg0) {
            }

            @Override
            public void onAnimationEnd(Animator arg0) {
                Intent intent = new Intent(MainActivity.this,Main4Activity.class);
                startActivity(intent);
            }

            @Override
            public void onAnimationCancel(Animator arg0) {
            }
        });
        animatorSet.start();
    }

上面的这个方法就是我封好的一个打开书籍翻页的动画效果。
这里要说一下上面用到的一些属性都是已经存在的，比如你现在如果设置一个height属性是会报错的，为什么，因为在这个控件里面找不到setHeight属性，如果想使用你需要去实现一个setHeight方法，这个在上面视频的后半部分拖拽视频动画会用到。

下一个章节来记录一下仿youtube的视频拖拽动画实现。