比QQ更炫酷的'选项弹窗'动画

作者: Zhaoss | 来源:发表于2016-11-14 16:32 被阅读4149次

    源码下载,求点star

    (文章的意义在于分享技术, 所以这里会重点讲下原理和实现思路, 希望大家看完可以理解实现思路, 这样如果项目有需求,可以随时增删功能, 如果出了bug也更易修改)

    在某个版本更新时, UI要求弹出选项框类似于下面的效果:

    对, 就是qq这种弹出方式, 而UI给的效果图实际是这样的:

    恩, 我们UI的审美认为下面加一层模糊效果会比较好看, 我看了之后认为没什么问题, 就是多了一层模糊效果而已, 但做到后面才发现有的很大的坑在等我.

    首先我做出来的自定义view是希望全局只要调一个方法就可以用的, 就像popupwindow那样, 所以我的思路是初始化整个布局, 然后以Toast的方式添加到屏幕最前端.

    所以第一步: 初始化整个弹窗布局

    第二步: 这里比较重要了, 当点击button, 弹出选项框的时候, 具体做哪些事情

    到这里我们所有操作就都完成了 大家是不是感觉很简单, 嘿嘿嘿, 最难的坑其实是模糊图片那里, 因为我们是当用户点击弹出按钮的时候动态模糊的, 所以效率就很重要, 下面是我对activity视图bitmap的处理:

    当用户点下按钮时,我们需要立刻就将模糊后的图片显示出来, 下面是我的模糊图片代码:

    android里面的高斯模糊我大概总结了一下 基本有三种, 优缺点都有, 我用的是系统推荐的, 速度比较快,而且也简单, 但只能支持android版本17以上, 但现在手机用android4.2以下的估计也很少了.

    第二种就是利用glide自定义类继承BitmapTransformation来实现在加载图片时模糊图片,但和第一种差不多,也要android版本17以上才能用

    第三种就是用java层的代码, 手动算出像素值, 因为图片处理的代码逻辑都是用java实现的, 所以效率极差, 不推荐.

    最后在说一下那个弹出蠕动的动画, 很简单20行代码就ok了, 我是用属性动画写的, 让弹窗view的宽和高的规模从0到1, 然后在从1到0.95, 这样就造成了一个弹出的动态效果, 很easy吧

    大功告成出来的效果就是这样的啦

    源码下载,求点star (ps: 如果我分享的技术对您有所帮助, 或者解决了您的一些问题, 请点一下我喜欢和github上的star哦!!! github主页 我会经常在上面分享我工作中遇到的问题和酷炫的特效实现的, 关注一下啦)

    相关文章

      网友评论

      • Master_文:有个bug,当全屏的时候,整个页面会向下移动,会有叠影存在
      • muyrk:android studio代码是什么字体,感觉好漂亮
        Zhaoss:@我是孙子 猜对了 是mac
        muyrk: @我是孙子 你是Mac吧!
        Zhaoss:android studio默认的scheme就是这个字体
      • 碧海鱼龙:大神,做的很好!我想问下大神,https://xituqu.com/624.html,第五个app的模糊效果怎么做的 :smiley:
        Zhaoss:@最后的大魔王 哦 看到了 点击加号之后的背景模糊? 和我的不是差不多吗
        碧海鱼龙:@Zhaoss 大神 是第五个 5. Curl by Nicolas Girard,给人一种干净利落的感觉,特别cool!
        Zhaoss: @最后的大魔王 你是说健身的那个图,飘过来的几块文字,有3个是模糊的那个吗?你可以把那几个文字块单独看成独立view,按照需要单独模糊就可以了
      • 时光与梦s:效果很赞
        Zhaoss: @Wey_Ye 谢谢
      • 刘英滕:其实效果最早是 Facebook 用的
        Zhaoss: @刘英滕 说的是蠕动动画吧,恩,facebook还出了一个第三方控件专门实现这个效果,我看自己实现起来也不难就自己写了
      • 2015哈哈哈:确实不错 :+1:
        Zhaoss:@伟伟and莉莉 谢谢支持
      • NiceStars:不错
        Zhaoss:@NiceStars 谢谢😊

      本文标题:比QQ更炫酷的'选项弹窗'动画

      本文链接:https://www.haomeiwen.com/subject/qianjttx.html