泱泱

是的，看标题能绕晕你。 那就通俗点，说点人说的话吧。就是下面这货： 渐变描边 这种图标，以一众UI设计师多年深厚的功底，打眼一看就知道，一定是旋转的loading图标。小伙伴称之为什么呢？渐变描边嘛？之所以这么拗口的起了个角度渐变描边这种鬼畜的名字，是因为photoshop的渐变…

进入6月就一直忙，专栏的文章也迟迟未更新，这篇拖拖拉拉的1个月才写完。是实际工作中遇到的问题，总结下来，万一其他的UI设计师遇到了，就可以少走弯路。 ico文件是图标文件格式，UI设计师一般都做过这种图标文件（纯移动端的UI除外），但即使做，通常也数量很少。这次项目中，遇到了批量…

先放上效果图，再说实现方法。 表情变化 实现的过程比较简单，不过大量用到了我在SVG变形动画里提到的虚拟曲线c0,0,0,0,0,0，需要补充相关知识的移步https://juejin.im/post/6844903478347694094 这篇文章。 这个案例因为用到…

SVG动画即使可以做的炫酷爆炸，但与AE不同，它不能导成视频，不能导成GIF，而且考虑到AI与SVG的互通性，SVG动画合适用来做矢量卡通风格，放到实际应用中，不太建议利用SVG动画做太复杂的效果，毕竟UI设计师不是动效设计师，且动画做起来确实复杂的多。但虽然不适合大舞台，我们却…

SVG动画本质上是动图，我们并不能把它当做实现真正动画的工具，它比gif动图的优势在于小的体量，可交互，可矢量放大，方便修改色值，但它的劣势也很明显，渲染需要耗内存（所以能用基本的移动旋转等等实现就不要用路径变形），而且移动端应用需要第三方框架，即使web应用还要考虑到浏览器的…

继续上篇 6.动态蒙版位移的产生的扫描效果 这个算是上篇末尾的一点小改进，单独拿出来说，因为这种效果用的场景很多，关键还简单，先看示意图。 设想一下，给文本应用一个蒙版，蒙版的白色部分从左向右移动，是不是就有一种文本逐渐显示的效果。 <svg width="800" height…

蒙版对于UI设计师来说，太熟悉不过了，当然了，可能PS里面用的多一些，AI里面用的少一些，SVG同样支持蒙版，而且借助蒙版，能完成很多神奇的效果。我喜欢称蒙版动画为一种魔术，这是真正的“障眼法”，它只让你看到想要看到的部分。 前面SVG的动画效果里，有两次用过了蒙版，一个是在路径…

前段时间投入了一点精力放到了 SVG 动画上是因为在项目中用到了动态加载图标以及字体图标，所以顺便把这些相关的内容补了一下，要么说实战才是最佳升级方式，因为去年我对 SVG 还几乎一无所知。当工作中实际遇到，才有了学习和探索的动力。SVG+CSS3 动画部分，掌握到现在的水平，在项目中运…

上篇：https://juejin.im/post/6844903477768896525 中篇：https://juejin.im/post/6844903477890514958 在前面两篇文章中，虽然完整描述了任意图形的变形动画实现方法，但最大的局限性显…