iconfont矢量图标旋转晃动

标签：css3 前端 iconfont旋转 iconfont字体图标 旋转动画晃动

问题描述：项目中使用了iconfont字体图标做旋转动画，就是类似loading加载之类的动效，发现转动起来会出现晃动问题，仔细看会发现它并不是中心旋转(一开始没注意，放大看的时候才发现的)。

晃动情况如图一：

图一（晃动效果）

而我们想要的效果如图二：

图二（正确效果）

先上代码：

<!-- css样式如下(引入的stylesheet.css是从iconfont下载下来的矢量图标库样式文件) -->
<link rel="stylesheet" href="stylesheet.css">
<style>
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-181:before {
        content: "\e631";
    }
    .icon-181{
        position: absolute;
        top: 27px;
        left: 22px;
        font-size: 20px;
        line-height: 1;
        color: #275CF0;
        animation: loading-spin 1s linear infinite;
    }
    @keyframes loading-spin {
        0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        }
        to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
        }
    }
</style>
<!-- html结构如下 -->
<i class="iconfont icon-181"></i>

多番尝试一直没能解决晃动问题，很蓝瘦。。。

一直安利的百度大法也没能帮我解决，后琢磨了很久才找到解决办法。

有感爬坑不易，特此发文分享给各位大佬。

那么，废话不多说，下面分享一下我解决这个问题的过程吧：

1.初步尝试

首先我参考百度上的一些说法尝试了设置旋转中心点(transform-origin)、设置定位(position)、浮动(float)、以及使用translateZ(0)进行旋转渲染。 结果发现并没有什么效果。

然后转而又测试使用从iconfont图标库下载下来的png图片(项目中使用的这个矢量图标的原版图片)来做animation旋转动效，发现旋转起来是没有出现晃动问题的。 这个svg图像做成图片不会出现晃动，那么问题到底出在哪里呢？让我们继续探索。

(PS:页面中使用的图标是将svg图像传到iconfont网站处理以后，然后导出为字体矢量图标引用到页面中。)

2.问题探索

经我打开控制台仔细查看发现，我给这个icon-181元素 (即这个字体矢量图标的父元素)设置的font-size是20px，可是显示的字体矢量图标元素大小却是20*21。 按说应该是20*20的，这个矢量图标却莫名的多出了1px的像素高度。

觉得可能是这个问题导致的旋转晃动，这种情况有可能是它做成iconfont字体矢量图标运用后出现的。

详情见下面的两张属性图：矢量图标的父元素属性图(图三) 和 矢量图标在页面中的属性图(图四)

图三（矢量图标父元素属性图）

(PS:并不一定只是在font-size为20px时会出现这种问题，大家可以自行调整font-size的大小测试会出现问题的font-size值为多少， 调整font-size直到出现元素大小与设置的font-size尺寸不一致的情况时。比如：设置到font-size为22px时， before添加的元素大小变成了22*23,而并不是标准的22*22时，给它添加旋转动画，也会出现晃动问题。)

期间，我试探出了一个能勉强解决的办法。 我在控制台调整矢量图标的父元素icon-181的字体大小font-size一直增加到24px后，发现里面通过before添加的这个矢量图标元素大小也显示为24*24了， 旋转起来也没有再出现晃动现象，可以解决这个问题。 但是我这个项目明确要求的是20px的图标，所以这个方案也只能舍弃。

那么，到底是什么原因导致它会多出1px渲染呢？是不是我使用的这个svg图像有问题，导致了它转换成字体矢量图标以后出现了这样的情况？继续开始测试：

> part-1(怀疑是图像尺寸导致的矢量图标渲染出现拉伸)

让设计师发了几个尺寸不一的loading图素材进行测试，分别是10*10 20*20 30*30 40*40尺寸的svg图标， 将其导入到iconfont网站再下载下来做成字体样式，想看看是否是图标尺寸导致的问题。经测试无效，阵亡。。。

> part-2(怀疑是这个图像的圆不够标准)

尝试用iconfont图标库上其它的一些loading圆环图标，包括一些官方图标进行测试。测试结果是一样的晃~。over,就这个fell！倍儿爽！

> part-3(觉得是阿里iconfont图标库的通病，改用别的图标库)

后面在网上看到有人说可能是阿里图标不稳定，没有做高度固定，然后我找了一款国外icon制作网站，叫做 icomoon 。

将使用的这个图标的SVG图像导入这个网站生成了一遍，把从这个网站下载下来的字体样式加载到我这里使用。

引入字体样式进来以后，查看矢量图标元素大小。没问题，是标准的20*20了(我们设置的font-size为20px,所以元素的大小应该是20*20)，很开心。 然后，给它启用旋转动画跑起来，跑的是挺欢的，但是，它又飘了~(好吧，又是一次失败的尝试)。

那么，看一下是怎么导致的吧。 调整font-size从20px一直到24px，期间元素大小没什么问题，直到24px的时候，发现里面的图标元素大小变为了24*25，也出现了这种多出1px的高度的问题。

https://www.npmjs.com/settings/064ybhsi/password

END