前言

最近有个需求，要做成今日头条的效果，我就下载了今日头条的app看了看，发现效果简单，体验也还不错，最近几天发现QQ空间安卓版也有这个效果，当然，牛逼的微信早就有这个效果了，而且微信的图片随着手势下拉是图片会缩放的并且有入场和退出的动画，交互比头条和QQ的多了两个动画，其实我觉得交互越简单对于用户来说越好，我反而觉得头条和QQ空间的效果不错，所以今天就来实现下今日头条的这个效果.

今日头条和QQ空间的效果图

我最终实现的效果图

需求分析

思考一下，其实不难，总共就没有几个动画，我是在项目用的缩放控件上改的，这样项目改动最小，这样改一个类所有涉及到的类就全都改了.

1.可以看到头条点击图片时首先有淡入淡出的动画，这个就用overridePendingTransition 转场动画就行，安卓2.0以上就支持，在startActivity() 或者 finish后面加上转场动画 fade_in,fade_out,淡入淡出的效果就实现了.

2.头条和QQ空间的大图浏览时，双手放大时是不会拖动该图片的，因此，当图片没有被放大时，同时只有一个手指才会触发上下拖动这个事件.

3.可以看到上下拖动状态时，背景透明度跟着改变，首先大图浏览模式下的类Activity必须是透明的主题，这个效果才能实现，即把配置文件中把Activity的主题使用透明的主题即可.

4.手势拖动使用ViewHelper类，即操作View动画类的方法集合，gradle里面远程依赖com.nineoldandroids:library:2.4.0 即可.

核心代码

根据上述的分析，我想大家都跃跃欲试了，其实真的不难，最好都代码编写下，给自己的项目也加个效果.

1.首先要让当前View动起来

根据上面的分析，用到了ViewHelper.其上下拖动的触发条件是当前的scale 没有放大，同时fingerTouch = 1即一个手指的情况下，触发拖动的事件.if(currentScale <= minscale() && touchCount == 1) ----> onSingleActionMove(event);

2.onSingleActionMove方法

这里边主要是透明度的算法，透明度是从0到1，view移动的范围是MAX_TRANSLATE_Y 这里透明度的计算我又加上了图片高度，防止透明度的跨度过大，View的移动距离[0,MAX_TRANSLATE].

则百分比 percent = 移动的距离(mTranslateY) / MAX_TRANSLATE_Y;

同理 alpha 透明度的范围是[1,0]，即从不透明到透明的过程，则变量为 mAlpha = 1 - percent;

则代码编写如下:

private void onSingleActionMove(MotionEvent event) {isOneFingerDrag = true;float moveX = event.getRawX();float moveY = event.getRawY();mTranslationX = moveX - mDownX + mLastTranslationX;mTranslationY = moveY - mDownY + mLastTranslationY;float percent = Math.abs(mTranslationY / (MAX_TRANSLATE_Y + sHeight));Log.e(TAG, "percent= " + percent + "translationY= " + mTranslationY + "Max_Y = " + MAX_TRANSLATE_Y);LinearLayout linearLayout = (LinearLayout) getParent();float mAlpha = (1 - percent);if (mAlpha > 1) {mAlpha = 1;} else if (mAlpha < 0) {mAlpha = 0;}Log.e(TAG, "alpha = " + mAlpha);if (null != linearLayout) {linearLayout.getBackground().mutate().setAlpha((int) (mAlpha * 255));}ViewHelper.setTranslationY(this, mTranslationY);}

3.callBack 回归原位的动画方法

当移动距离mTranslateionY 小于可退出的最大值时，则让其回归原位,其移动范围为[mTransltionY,0]

使用ValueAnimator 线性回归，编写代码如下:

private void resetCallBackAnimation() {ValueAnimator animatorY = ValueAnimator.ofFloat(mTranslationY, 0);animatorY.setDuration(DURATION);animatorY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {if (isAnimate) {mTranslationY = (float) valueAnimator.getAnimatedValue();mLastTranslationY = mTranslationY;ViewHelper.setTranslationY(SubsamplingScaleImageView2.this, mTranslationY);}}});animatorY.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {isAnimate = true;}@Overridepublic void onAnimationEnd(Animator animation) {if (isAnimate) {mTranslationY = 0;LinearLayout linearLayout = (LinearLayout) getParent();if (null != linearLayout) {linearLayout.getBackground().mutate().setAlpha(255);}invalidate();reset();}isAnimate = false;}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});animatorY.start();}

4.退出并关闭当前界面动画

当mTranslationY > MAX_TRANSLATE_Y 时则从当前位置退出，它的运动轨迹为[mTranslationY,getHeight()]

当向上滑动退出时，mTranslationY 为负值，则其运动轨迹为[mTranslationY,-getHeight()];

使用的均是ValueAnimator动画退出.

public void exitWithTranslation(float currentY) {float translationY;float imgHeight = sHeight;if (currentY > 0) {ValueAnimator animDown = ValueAnimator.ofFloat(mTranslationY, getHeight());animDown.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float fraction = (float) animation.getAnimatedValue();Log.e(TAG, "fraction==" + fraction);ViewHelper.setTranslationY(SubsamplingScaleImageView2.this, fraction);}});animDown.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {reset();((Activity) getContext()).finish();((Activity) getContext()).overridePendingTransition(0, 0);}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});animDown.setDuration(DURATION);animDown.setInterpolator(new LinearInterpolator());animDown.start();} else {ValueAnimator animUp = ValueAnimator.ofFloat(mTranslationY, -getHeight());animUp.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float fraction = (float) animation.getAnimatedValue();Log.e(TAG, "fraction==" + fraction);ViewHelper.setTranslationY(SubsamplingScaleImageView2.this, fraction);}});animUp.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {reset();((Activity) getContext()).finish();((Activity) getContext()).overridePendingTransition(0, 0);}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});animUp.setDuration(DURATION);animUp.setInterpolator(new LinearInterpolator());animUp.start();}}

遇到的坑

透明度改变时，当前View的透明度跟着变化，让人头疼的问题.

使用下面代码解决，让其不共享透明度的变化.

 linearLayout.getBackground().mutate().setAlpha(255);

2018.01.18更新

1.使用setScrollY替代setTranslateY优化动画体验.

2.增加仿微信朋友圈下拉的动画效果.

源码下载

欢迎star 和 fork,谢谢！

Android高仿今日头条/QQ空间手势下拉关闭图片效果相关推荐

android 仿写开发者头条,android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
android高仿今日头条 --新闻阅读器
摘要: 开发流程第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 涉及到的知识点有 1.slidingmenu.lib (侧拉菜单包) 使用方法配置以及下载:点击这里实 ...
android高仿今日头条小视频转场切换效果
可以先看看今日头条效果功能分析点击列表上的一个item,该item会放大,最后直接全屏播放小视频,刚开始看上去,以为是个共享元素的转场动画, 后来想到,共享元素要在android 5.0以上支持, ...
android高仿今日头条,高仿今日头条App
采用了MVVM + RAC的方式,对微头条界面使用YYCache 进行了本地缓存效果跟目前最新的今日头条有些地方不一样,因为今日头条最近更新了新版本下面对项目中的一些效果和实现思路做下介绍如果 ...
android 上下滚动文字_android高仿今日头条富文本编辑(发布文章)
前言在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了[richeditor-android](https://github.com/wasabeef/ ...
android 今日头条加载动画,高仿今日头条加载动画
01 每每浏览手机app时,发现有的效果体验不错,作为一位程序员,总想要是自己来做,怎么实现. 今天我们来模仿今日头条的加载动画. 首先我们来看一下我们这个demo最终效果,有图有真相. 高仿今日头条 ...
android如何展示富文本_android高仿今日头条富文本编辑(发布文章)
前言: 在经历了几个月的项目期限.我们遇到了前端发布文章,要用到富文本编辑的功能.在一番衡量下最终用到了richeditor-android第三方框架.实现原理就是通过webView和js实现前端富文 ...
Android 仿今日头条评论时键盘自动弹出的效果
Android 仿今日头条评论时键盘自动弹出的效果:当点击评论时,弹出对话框,同时弹出软键盘,当点击返回键时,将对话框关闭,不只是关闭软键盘. 效果图: 对这个对话框设置一个style效果: < ...
IOS每日精选源码，边缘识别导航条管理高仿今日头条语音查询汇率源码
CIDetector边缘识别超级简单的导航条管理工具EasyNavigation navigationbar 高仿今日头条频道选择弹框 iOS一个比较实用的侧边栏管理器联动tableView,菜单 ...
Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）
前言上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

Android高仿今日头条/QQ空间手势下拉关闭图片效果

前言