在学习过基础 SVG 动画原理后，如果结合我们熟悉的技术栈使用岂不是更爽。GSAP 提供了 npm 安装包，下面我们来在 Vue 项目中集成 GSAP。

想要在Web页面中绘制背景图案，我们首先可能想到的是使用 CSS，可能你也有所尝试，比如简单的渐变到复杂的网格、点阵等，SVG 中也有绘制背景图案的解决方案。

✨ SVG 闪烁动画（Blink）演示人类的视觉比较容易被变化所吸引，尤其是颜色的变化。像上世纪 80 年代的霓虹灯广告牌，我很难不被它所吸引。原理闪烁动画效果的核心在于控制元素颜色的变化，掌握好时间的控制，让颜色的变化有引人注目的显示，这样在静态的页面中，自然会吸引住用户的眼球。实战下面会使用三种方法编写一个...

平滑的变形动画真的算是 SVG 中的独门武器了。其原理很容易想到。就是不同形状之间能平滑转换，SVG 中的形状其实也是有不同坐标之间的线段绘制而成的。那么在转换形状的时候，只是在移动线段的坐标。从而达到了形状改变的效果，加之平滑的动画展现。达到想要的效果。

〰️ SVG 路径动画（Path）演示我更喜欢把这种动画叫做路径跟随动画或者轨迹动画，正如你所看到的，一个元素（物体）沿着特定的路径（轨迹）进行运动。原理CSS 属性如果想在 CSS 中让一个元素沿着路径运动，核心要用的的属性有两个，分别是 offset-path 、offset-distance 。offset-path 这个属性接受一个 path 用于指定...

✏️ SVG 描边动画（Stroke）演示查看在线版本Polygon's PlayStation 4 Reviewvivus.js - svg animation原理要实现上面酷炫的描边动画，首先我们需要了解 SVG 中实现描边动画的三个相关属性：分别是 stroke、stroke-dasharray、stroke-dashoffset。这三个属性作为外观显示属性，都可以作为 CSS 属性来使用。strokeSVG 中的...

确实如今有很多种方法让 Web 页面生动起来，我在《SVG 基本介绍》章节也对比过一些优秀的 SVG 相关类库，为什么我选择使用 GSAP 编写 SVG 动画，我们看一张 GSAP 功能全景图

一般我们使用 AI、Sketch 等矢量图设计工具导出的 SVG 文件代码相对还是比较“臃肿”的，实际在 Web 页面上使用 SVG 时候，有些标签或者属性是不需要的。比如 title / desc 标签、或者version 属性声明。

在编写 SVG 动画前，我们应该先要准备矢量文件，矢量文件包含来我们需要的 SVG 代码，通常我们不会去手写 SVG 代码，简单的形状还过得去，复杂点的形状，手写代码会变得吃力很多，我们可以借助诸如 Adobe Illustrator（简称AI）、Sketch 或者是 Inkscape 这样的专业的矢量设计工具来进行矢量图形设计，然后导出 SVG 代码。

如今可缩放的矢量图（SVG）在 Web 页面上充当着重要的角色，SVG 图标、SVG 图像、SVG 图案、SVG 动画甚至是复杂的数据可视化图表都可以由 SVG 进行绘制。

年中的时候，花了点时间在 SVG 动画开发学习上，经过不断探索总结，结合自己学到的知识，以小册子的形式沉淀下来一整套基于 SVG 进行动画开发的实践方法，我把它命名为《SVG 动画开发实战》。

年初在 TO-DO 上计划了一个任务，是以解决自身需求为目的，开发一个 VSCode 扩展。需求最近一个小需求来了，能否在不离开VSCode编辑器的情况下，查看文件或者文件夹的大小。调研恰好目前扩展市场上没有统计 ? 文件夹相关的扩展，只有统计 ? 单个文件的，比如：File Size所以还是自己造轮子吧预览试用从网页安装，Folder ...

最近发布了自己的新博客 [链接] , 博客站点设计了暗色模式风格，但是当时只是基于媒体查询 perfers-color-schema 实现的跟随系统偏好设置切换主题风格，本次带来了可用户自定义的浅色/暗色主题风格切换功能，同时兼容跟随系统偏好设置切换主题风格。

想必各位前端看官也一定做过这样的需求，给我们的应用某些主要的功能绑定一个快捷键。尤其是工具类的产品，让用户可以使用快捷键操作，能大大提高工具使用效率。

现代浏览器的功能越来越强大，前端需要处理的业务逻辑也越来越复杂，提供良好的交互是我们一直追求的事，而我们在做的可视化报表工具，有一个重要的提升用户体验的功能，撤销 & 重做，这个功能给用户以安全感和保障，用户不会担心所做的操作以及交互会消失掉，不可追溯。

最近在研究 lambda 演算中的 η-变换 在 JavaScript 中的应用，偶然在 stackoverflow 上看到一个比较有意思的问题。关于 JavaScript 的求值策略，问JS中函数的参数传递是按值传递还是按引用传递？回答很经典。

缘起 造了一个轮子，根据GitHub项目地址，生成项目目录树，直观的展现项目结构，以便于介绍项目。欢迎Star。 repository-tree 技术栈： ES6 Vue.js Webpack Vuex lodash GitHub API 应用涉及到了展现目录树，实现方法不可或缺的一定是递归遍历。进而开启了我对lambda演算的探索发现之旅。 探索发现之旅 本次乘坐的是 斐...