Android模仿快手视频详情页退出动画

转载请注明出处，谢谢：https://blog.csdn.net/HarryWeasley/article/details/89449919

源码地址为：https://github.com/HarryWeasley/KuaishouDemo

首先看快手的动图展示

然后是我做的demo动图效果

前因：作为一个中二中年人，某次机缘巧合之下，下载了快手这个app，然后发现了他这个动画，就觉得这个动画运用的地方挺多的，微信的图片退出动画也是这个，所以决定如何实现该功能。

其实本篇文章的难度并不是很大，主要是解决的一个思路问题。

首先第一个要使用转场动画：

    Intent intent = new Intent(MainActivity.this, DetailActivity2.class);intent.putExtra("url",datas.get(position));startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, v, "sharedView").toBundle());

要在xml中加入

     android:transitionName="sharedView"

转场动画不是本文的重点，不会详细描述。

当我们滑动视图，让视图跟着手指的操作而滑动的时候，可以使用GestureDetector类实现，在onScroll方法中回调，进行滑动操作。

在实现GestureDetector.OnGestureListener方法的时候，一定要将onDown方法的返回值变为true，否则可能onScroll方法不会被执行

视图的变大变小，使用view.setScaleX方式来实现

视图的滚动滑动，使用view.setTranslationX方式来实现

而视图的背景，使用一个自定义的TypeEvaluator来实现

代码如下所示：

  @Overridepublic boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {if (parent == null) {parent = getChildAt(0);}if (viewHeight == 0) {viewHeight = parent.getHeight();}float moveX = e2.getX() - e1.getX();float moveY = e2.getY() - e1.getY();mExitScalingRef = 1;mExitScalingRef = mExitScalingRef - moveY / viewHeight;parent.setTranslationX(moveX);parent.setTranslationY(moveY);parent.setScaleX(mExitScalingRef);parent.setScaleY(mExitScalingRef);if (mExitScalingRef > 1) {//当用户往上滑动的时候frameLayout.setBackgroundColor(mColorEvaluator.evaluate(2 - mExitScalingRef, 0x00000000, 0xFF000000));} else {//当用户往下滑动的时候frameLayout.setBackgroundColor(mColorEvaluator.evaluate(mExitScalingRef, 0x00000000, 0xFF000000));}return false;}

其中mColorEvaluator的实现代码如下所示：

TypeEvaluator<Integer> mColorEvaluator = new TypeEvaluator<Integer>() {@Overridepublic Integer evaluate(float fraction, Integer startValue, Integer endValue) {int startColor = startValue;int endColor = endValue;int alpha = (int) (Color.alpha(startColor) + fraction * (Color.alpha(endColor) - Color.alpha(startColor)));int red = (int) (Color.red(startColor) + fraction * (Color.red(endColor) - Color.red(startColor)));int green = (int) (Color.green(startColor) + fraction * (Color.green(endColor) - Color.green(startColor)));int blue = (int) (Color.blue(startColor) + fraction * (Color.blue(endColor) - Color.blue(startColor)));return Color.argb(alpha, red, green, blue);}};

当我们松开手指，来判断缩小的进度，当小于某个进度值的时候，退出该activity，否则执行返回动画：

  @Overridepublic boolean onTouchEvent(MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_UP) {if (mExitScalingRef < DEFAULT_EXIT_SCALE) {//缩小到一定的程度，将其关闭if (finishListener != null) {finishListener.finish();}} else {//如果拉动距离不到某个角度，则将其动画返回原位置final float moveX = parent.getTranslationX();final float moveY = parent.getTranslationY();final float scaleX = parent.getScaleX();final float scaleY = parent.getScaleY();ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);valueAnimator.setDuration(500);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float p = (float) animation.getAnimatedValue();float animationMoveX = moveX + (0 - moveX) * p;parent.setTranslationX(animationMoveX);parent.setTranslationY(moveY + (0 - moveY) * p);parent.setScaleX(scaleX + (1 - scaleX) * p);parent.setScaleY(scaleY + (1 - scaleY) * p);}});valueAnimator.start();}}return mGestureDetector.onTouchEvent(event);}

为了使该控件更有集成性，我自定义了一个FrameLayout，AnimationFrameLayout

在Activity的xml布局中只是放一个com.example.kuaishoudemo.AnimationFrameLayout控件

然后在onCreate方法中，通过以下的方式，来实现真正的视图

        AnimationFrameLayout frameLayout = findViewById(R.id.frame_layout);//将内部的布局item_linear_layout，放入AnimationFrameLayout中View view = LayoutInflater.from(this).inflate(R.layout.item_linear_layout, frameLayout);frameLayout.setDefaultExitScale(0.8f);ImageView imageView = view.findViewById(R.id.image);String url = getIntent().getStringExtra("url");Glide.with(this).load(url).into(imageView);frameLayout.setFinishListener(new AnimationFrameLayout.FinishListener() {@Overridepublic void finish() {onBackPressed();}});

文章源码地址在上部，具体的源码信息，大家去github下载下来看就可以了，谢谢。

Android模仿快手视频详情页退出动画相关推荐

Android模仿淘宝详情页界面
话不多说-先上效果图: 图1中主要需要实现的效果: 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 Android模仿淘宝详情页界面文件:url80. ...
android 卡片放大变详情页,ConstraintLayout动画实现布局卡片式滑动放大缩放
ConstraintLayout(约束布局)是Android Studio 2.2中主要的新增功能之一,Android studio升级到2.3版本之后,不管是新建Activity或fragment, ...
android动画知乎,Android模仿知乎的回答详情页的动画效果
废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限, ...
android 自定义 theme,Android使用Theme自定义Activity进入退出动画的方法
本文实例讲述了Android使用Theme自定义Activity进入退出动画的方法.分享给大家供大家参考,具体如下: 有没有觉得Activity的默认动画太快了或者太难看了.. 我原来使用Activi ...
网站视频详情页-网站-实践-scrapy框架
文章目录 1 创建项目 2 目标内容 3 Spider初始化 3.1 域名起始页 3.2 起始页跳转详情页 4 测试 4.1 robots.txt报错 4.2 设置header 5 后记 1 创建项目 ...
转载 Android仿今日头条详情页实现
转载自@ice_Anson Android仿今日头条详情页实现源码地址: Android仿今日头条详情页实现 github源码地址动态图最近项目有个需求,需要实现一个和今日头条新闻详情页一样的体 ...
H5+JS+CSS模仿JD商品详情页放大镜效果
源码下载:H5+JS+CSS模仿JD商品详情页放大镜效果-Javascript文档类资源-CSDN下载适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果,可以熟练掌握鼠标经过和鼠标移动事件更 ...
Android模仿淘宝语音输入条形动画,录音动画自定义View
Android模仿淘宝语音输入条形动画自定义View,类似柱状音频,折线音频,音乐跳动,音频跳动,录音动画,语音输入效果地址: https://github.com/xfans/VoiceWaveV ...
android 卡片放大变详情页,ZoomHeader 神交互！饿了么 imageView 放大变为详情页 @codeKK Android开源站...
不是共享元素!不是共享元素!不是共享元素!重要的话说三遍.共享元素不可以随手指移动的. 先吐槽下饿了么.不提示左右可以滑动.我还是无意中发现的.不提示我怎么知道可以滑动?? 这是一个模仿饿了么详情页的 ...

Android模仿快手视频详情页退出动画

Android模仿快手视频详情页退出动画相关推荐

最新文章

热门文章