摘要:为了避免用户手指一按下悬浮按钮就移动,我们可以设置一个值,当手指滑动的距离超过它时才视为有效的滑动。手指抬起时则延迟再让悬浮图案还原。
1、需求分析及思路分析
今天新鲜出炉的需求来了:产品要在首页上放置一个悬浮图标,这个图标既起着宣传的作用(图标上面有活动标题),也是一个按钮,点击之后能跳转到某个详情页面。而且为了用户体验更好,在滑动界面时,这个图标要乖乖地藏起来,不能影响用户操作。我仔细分析了一下,哟,这不就是中午点外卖时用的饿了么上面的购物车按钮么?
用户没有触摸界面时,购物车就正常悬浮在右下角,当界面滑动时,它就自觉地将自身的一半缩到屏幕之外,而且会变得半透明,不再遮挡底下的内容。到了这一步,相信大家都会想到是用触摸事件来实现了。
@Override public boolean dispatchTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: break; } return super.dispatchTouchEvent(event); }
触摸事件有三种,每一步的作用和实现的效果都不一样:
手指按下(ACTION_DOWN):用户手指在屏幕上按下时,记下此时的y坐标作为起始y坐标(startY);
手指抬起(ACTION_UP):获取此时的坐标作为结束坐标与
手指滑动(ACTION_MOVE):根据手指滑动的距离
2、项目创建及布局编写创建一个新项目,MainActivity的布局如下:
右下角的ImageView就是我们的主角,图标是我自己找的购物车图标。为了模拟界面滑动,我在底下简单放了一个ListView,并填充了一些数据。
public class MainActivity extends AppCompatActivity { private ListView listView; private ImageView ivCart; private Listtitles = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initData(); initView(); } private void initData() { for (int i = 0; i < 60; i++) { titles.add(new StringBuffer("这是一条数据").append(i).toString()); } } private void initView() { listView = (ListView) findViewById(R.id.listView); ivCart = (ImageView) findViewById(R.id.iv_cart); listView.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,titles)); } }
此时的效果如下:
布局写完,下面就来实现我们想要的效果了。
悬浮按钮的动画效果很简单,就俩:
位移动画:悬浮按钮向右平移,直至一半在屏幕之外;
渐变动画:悬浮按钮在位移的同时逐渐变得半透明,此处将透明度设为0.5.
3.1 位移动画首先我们要明确悬浮按钮的位移距离,如下图所示:
悬浮按钮的总位移等于它的右侧到右边屏幕的距离(蓝线),再加上它的半径(紫线)。半径我们可以用
getMeasuredWidth获取它的宽度再除于2,那么蓝线的长度呢?
我们无法直接获取控件右侧到右边屏幕的距离,但是我们可以换个思路,先获取整个屏幕的宽度,再减去按钮右侧到左边的距离就行了,而后者可以使用getRight轻松得到。获取手机屏幕宽高可以使用下面的方法:
private int[] getDisplayMetrics(Context context) { DisplayMetrics mDisplayMetrics = new DisplayMetrics(); ((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics); int W = mDisplayMetrics.widthPixels; int H = mDisplayMetrics.heightPixels; int array[] = {W, H}; return array; }3.2 渐变动画
渐变动画就比较简单了,只需要设置起始透明度和结束透明度即可。
3.3 动画集合两种动画是同时开始和结束的,我们可以设置一个动画集合:
private void hideFloatImage(int distance) { isShowFloatImage = false; //位移动画 TranslateAnimation ta = new TranslateAnimation( 0,//起始x坐标,10表示与初始位置相距10 distance,//结束x坐标 0,//起始y坐标 0);//结束y坐标(正数向下移动) ta.setDuration(300); //渐变动画 AlphaAnimation al = new AlphaAnimation(1f, 0.5f); al.setDuration(300); AnimationSet set = new AnimationSet(true); //动画完成后不回到原位 set.setFillAfter(true); set.addAnimation(ta); set.addAnimation(al); ivCart.startAnimation(set); }
动画发生之后不需要归位,所以记得setFillAfter要设为true。
3.4 悬浮按钮回归原位的动画前面我们讨论的都是界面滑动,按钮向右隐藏的动画,而用户的手指离开屏幕时,悬浮按钮是要回归原位,这时候的动画效果就跟之前的相反了,所以只需小小修改一下参数即可:
private void showFloatImage(int distance) { isShowFloatImage = false; //位移动画 TranslateAnimation ta = new TranslateAnimation( distance,//起始x坐标 0,//结束x坐标 0,//起始y坐标 0);//结束y坐标(正数向下移动) ta.setDuration(300); //渐变动画 AlphaAnimation al = new AlphaAnimation(1f, 0.5f); al.setDuration(300); AnimationSet set = new AnimationSet(true); //动画完成后不回到原位 set.setFillAfter(true); set.addAnimation(ta); set.addAnimation(al); ivCart.startAnimation(set); }
注意一下这里的位移动画的起始坐标。由于补间动画的特性,动画发生位移之后,移动的只是控件的内容,而不是控件本身,所以我们要以控件所在位置为坐标原点,而不是发生位移后的内容!故这里的起始坐标是水平移动的距离,结束坐标是回到坐标原点,也就是0。
4、监听手指触摸事件分析完动画效果之后,我们现在就要来调用了,前面已经说过了是在触摸事件中监听,那么好的,我们现在就将触摸事件和动画的代码集合起来吧:
private float startY; @Override public boolean dispatchTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: startY = event.getY(); break; case MotionEvent.ACTION_MOVE: if (Math.abs(startY - event.getY()) > 10) { hideFloatImage(moveDistance); } startY = event.getY(); break; case MotionEvent.ACTION_UP: new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { runOnUiThread(new Runnable() { @Override public void run() { showFloatImage(moveDistance); } }); return false; } }).sendEmptyMessageDelayed(0, 1500); break; } return super.dispatchTouchEvent(event); }
手指按下时,我们只需要获取到起始坐标。这里要注意的是我们的手指在手机屏幕上的触摸是一个面(手指的与屏幕的接触面积)而不仅仅是一个点,所以MotionEvent.ACTION_MOVE是很容易就触发的。为了避免用户手指一按下悬浮按钮就移动,我们可以设置一个值,当手指滑动的距离超过它时才视为有效的滑动。手指抬起时则延迟1.5s再让悬浮图案还原。当然,不要忘了动画是要主线程中进行的。
运行一下,就可以看到如下的效果了:
5、优化动画效果到现在我们差不多实现了我们想要的效果了,但是如果你试着快速滑动一下就会发现一个可怕的问题:
频繁滑动时动画就会频繁地触发,甚至你快速滑动几次后,悬浮按钮看起来就像抽了风一样。这显然是不行的,我们接下来就做如下的优化:
当悬浮按钮处于显示状态时,不会触发显示动画,处于隐藏状态时,不会触发隐藏动画;
当手指按下抬起,延时执行显示动画的1.5s内,如果用户再次按下抬起手指,则中止之前的动画,并重新计算延迟时间。
优化1这个我们只需要加一个布尔值isShowFloatImage来控制即可。每次调用动画判断一下。
优化2之前是通过Handler发送延迟消息来执行动画的,这样无法控制动画的中止。那么现在,我们就需要用另外一种方法来控制显示动画了。这里我选择了Java的计时器Timer。当用户的手指抬起时,我们记下当前时间upTime,下次用户再次按下手指时将当前时间与upTime比较,差值小于1.5s的话则中止动画。
完成上面两步优化之后的代码如下:
private Timer timer; /**用户手指按下后抬起的实际*/ private long upTime; @Override public boolean dispatchTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: if (System.currentTimeMillis() - upTime < 1500) { //本次按下距离上次的抬起小于1.5s时,取消Timer timer.cancel(); } startY = event.getY(); break; case MotionEvent.ACTION_MOVE: if (Math.abs(startY - event.getY()) > 10) { if (isShowFloatImage){ hideFloatImage(moveDistance); } } startY = event.getY(); break; case MotionEvent.ACTION_UP: if (!isShowFloatImage){ //开始1.5s倒计时 upTime = System.currentTimeMillis(); timer = new Timer(); timer.schedule(new FloatTask(), 1500); } break; default: break; } return super.dispatchTouchEvent(event); } class FloatTask extends TimerTask { @Override public void run() { runOnUiThread(new Runnable() { @Override public void run() { showFloatImage(moveDistance); } }); } }
再次运行一下,就会发现动画不会频繁地触发,比之前的体验更好了。
GitHub源码
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/14154.html
摘要:项目地址邮箱求工作杭州项目介绍来公司实习,由于技术栈原因,学习一下,以此项目来做练习。项目暂时只能在开发环境运行。 项目地址 https://github.com/Gitjinfeiy... 邮箱 1912144808@qq.com(求工作 杭州) 项目介绍 来公司实习,由于技术栈原因,学习一下angular2,以此项目来做练习。 项目暂时只能在开发环境运行。...
摘要:知乎和简书的夜间模式实现套路掘金,大家好,我是。记得上一篇讲打造浪漫的表白程序掘金几年前,看到过有个牛人用绘制了浪漫的爱心表白动画。浪起来的下拉刷新掘金本文章介绍的组件为参考大名鼎鼎的开源的一个下拉刷新逻辑实现,形式均为个人原创。 这交互炸了:饿了么是怎么让Image变成详情页的 - 掘金晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。 本文同步自wi...
摘要:前言这是我第一个基于的项目作品,目的很简单,学以致用,将之前的前端知识积累加上目前流行的前端框架,以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象,然后赋值给这里加上即提供了一种可扩展的机制,倘若原来的属性中有预定义的其他属性。 前言 这是我第一个基于 Vue 的项目作品,目的很简单,学以致用,将之前的前端知识积累加上目前流行的前端框架,以项目的形式展现出来。 源代码:ht...
摘要:关于最友好的文章背压掘金前言背压可能是所有想要深入运用的朋友必须理解的一个概念。一概述这两天时间动手撸了个视图扩散切换效果的控制器,兼容至,更方便我们在视图切自定义控件之像一样使用添加和掘金添加和,实现像和一样的和和方法。 Android仿探探堆叠滑动控件(支持方向控制,内嵌入RecyclerView) - Android - 掘金堆叠滑动控件,类似于社交软件探探的效果,并增加以下扩展...
阅读 657·2021-09-22 15:18
阅读 980·2021-09-09 09:33
阅读 2617·2019-08-30 10:56
阅读 1059·2019-08-29 16:30
阅读 1336·2019-08-29 13:02
阅读 1326·2019-08-26 13:55
阅读 1510·2019-08-26 13:41
阅读 1802·2019-08-26 11:56