移动端圆环进度动画方案(透明背景-透明度圆环-css3版)

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

适逢元旦假期,妹子逛街吃火锅看电影陪女朋友之际,写出来的文章难免画风略微粗糙,但是这个动画的实现还是费了一番脑子的,话说程序猿之间交流并不需要过多解释,上代码就搞定。

首先说一下我们这个要实现的圆环进度动画,有三个特点:

1、背景是透明的,所以用遮挡实现的方法就不用考虑了;

2、圆环颜色是有透明度的,所以用两个半圆环实现大于180度的圆环效果不能有叠加部分;

3、最好用纯css3简洁的实现。

然后要备注下重点:

我们的动画效果要应用在移动端,尤其是有些性能较差的安卓手机,所以一定要考虑性能问题。

先上效果图:

所以我们很快的出了我们被pass掉的第一版方案

对于不可用遮挡来实现的圆环动画效果,我们可以用两个半圆环的运动来组合,动画效果使用transition和transform实现。 圆环小于50%时:

圆环大于50%时,由两个不重叠的圆环组合而成:

所以对于大于50%的圆环旋转动画,是需要两段动画拼接的,左半边的圆环先旋转180度到右半边,右半边的圆环再旋转相应的度数至左半边,这里旋转角度不是固定的,需要根据具体进度确定,所以这种方案右半边的圆环旋转多少度是通过js赋值的,那么问题来了,当我们在pc上看到流畅的旋转动画时,在安卓手机上,两个半圆环动画的衔接处,有时差!不流畅!

思考下第一版方案失败的根本原因,就是整个圆环进度是由两个半圆环分别动画形成的,右侧圆环的旋转角度不是固定的,使用transition实现需要通过js动态添加旋转角度样式,js语句的执行使得两个圆环执行动画的时间差无法确定,在性能较差的安卓手机上会明显感觉到两个动画直接的衔接卡顿。

那么换一种思维方式,我们有了第二版解决方案:

利用纯css控制两个半圆环动画的执行,让两个半圆环动画都固定旋转180度,时间差固定,我们要控制的就是可视区域的角度。 这里只讨论角度大于50%的情况,因为小于50%的情况无论用哪种方案都能实现。 上面我们讨论过,右半边不可见区域的圆环旋转到左半边时,整个左半边都是可见区域,所以我们旋转180度后当然能看见完整的半圆环,那我们尝试着根据我们需要的角度缩小左半边的可见区域不就可以了。(最后一幅图太困了,改天再补!)

具体来讲,我们实现右半边可见圆环用了两层,实现左半边可见圆环用了三层,两个圆环从左到右、从右到左分别旋转180度,最后我们可以完整的看到整个右半侧圆环,而左半侧的圆环因为还有一层遮挡,只能看到我们所需进度的相应角度。

<div class="my-circle" id="my-circle">
  <div class="right-outter">
    <div class="right-inner"></div>
  </div>
  <div id="left-outter-patch" class="left-outter-patch">
    <div id="left-outter" class="left-outter">
      <div id="left-inner" class="left-inner"> </div>
    </div>
  </div>
</div>
.my-circle {
        position: relative;
        width: 58px;
        height: 58px;
    }
    .right-outter {
        position: absolute;
        width: 29px;
        height: 58px;
        top: 0;
        right: 0;
        overflow: hidden;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    .right-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid rgba(113, 222, 130, 0.3);
        clip: rect(0 58px 58px 29px);
    }
    .left-outter {
        position: absolute;
        width: 58px;
        height: 58px;
        top: 0;
        left: 0;
        overflow: hidden;
        clip: rect(0 58px 58px 29px);
    }
    .left-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid rgba(113, 222, 130, 0.3);
        clip: rect(0 58px 58px 29px);
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    .left-outter-patch {
        position: absolute;
        width: 58px;
        height: 58px;
        top: 0;
        left: 0;

        overflow: hidden;
        clip: rect(0 58px 58px 29px);
    }

    .test-animation .right-inner {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transition: transform 1s linear;
        -webkit-transition: -webkit-transform 1s linear;
    }

    .test-animation .left-inner {
         transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transition: transform 1s linear 1s;
        -webkit-transition: -webkit-transform 1s linear 1s;
    }

所以动画是由css固定实现的,而左半侧的可视区域是由js代码控制的,这样无任何时差问题

    var degree = 75;
    document.getElementById("left-outter-patch").style.transform = "rotate(" + ((degree-50)*360/100) + "deg)";
    document.getElementById("left-outter-patch").style.WebkitTransform = "rotate(" + ((degree-50)*360/100) + "deg)";
    document.getElementById("left-outter").style.transform  = "rotate(" + (180-(degree-50)*360/100) + "deg)";
    document.getElementById("left-outter").style.WebkitTransform  = "rotate(" + (180-(degree-50)*360/100) + "deg)";
    document.getElementById("my-circle").className = "my-circle test-animation";

戳这里查看源代码及实现效果

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

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

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

3648
来自专栏编程

你不知道的前端算法之热力图的实现

本文作者:TalkingData 可视化工程师李凤禄 编辑:Aresn inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效...

2619
来自专栏MixLab科技+设计实验室

人工智能设计师之智能排版的另一种实现方式

Flipboard的自动排版系统Duplo 最近在整理算法驱动设计的案例,翻到Flipboard的自动排版系统,再次研究了下,把相关的技术思路整理了下: Fli...

3847
来自专栏数据小魔方

绩效管理工具(二)——温度计风格图表!

今天跟大家分享另一种用作绩效管理的图表工具——温度计风格图表! ▽ 这种图表看起来简洁、直观。数据表达清晰、无冗余。今天主要介绍两种做法,都不是特别复杂,但是需...

3258
来自专栏数据小魔方

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

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

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

OpenGL透明与混色效果

2116
来自专栏顶级程序员

阿里巴巴公司根据截图查到泄露信息的具体员工的技术是什么?

? 在月饼事件中的新闻中提到。阿里对员工访问的界面做了一定的处理。貌似这不是简单的水印。这种处理是什么,是怎么做到的呢? =====第三次更新===== 评论...

5199
来自专栏贾志刚-OpenCV学堂

OpenCV中泛洪填充算法解析与应用

泛洪填充(Flood Fill)很多时候国内的开发者称它为漫水填充,该算法在图形填充与着色应用程序比较常见,属于标配。在图像处理里对二值图像的Hole可以通过泛...

49010
来自专栏前端那些事

过渡与动画 - 逐帧动画&steps调速函数

写在前面 上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果. 但是如果我们想要实现逐帧动画,基于贝塞尔曲线的调速函数就显得有些无...

27810
来自专栏前端那些事

过渡与动画 - 逐帧动画&steps调速函数

上一篇中我们熟悉五种内置的缓动曲线和(三次)贝塞尔曲线,并且基于此完成了缓动效果.

900

扫码关注云+社区

领取腾讯云代金券