移动端重构实战系列7——环形UI

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载

”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sandalsheral UI的一次全方位剖析,首发在imwebw3cplus两大站点及“前端Talk”微信公众号,其余所有标注或没有标注来源的均为转载。“

——imweb 结一

圆形进度条

具体demo效果可见:sheral progress

这里主要分析下圆环的实现,蓝色的进度条圆环由左右两边构成,这里以右半边的为例,html结构为.circle-right > .right-inner(为了视觉效果,把蓝色放在里面了,而非覆盖在灰色上),如下图:

半圆环由两层结构构成,.cicle-right的大小为50px100px,超过隐藏,而.right-inner的实际大小为100px100px,因为父容器宽度为50px且超过隐藏所以只会显示右边一半,如果只是这样的话我们旋转.right-inner的话右边一直会有蓝色的半环。所以我们对.right-inner再做个裁剪处理clip: rect(0, 50px, 100px, 0);,这样导致整个.right-inner圆环只有左半边可见,然后加上我们父元素是在右半边且多余隐藏,所以默认看不到我们的蓝色圆环,如要看到蓝色圆环部分只有将.right-inner左边部分旋转到右边父元素的范围内,核心代码如下图:

.circle-right{ 
    width: 50px;
    height: 100px;
    position: absolute;
    top: -4px;
    right: -4px;
    overflow: hidden;
}
.right-inner{
    width: 100px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    border: 4px solid #007aff;
    box-sizing: border-box;
    clip: rect(0, 50px, 100px, 0); // 设置左半边可见
    transition: transform 0.5s linear;
}

同理即可实现左半边,不过如果某些安卓机比较卡的话,在大于50%的时候,左边半圆在衔接的时候会有一个卡顿不连贯,所以可以考虑增加再增加一个底部的半圆环,让其在右边半圆环运动到一半的时候开始运动,然后设置一个比较短的完成时间,这样就可以衔接起来。

当然其实使用svg更方便,这里推荐一个库progress bar.js

PS:关于svg path的弧形绘制可参考MDN svg 路径的最后弧形部分

弧形tool

要实现的效果如下图,具体demo可见sheral tool

这里主要涉及到两点:

  • 旋转角度计算
  • 图标再旋转回来处理
  • 动画处理,主要对opacity和transform进行动画

如果按总的90deg角计算,index表示item的索引(从1开始),n表示item总数,则每个item的旋转角度计算公式为:

每个item的旋转角度  = ( index -1)  /  (n - 1) * 90deg

而图标就要相应的旋转对应的负角度回来,于是每个icon的旋转角度计算公式为:

每个图标的旋转角度  =  -( index -1) /  (n - 1) * 90deg

默认样式:

.tool-item{
    width: $quickToolSize;
    height: $quickToolSize;
    position: absolute;
    background: $quickToolBg;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s linear, transform .3s $timingFunction;
    @include center-flex(both);
}

active样式

.tool-item{
    opacity: 1;

    @for $i from 1 through $quickToolNum{
        &:nth-of-type(#{$i}) { // item旋转 加 偏移
            transform: rotate(($i - 1) * 90deg / ($quickToolNum - 1)) translateX(-80px);
            // transition-delay: ($i - 1) * 0.03s;
            .item-icon{ // icon旋转
                transform: rotate(-($i - 1) * 90deg / ($quickToolNum - 1));
            }
        }
    }
}

抽奖圆盘

转盘背景图如下图,我们要把奖品填写到相应的区域。

大体思想跟上面的差不多,大概如下:

1、先绝对定位在圆中间,然后先计算每个item的旋转角度,再设置偏移值

.item{
    position: absolute;
    left: 50%;
    top: 50%;
}
@for $i from 1 through 8 {
    .item:nth-child(#{$i}){
        transform: translate(-50%, -50%) rotate(($i - 1)*45deg + 22.5deg) translate(90px, 0);
    }
}

2、调整奖品文字的旋转

.item-inner{
    transform: rotate(90deg);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

多度量的(堆积)不等宽柱形图

今天要跟大家介绍的图表是多度量的不等宽柱形图! ▽▼▽ 这种多度量的不等宽柱形图,在制作技巧上,与之前讲过的两篇不等宽柱形图有异曲同工之妙,但是在数据表达与展示...

45360
来自专栏极客猴

Python 绘图,我只用 Matplotlib(二)

上篇文章,我们了解到 Matplotlib 是一个风格类似 Matlab 的基于 Python 的绘图库。它提供了一整套和matlab相似的命令API,十分适合...

16510
来自专栏Flutter入门

偶遇FFmpeg(二)——常用命令

将输入的视频的帧,以左上角为坐标的原点,剪切成x,y坐标开始的指定大小。 语法:

40540
来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

1.5K70
来自专栏菩提树下的杨过

Flash/Flex学习笔记(25):摩擦力与屏幕环绕

摩擦力: 假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。 ? 上图示意了该过程,物体以moveAngle角度正向运动,最终的...

20860
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

27350
来自专栏邹成卓的专栏

Unity3D WebCamTexture 取帧渲染、像素读取的终端适配

由于Win/Mac/Adnroid/iOS等各系统平台和硬件环境下,WebCamTexture 用于渲染和图像计算时表现不完全一致,很容易造成图像渲染或者计算不...

54900
来自专栏前端小吉米

SVG 动画精髓

30150
来自专栏HTML5学堂

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现...

37380
来自专栏章鱼的慢慢技术路

OpenGL透明与混色效果

22560

扫码关注云+社区

领取腾讯云代金券