Android-->模仿QQ7.0底部导航效果
来源:互联网 发布:qq三国js卡79怎么赚钱 编辑:程序博客网 时间:2024/06/05 03:47
来一波效果图
有没有一种蠢蠢欲动的想法? 反正我已经动了.
分析一波
1:选中状态, 和未选中状态显示的图片不一样. 这个简单:一个Boolean成员变量控制.
2:当手指360°滑动的时候,图片会跟随移动.这个就是核心了, 需要计算手指距离图片中心的角度, 然后计算出偏移的dx,dy值.
3:细心的你, 可能已经发现了, 笑脸其实并不是相对滚动的, 是有滚动差的. 这个可以在步骤2计算的dx,dy中做一些放大操作就行.
4:当第一次,未选中状态点击的时候, 有一个缩放效果. 这个简单,就用一个动画可以的;
注意:以下代码使用kotlin编写,如果你还不会, 点击传送门去学习吧!
只针对上述步骤2做详解, 其他的太简单了:
override fun onTouchEvent(event: MotionEvent): Boolean { super.onTouchEvent(event) //这里调用super的目的是,为了支持一些默认效果. 比如:onClickListener, 如果你没有调用super,那么onClickListener是不会回调的哦. 还有就是:如果你使用了background属性,那么background属性的selector也是不会有效果的哦. val eventX = event.x val eventY = event.y when (MotionEventCompat.getActionMasked(event)) { ACTION_DOWN -> { scaleAnimation.cancel() if (!mSelected) { scaleAnimation.start()//当第一次未选中的时候点击, 播放缩放动画. 为了极致的模仿QQ效果而存在. } } ACTION_MOVE -> { downX = eventX downY = eventY //计算出, 当前手指距离图片中心的距离. val dx = downX - imageCenterX val dy = downY - imageCenterY var atan = Math.atan((dy / dx).toDouble()) //拿到角度, 此函数返回的角度是弧度制的. val degrees = Math.toDegrees(atan) //这个方法可以把弧度制的角度, 转换成角度制.如果30°之类的. if (lastDegrees != null && Math.abs(lastDegrees!! - degrees) < 5) { //如果手指移动时的夹角小于5°,不处理...防止图片抖动. } else { lastDegrees = degrees //这是一个很关键的点, 因为理想状态下, 我们想要的角度范围应该是0-360° //而你手指转一圈, 函数返回结果却是2个-90°-90°的取值范围. //所以...数学当中的四象限你还记得么? if (dx < 0) { atan -= Math.PI //注意 atan是弧度制的角度哦, 因为cos函数,sin函数,都要求是弧度制的参数. } //有了角度之后, 就可以计算出三角形的邻边和对边了. 这2个值, 就是图片需要偏移中心点的距离. mDrawOffsetX = (mMaxMoveOffset * Math.cos(atan)).toFloat() mDrawOffsetY = (mMaxMoveOffset * Math.sin(atan)).toFloat() //为了产生视差效果, 笑脸的偏移大小更大一点就行了. mSubDrawOffsetX = (mSubMaxMoveOffset * Math.cos(atan)).toFloat() mSubDrawOffsetY = (mSubMaxMoveOffset * Math.sin(atan)).toFloat() //重绘....这个方法你不懂,就可以离职了. postInvalidate() } } ACTION_UP -> { //恢复默认值 onTouchUp() } ACTION_CANCEL -> { onTouchUp() } } return true } private fun onTouchUp() { downX = 0f downY = 0f mDrawOffsetX = 0f mDrawOffsetY = 0f mSubDrawOffsetX = 0f mSubDrawOffsetY = 0f lastDegrees = null postInvalidate() }
override fun onDraw(canvas: Canvas) { canvas.save() //绘制图片 if (drawDrawable != null) { //下面2行代码, 是为了缩放做准备的, 首先移动到图片的中心, 然后再进行缩放处理. canvas.translate((measuredWidth / 2).toFloat(), measuredHeight / 2 - subHeight / 2 + imageHeight / 2) canvas.scale(animScale, animScale) canvas.save() canvas.translate(-imageWidth / 2 + mDrawOffsetX, -imageHeight / 2 + mDrawOffsetY) drawDrawable!!.draw(canvas) canvas.restore() //笑脸的绘制. if (subDrawDrawable != null) { canvas.save() canvas.translate(-imageWidth / 2 + mSubDrawOffsetX, -imageHeight / 2 + mSubDrawOffsetY) subDrawDrawable!!.draw(canvas) canvas.restore() } } canvas.restore() }
源码地址
联系作者
请使用QQ扫码加群, 小伙伴们在等着你哦!
关注我的公众号, 每天都能一起玩耍哦!
阅读全文
6 0
- Android-->模仿QQ7.0底部导航效果
- Android-->模仿360底部导航按钮
- 模仿手机QQ底部导航栏Icon拖拽效果
- 模仿google导航效果
- JFTabBar android强大的底部导航栏框架 (微信底部导航栏效果)
- Android 实现类似微信页面底部导航效果
- android仿微信底部导航栏图标渐变效果
- android底部导航栏中间凸起效果的制作
- Android 底部导航条切换高亮的效果实现
- android效果TapBarMenu绘制底部导航栏的使用方式
- 实现android studio底部导航栏四个标签的效果
- Android利用BottomNavigationView默认底部导航去掉滑动隐藏效果
- TabHost底部导航知识回顾之模仿微信导航
- android底部导航栏
- Android 通用底部导航
- android底部导航栏
- android之底部导航
- android 底部导航总结
- Keil MDK自带神器,Configuration
- 167. Two Sum II
- Linux VFS分析(一)
- Day7:系统服务(daemons)
- ToolBar的title居中以及一些注意事项
- Android-->模仿QQ7.0底部导航效果
- LinkedList和ArrayList的区别
- 数据预测与估算算法(一)---产生式模型与判别式模型
- C++ 大写字母转换成小写
- 关于eclipse导入maven父子项目的问题
- React在Java、Eclipse中使用
- HashSer
- python中decimal,datetime数据格式化显示
- request的getParameter和getAttribute