美文网首页
android仿华为充电动画

android仿华为充电动画

作者: wislie_zhu | 来源:发表于2020-03-06 16:09 被阅读0次
    HUAWEI.gif HUAWEI (1).gif

    主要分3个小块: 发射器, 气泡, 圆环

    思路:

    一.发射器(完全不透明):
    位于屏幕最下方, 取圆弧上的3点, 用3阶贝塞尔曲线构成path

    二.气泡(不完全透明):
    1.发射器处随机产生气泡,气泡的数量默认为10;
    2.气泡未离开发射器的部分会被发射器遮挡;
    3.气泡刚离开发射器,会有一个黏性的变化效果, 使用3阶贝塞尔曲线,将多个变化的点连接起来,构成path;
    4.气泡在往上移动中,半径会变小, 小于一定值,气泡会消失;
    5.气泡靠近圆环到一定距离,也会有一个黏性变化效果,并且速度变慢, 使用方式类似于3
    6.气泡与圆环的零距离时,气泡消失

    三.圆环(不完全透明):
    1.由多个长度不一的片段构成, 圆弧上的3个点构成一个片段,采用的也是3阶贝塞尔曲线;
    2.每个片段都围绕圆环中心旋转,透明度在某个区间不断变化; 旋转速度在某几个值之间也不断改变,从而影响片段之间的开口大小
    3.如果手机电量发生改变,显示的电量百分比也发生改变;拖动进度条可改变电量百分比和 发射器,气泡,圆环的颜色

    代码链接:https://github.com/A18767101271/HwCharging

    相关文章

      网友评论

          本文标题:android仿华为充电动画

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