Android实现美团外卖底部导航栏动画
作者:甜梦_ 发布时间:2022-09-21 20:09:13
标签:Android,导航栏
体验了一下美团外卖的底部导航栏,感觉动画很流畅,分割线被顶起,还有图标的动画,可能用的lottie,觉得分割线被顶起可以自己写动画,所以试着写了一下 。
想自定义view点击实现动画效果,自定义view的区域一定比背景需要被顶起的线要高,所以布局如下:
开始绘制view,被顶起的曲线分三段,前后两端曲线对称的,用path绘制曲线,中间段绘制贝塞尔曲线。
那么我们分别绘制三段曲线,用ValueAnimator实现效果,
private void initAnim() {
value = startValue;
animator = ValueAnimator.ofInt(startValue, halfValue, endValue);
// animator.setInterpolator(new DecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
value = (int) valueAnimator.getAnimatedValue();
invalidate();
}
});
animator.setDuration(ANIM_TIME);
animator.start();
}
动画执行过程中有个回弹,那么value的变化需要一个中间值,
startValue = 0;
halfValue = -DensityUtils.dp2px(context, 35);
endValue = -DensityUtils.dp2px(context, 25);
在onDraw中绘制曲线代码如下,
rectF = new RectF((((float)width - (float)contentSize) / 2),
lineToTop + value,
(float) width - ((float)width - (float)contentSize) / 2,
height + value);
if (value < 0 ) {
Path path = new Path();
//绘制第一段圆弧
path.moveTo(rectF.left - 20, lineToTop);
float firstCubicHight = ((float) lineToTop - rectF.top) / 4;
float end = (float) lineToTop - firstCubicHight;
path.cubicTo(
rectF.left - 10,
(float) lineToTop - firstCubicHight / 16,
rectF.left,
(float) lineToTop - firstCubicHight / 12,
rectF.left + 10,
end
);
//绘制第二段圆弧
path.quadTo(
rectF.left + contentSize / 2,
rectF.top * 0.9f,
rectF.right - 10,
end
);
//绘制第三段圆弧,和第一段对称
path.cubicTo(
rectF.right,
(float) lineToTop - firstCubicHight / 12,
rectF.right + 10,
(float) lineToTop - firstCubicHight / 16,
rectF.right + 20,
lineToTop
);
Path pathBg = new Path();
pathBg.addPath(path);
pathBg.lineTo(rectF.right + 20, height);
pathBg.lineTo(rectF.left - 20, height);
pathBg.lineTo(rectF.left - 20, lineToTop);
canvas.drawPath(pathBg, paintBg);//绘制白色背景
canvas.drawPath(path, paintBgStroke);//绘制曲线
}
最后在onDraw()中画上图片也用属性动画移动就成功啦。
因为有曲线衔接贝塞尔曲线,感觉弧度有时候改变曲线不是很流畅,大家应该会有更好的办法 欢迎补充!
来源:https://blog.csdn.net/tm1989tm/article/details/103276641
0
投稿
猜你喜欢
- 在开发中常常使用到刷新分页,这里实现一个 RecyclerView 的简单的刷新分页操作,测试效果见文末,实现过程参考如下:实现思路加载更多
- 项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是boo
- 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Interne
- maven的配置文件settings.xml存在于两个地方:1.安装的地方:${M2_HOME}/conf/settings.xml2.用户
- import java.util.regex.Matcher;import java.util.regex.Pattern; /*
- Android 7.0系统在运行应用的时候,对权限做了诸多限制,normal, dangerous, signature, signatur
- 1、创建实体属性标记public class CellAttribute : Attribute {&n
- 一.Worker Thread模式Worker的意思是工作的人,在Worker Thread模式中,工人线程Worker thread会逐个
- 接口的灵活性就在于“规定一个类必须做什么,而不管你如何做”。我们可以定义一个接口类型的引用变量来引用实现接口的类的实例,当这个引用调用方法时
- 功能介绍大家都知道在Spring boot开发过程中,需要在配置文件里配置许多信息,如数据库的连接信息等,如果不加密,传明文,数据库就直接暴
- 问题描述:输入一个链表的头结点,从尾巴到头反过来打印出每个结点的值。首先定义链表结点public class ListNode { &nbs
- TM的作用我们根据源码解读画出了下图,该图示展现了TM在整个Seata AT模式的分布式事务中所起的作用:从上图中可以看出,TM主要有两个作
- 在mybatis中sql是写在xml映射文件中的,如果sql中有一些特殊字符的话,在解析xml文件的时候就会被转义,如若不希望被转义,那该怎
- 在工作中要求将图片上传至本地,如下代码将介绍如何将图片上传至本地准备工作:环境:eclipse4.5-x64,jdk1.7-x64,mave
- 1、线性表定义线性表是最基本、最简单、也是最常用的一种数据结构。线性表(linear list)是数据结构的一种,一个线性表是n个具有相同特
- 前言大家好,我是bigsai,在数据结构与算法中,二叉树无论是考研、笔试都是非常高频的考点内容,在二叉树中,二叉树的遍历又是非常重要的知识点
- 一、什么是抽象工厂模式为创建一组相关或相互依赖的对象提供一个接口,而且无需指定他们的具体类。抽象工厂模式是所有形态的工厂模式中最为抽象和最具
- CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承至FrameLayout,给它设置layout
- 最近重构了一下我的存档框架。我在这里对实现方法进行简单的解析。注意这里主要演示算法,所以,效率上并不是最佳。一个游戏中,可能有成百上千个物体
- 一、堆参数设置-XX:+PrintGC 使用这个参数,虚拟机启动后,只要遇到GC就会打印日志-XX:+UseSerialGC 配置串行回收器