自定义view实战笔记--视差特效

视差特效实现

最新推荐文章于 2022-03-02 15:32:59 发布

原创最新推荐文章于 2022-03-02 15:32:59 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

实战笔记专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何通过修改ImageView的scaleType属性及使用属性动画调整控件尺寸来实现视差特效。文章详细展示了通过ValueAnimator更新控件高度的过程，并讨论了如何响应用户滑动事件来动态改变视图高度。

视差特效

先要设置imageview的scaleType属性为centerCrop

动态的改变一个控件的宽高可以在属性动画中不断修改布局参数的值,然后调用该控件的iv_header.requestLayout();方法

// 把当前的头布局的高度currentHeight恢复到初始高度orignalHeight
            final int currentHeight = iv_header.getHeight();

            // 300 -> 160
            ValueAnimator animator = ValueAnimator.ofInt(currentHeight, orignalHeight);
            // 动画更新的监听
            animator.addUpdateListener(new AnimatorUpdateListener() {

                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    // 0.0 -> 1.0
                    // 获取动画执行过程中的分度值
                    float fraction = animation.getAnimatedFraction();
//                  Integer evaluate = evaluate(fraction, currentHeight, orignalHeight);

                    // 获取中间的值
                    Integer animatedValue = (Integer) animation.getAnimatedValue();
                    System.out.println("fraction: " + fraction + " animatedValue: " + animatedValue);

                    // evaluate == animatedValue

                    // 让新的高度值生效
                    iv_header.getLayoutParams().height = animatedValue;
                    iv_header.requestLayout();

                }
            });
            animator.setInterpolator(new OvershootInterpolator(2));
            animator.setDuration(500);
            animator.start();

/**
     * 滑动到ListView两端才会被调用
     */
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
            int scrollY, int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        // deltaY 竖直方向滑动的瞬时变化量, 顶部下拉为- , 底部上拉为+
        // scrollY 竖直方向的滑动超出的距离, 顶部为-, 底部为+
        // scrollRangeY 竖直方向滑动的范围
        // maxOverScrollY 竖直方向最大的滑动位置
        // isTouchEvent 是否是用户触摸拉动 , true表示用户手指触摸拉动, false 是惯性

        System.out.println("deltaY: " + deltaY + " scrollY: " + scrollY
                + " scrollRangeY: " + scrollRangeY + " maxOverScrollY: " + maxOverScrollY
                + " isTouchEvent: " + isTouchEvent);

        // 顶部下拉, 用户触摸操作
        if(deltaY < 0 && isTouchEvent){
            // deltaY的绝对值, 累加给Header
            int newHeight = iv_header.getHeight() + Math.abs(deltaY / 3);
            if(newHeight <= drawableHeight){
                System.out.println("newHeight: " + newHeight);
                // 让新的值生效
                iv_header.getLayoutParams().height = newHeight;
                iv_header.requestLayout();
            }

        }

        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
                scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

注意点:可以用以下代码在activity的onCreate()方法中获取控件的宽高,但要注意,在在获取完毕之后要移除监听,否则会被反复调用赋值

ivHeader.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                // 图片的原始高度
                drawableHeight = ivHeader.getDrawable().getIntrinsicHeight();
                //Imageview的初始高度,用来做动画
                originalHeight = ivHeader.getHeight();
                ivHeader.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });