V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
licraft
V2EX  ›  Android

Android 实现反人类音量滑块

  •  
  •   licraft · 2017-06-18 00:59:30 +08:00 · 6754 次点击
    这是一个创建于 2475 天前的主题,其中的信息可能已经有所发展或是发生改变。

    FuckingVolumeSlider

    源码 GitHub 地址,设计来自于该贴内

    前几天看到一个反人类音量滑动条设计的有趣帖子原帖地址,网友设计了各种反人类的滑动条(这些脑洞我是服气的!),于是我抽空在 android 上面实现了一个其中比较有趣的设计,点击喇叭弹射出去圆点控制音量。在写这个控件的时候遇到的一些知识点分享给大家。视频演示地址

    效果图:

    使用方法

    mSliderView = (VolumeSliderView) findViewById(R.id.sliderView);
    
    mSliderView.setOnVolumeSlideListener(new VolumeSliderView.OnVolumeSlideListener() {
        @Override
        public void result(int volume) {
            mTextView.setText("音量: " + volume);
        }
    });
    

    原理

    1. 喇叭底座与声波绘制

    由效果图可以看出,喇叭底座的右上角和右下角为圆角,其余的角都不是圆角。非圆角通过 path.lineTo 可以非常容易的画出,画圆角折线有很多种方法,其中最简单的就是给画笔 paint 添加 CornerPathEffect 就可以轻松的画出圆角,我开始也是这么做的(too yang too simple) 。在这个控件的场景中这么做并不合理,因为后面还要在喇叭的区域绘制水波纹,而 PathEffect 只是让画笔绘制出的效果看着像圆角,水波纹是绘制在底座的 path 上的,而底座的 path 并不是圆角,所以绘制完水波纹之后圆角被填充回了直角。

    还有什么简单办法可以绘制圆角折线呢?那就是使用贝塞尔曲线了,可以用二阶贝塞尔曲线来作为圆角完美解决,要想完美衔接需要两个衔接的折线点分别和控制点相对于贝塞尔曲线的起点和终点是对称的:

    整个底座也是相对于一个中轴是对称的,所以只要选取出上半部或者下半部的点就可以通过中轴来算错所有的点。

    声波到底怎么画出来呢?声波的头部也是圆角,刚开始的时候我简单的以为通过 path.addArc() 画出一个圆弧,然后圆弧的 paint 设置一个宽度和 Paint.Cap.ROUND 就可以完成,其实这种方法也会和后面画水波纹的时候冲突的,因为圆弧的 path 所围成的区域并不是一个弧线区域,这都是 paint 宽度造成的视觉效果。

    后来我在这篇文章里得到了启发 Android SmileyRating,声波可以用四条曲线围起来啊,左右两条二阶贝塞尔曲线,上下两条三阶贝塞尔曲线,一条声波通过 10 个点就可以画出来,而声波也相对于一个中轴对称的,所以只要取出上半部或者下半部的 5 个点就可以确定所有的点。

    2. 水波纹绘制与旋转

    水波纹的绘制用到 canvas.clipPath() 方法把喇叭的 path 裁剪出来再绘制圆形水波纹就可以了。旋转是对喇叭的 path 执行 Matrix 旋转操作。

    //clip
    canvas.clipPath(mDrawPath);
    canvas.drawCircle(mSpeaker.getRotationX(), mSpeaker.getRotationY(), mRippleRadius, mRipplePaint);
    //matrix rotate
    mRotationMatrix.preRotate(mDegree, mSpeaker.getRotationX(), mSpeaker.getRotationY());
    mDrawPath.addPath(mSpeakerPath, mRotationMatrix);
    

    球的运动曲线

    其实球的运动曲线不是抛物线,而是一条二阶贝塞尔曲线,通过调整控制点的位置来达到和抛物线类似的效果。

    21 条回复    2017-06-19 09:37:34 +08:00
    zhengjian
        1
    zhengjian  
       2017-06-18 02:32:11 +08:00
    这个也把我笑的不行,楼主还真实现了~
    (楼主,我想问下,拿个喇叭可以用图片吗?我不懂安卓开发。。。
    licraft
        2
    licraft  
    OP
       2017-06-18 09:28:12 +08:00
    不能,因为按下去的时候喇叭区域要绘制水波纹,如果是图片的话并不好绘制,而且用图片在性能和设计上也没有自己绘制好
    tomato3
        3
    tomato3  
       2017-06-18 09:42:24 +08:00
    难道不应该用一个一元一次函数来表示 X 轴(考虑弹性的加速度的话就是一个分段函数,先二次再一次),一个一元二次函数来表示 Y 轴的重力??????????? emmmmmm
    librae
        4
    librae  
       2017-06-18 10:11:40 +08:00 via iPhone
    有趣,支持这种认真的反人类方式
    pwcong
        5
    pwcong  
       2017-06-18 11:12:01 +08:00
    我前天看到了😂
    x18960
        6
    x18960  
       2017-06-18 11:13:15 +08:00 via iPhone
    大神😑 自己写的控件
    alwayshere
        7
    alwayshere  
       2017-06-18 11:21:33 +08:00   ❤️ 2
    最终让我笑疯了的还是这个:
    RockOrRoll
        8
    RockOrRoll  
       2017-06-18 11:33:39 +08:00 via Android
    我觉得喇叭完全可以用图片实现,波纹用 shader 实现
    RqPS6rhmP3Nyn3Tm
        9
    RqPS6rhmP3Nyn3Tm  
       2017-06-18 11:34:02 +08:00 via iPhone
    @alwayshere 神经病啊
    xys7326
        10
    xys7326  
       2017-06-18 11:37:44 +08:00
    @alwayshere 神经病啊哈哈哈哈哈哈
    licraft
        11
    licraft  
    OP
       2017-06-18 11:53:28 +08:00
    @RockOrRoll 我之前也考虑过用 shader 绘制水波纹,但是好像不可以,因为 shader 是设置**画笔的渐变效果**,产生的后果就是整个喇叭都被 edgeColor 覆盖
    shijingshijing
        12
    shijingshijing  
       2017-06-18 11:54:05 +08:00   ❤️ 7
    有这个贱么?

    RockOrRoll
        13
    RockOrRoll  
       2017-06-18 11:59:37 +08:00 via Android
    @licraft 不好意思,我表述有问题,其实是两张异色喇叭图叠加,蓝色那张使用 clipPath 绘制
    twoyuan
        14
    twoyuan  
       2017-06-18 12:01:28 +08:00
    😂 技巧娴熟的混蛋
    licraft
        15
    licraft  
    OP
       2017-06-18 12:06:10 +08:00
    @RockOrRoll 叠加一个异色喇叭不久多此一举了嘛。。。。。直接 cllip 喇叭的 path 绘制不一样的颜色不是更直接
    RockOrRoll
        16
    RockOrRoll  
       2017-06-18 12:09:54 +08:00 via Android
    @licraft 问题是这一坨绘制的代码很难维护和自定义啊,当然要炫技是无所谓了
    licraft
        17
    licraft  
    OP
       2017-06-18 12:12:31 +08:00
    @RockOrRoll 维护是比较困难。。。。特别是声波选点和自定义要找出规律来的
    shijingshijing
        18
    shijingshijing  
       2017-06-18 13:12:29 +08:00
    还有几个压箱底的,一并贡献出来:
    https://www.myzaker.com/article/593ea1601bc8e05717000019/
    flowfire
        19
    flowfire  
       2017-06-18 20:55:31 +08:00
    233333 有毒啊我想用
    bramblex
        20
    bramblex  
       2017-06-19 08:04:16 +08:00 via iPhone
    @shijingshijing 简直有毒
    389273716
        21
    389273716  
       2017-06-19 09:37:34 +08:00
    看完我想写个反人类 app
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2950 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:13 · PVG 23:13 · LAX 08:13 · JFK 11:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.