手把手教你撸最新Youtube视频拖拽动画效果

时间 2019-11-16

标签手把手最新视频动画效果繁體版

原文原文链接

前言

又到了金三银四的季节了，忙的人特别忙，面试啊，加班啊，闲的人也是特别闲吧，就好比我，每天划水，闲的写文章，作动画，同时呢各类新技术在不断的涌进，推进者软件行业的发展，不要焦虑，不要着急，学好本分，再扩展技能。很少说了，给你们看看作的效果吧。git

github连接根据你们的一致意见开源了github

这个是原生的效果
面试

这个是作出来的效果bash

动画分解

动画分解其实很重要，若是说想模仿一个App的动画及交互效果，必定要仔细的观察他在交互细到放慢每个操做，而后在根据这个动态来写代码。否则最后实现的效果不同，那岂不是白费了。废话很少说，上代码看步骤。ide

第一步视频原始状态分析

能够看到，视频最初始的状态是由一个VideoView（能够是surfaceview都行），加上一个list吧，上下布局，可是VideoView呢，他是根据视频尺寸大小动态的调整宽高的，而不是固定的，咱们来分析这个过程布局

第一种下拉的时候若是视频的高度没有达到原生高度，这时候下面的listview 不能消费touch事件，由videoview来消费这个事件，根据当前的下滑Y值进行调整视频宽高比
第二种状况是若是listview已经滑动了一部分这时候进行下拉，可是viewvideo尚未到达真是高度，这时候touch事件仍是由listview消费，当他滑动到顶部的时候进行拦截touch 而后传递给videoview
第三中状况，当listview 向下快速滑动的时候会有个惯性的过程，即便手离开手机了 listview仍是在滑动，咱们称为惯性滑动，到惯性滑动到顶部的时候，若是视频高度没有达到原生高度，这时候要根据这个惯性值来调整调整视频高度。

第二步视频下滑过程分析

由上图能够看到当咱们在下拉视频的时候，视频的顶部左右边距机listview 都发生改变，同时videoview高度也发生了变化。优化

下拉的时候margin的 left right top bottom值都在发生改变，videoview 的高度也在发送改变，同时listview 渐渐消失，变成白色的背景，listview的高度在逐渐变小，同时能够看到在Z轴也发生了改变。可能图片不清晰，看不出Z轴的变换
下拉到listview消失的时候，这时候videoview的宽度发生改变，同时控制器出现。这时候videoview宽度仍是在一直的缩小。
当达到了最小视频悬浮层的时候，下拉整个视图愈来愈透明，同时整个布局在根据手势在下滑。

第三步视频上滑过程分析

上滑过程其实就是把下滑过程反过来而已，这里我就再也不过多追溯了。动画

撸代码

主要的逻辑在上面都有，下面我就简单的对上面的逻辑进行分析一下，总体代码想要的老铁私信我留言都行ui

如何对listview和videoview进行touch的分发

这里我使用的是一个LinearLayout做为父布局进行组装这两个子view，而后根据viewgroup的dispatchTouchEvent方法里面加判断进行事件的分发。网上这些代码不少我就不详细赘述了，其实我这里仍是有不少能够优化的地方，这只是个demo。spa

和上面动画分解的逻辑一致，一看videoview 是否达到最大值，listview是否在顶部。
listview（我这边用的时候recyclerview都同样）是否在顶部能够经过调用addOnScrollListener（）来判断是不是第一个可见的item *判断videoview是否达到最大值呢，根据视频的宽高来。能够经过Mediaplayer来获取，

//分发recyclerview和videoview事件
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        y = ev.getY();
        int pointerId = ev.getPointerId(0);
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mDownY = ev.getY();
                Log.i(TAG, "dispatchTouchEvent: ACTION_DOWN " + mDownY);
                if (mVelocityTracker == null) {
                    mVelocityTracker = VelocityTracker.obtain();
                } else {
                    mVelocityTracker.clear();
                }
                mVelocityTracker.addMovement(ev);
                break;
            case MotionEvent.ACTION_MOVE:

                float dDownY = y - mDownY;

                Log.i(TAG, "dispatchTouchEvent: " + mDownY + " " + y);
                mVelocityTracker.addMovement(ev);
                mVelocityTracker.computeCurrentVelocity(1000);


                if ((mDownY >= (layoutPVideo.getHeight() + layoutPVideo.getMarginTop())) && dDownY > 0 && layoutPVideo.getHeight() < originalHeight + 600 && (isList2Top)) {
                    //判断点击的范围，及当前视频尺寸大小。listview是否已经滑到顶部

                    layoutPVideo.setHeight((int) (layoutPVideo.getHeight() + dDownY));
                    Log.i(TAG, "dispatchTouchEvent: xia " + dDownY);
                    mDownY = y;
                    return true;
                } else if ((mDownY >= (layoutPVideo.getHeight() + layoutPVideo.getMarginTop())) && dDownY <= 0 && layoutPVideo.getHeight() >= originalHeight) {
                    //调整视频view 高度
                    layoutPVideo.setHeight((int) (layoutPVideo.getHeight() + dDownY));
                    //能够加个弹性动画显得更流畅
                    Log.i(TAG, "dispatchTouchEvent: shang " + dDownY);
                    mDownY = y;
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                float yVelocity = VelocityTrackerCompat.getYVelocity(mVelocityTracker,
                        pointerId);
                Log.i("VelocityTrackerCompat", "Y velocity: " +
                        yVelocity);
                
                if (yVelocity >= 5685 && layoutPVideo.getHeight() < originalHeight + 600) {
                    //判断惯性加速度根据惯性加速度进行引导视频大小到底部
                    headMoveToMax();
                } else {
                    Log.i(TAG, "headMoveToMax: not come in" + " " + (layoutPVideo.getHeight() < originalHeight + 600));
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                mVelocityTracker.recycle();
                break;
        }


        return super.dispatchTouchEvent(ev);
    }

复制代码

如何动态的跳转左右边距及视频宽高

这里我用了一个包装类拿到当前view的layoutParams，而后经过touchEvent 拿到滑动的值来动态的修改当前view 的宽高和margin值，这个代码我就补贴了，就是set get方法。

第一步下滑调整margin的左右上下，及videoview 的高度。
第二步继续下滑调整videoview的宽度
第三步下滑隐藏总体view

private void updateVideoView(int m, int originY) {

        canHide = false;
        if (mDetailView.getHeight() == 0) {
            if (layoutPVideoView.getMarginRight() <= videoWidthPx && 0 < originY) {


                int value = layoutPVideoView.getMarginRight() + originY * 9;//加速缩小
                if (value > videoWidthPx) {
                    value = (int) videoWidthPx;
                }
                float percent = (videoWidthPx - value) / videoWidthPx;
                if (0 > percent) {
                    percent = 0.f;
                }
                int videoHeight = (int) (videoMinHeightPx * (1 - percent));
                int videoMTop = (int) (allMinScrollY * (1 - percent));
                layoutPVideo.setMarginTop((int) (allScrollY + videoMTop));
                layoutPVideo.setHeight((int) (videoHeightPx - videoHeight));
                layoutPVideoView.setMarginRight(value);



                canHide = true;
                Log.i(TAG, "updateVideoView: "+isBottomMax);
                if (layoutPVideoView.getMarginRight() >= videoWidthPx) {
                    if (isBottomMax) {

                        layoutPVideo.setMarginTop(m);
                        float v = m - (allScrollY + allMinScrollY);
                        mVideoView.setAlpha(1.0f - v / swipePx2Dismiss);

                        if (v >= swipePx2Dismiss) {
                            setVisibility(INVISIBLE);
                            mVideoView.setAlpha(1f);
                        }
                    }
                }

                return;
            }//缩小视频右边距


            if (layoutPVideoView.getMarginRight() >= 0 && 0 > originY) {
                int value = layoutPVideoView.getMarginRight() + originY * 9;
//                if (0 > value) {
//                    value = 0;
//                }
                float percent = (videoWidthPx - value) / videoWidthPx;
                if (0 > percent) {
                    percent = 0.f;
                }
                int videoHeight = (int) (videoMinHeightPx * (1 - percent));
                int videoMTop = (int) (allMinScrollY * (1 - percent));
                layoutPVideo.setMarginTop((int) (allScrollY + videoMTop));
                layoutPVideo.setHeight((int) (videoHeightPx - videoHeight));
                layoutPVideoView.setMarginRight(value);
                return;
            }//放大视频右边距

            if (layoutPVideoView.getMarginRight() >= 0 && originY > 0) {

                return;
            }//最小化阶段


        }


        if (layoutPVideo.getMarginTop() <= 0 && originY < 0) {
            m = 0;
        }//最大化阶段

        float percent = (allScrollY - m) / allScrollY;
        if (0 > percent) {
            percent = 0;
            return;

        }

        int videoHeight = (int) (originalHeight - (originalHeight - videoHeightPx) * (1 - percent));
        int listHeight = (int) ((originListHeight) * (percent));
        layoutPVideo.setMarginTop(m);
        layoutPVideo.setHeight(videoHeight);
        layoutPList.setMarginBottom((int) (marginBottomPx * (1 - percent)));
        layoutPList.setHeight(listHeight);
        layoutPCoverView.getView().setAlpha((1 - percent));
        layoutPContainer.setMarginRight((int) (marginRLPx * (1 - percent)));
        layoutPContainer.setMarginLeft((int) (marginRLPx * (1 - percent)));
        int mr = (int) ((1f - percent) * marginPx); //VideoView右边和详情View 上方的margin
        layoutPVideo.setZ(mr / 2);//这个是Z轴的值，悬浮效果

    }

复制代码

ending

花了个把小时写的东西，但愿给老铁们带来的是知识的储备而不是时间的浪费。不早了不早了下班了，想要代码的老铁能够私信留言都行。

手把手教你撸最新Youtube视频 拖拽动画效果

前言