「折腾装饰动画＃1」

折腾装饰动画＃1

2021/09/02 字数统计： 1.8k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　本来标题打的是半角 #，结果发现首页能渲染出来正文页面却直接忽略，又尝试了 html 代码 #，正文能正确显示首页又不转译了……只能含泪打出全角井号……
　　睡了 6 个小时就醒了，其实没太休息好有点昏昏沉沉的，起来吃完早饭回房间本来打算睡个回笼觉，结果又自觉在电脑前面坐下并开始 hexo new 。
　　当地一些非常热爱工作的随行支援系统……

　　开始正文前先聊聊 tag「建站指猫」。上一篇这个分类的文章是 hexo 自定义域名 & mastodon 认证，我自认为用尽可能通俗易懂的文字描述了完整的操作流程。
　　分类的本意是「猫都能看懂的建站指南」，标准是「我被大卡车撞飞导致失忆后看了还能无障碍理解的文章」。因为我实在是对 A 洗稿官方文档发成自己的教程然后 A1 再洗稿 A 的文章 最后诞生一堆狗屁不通的所谓「教程」污染搜索引擎的简中互联网生态深恶痛绝，于是决定从自己做起，写一些真正面向 0 基础 的教程。
　　当然我觉得目前我的前端知识还并没有到能出教程的水准，所以比起「教程」，这些文章应该更类似「解说」，我会详细描述并展示 我希望呈现的效果 ，再逐一列出我的操作步骤，并解说每一行代码每一个参数的作用。
　　目前还是停留在工程解说的层面，如果有机会的话可能会出一些详细的 基础语法解说 和 如何从 0 自学前端 的经验分享。

设计思路

　　当初网页设计的初稿是在背景做一些能随页面滚动转动的齿轮，后来整体做出来之后发现整个站的设计风格还是比较扁平化，放上齿轮之后大概率不好看，于是变更了计划打算放一个类似 HUD UI 的动画。

　　视觉效果大概是这样→
　　（昨天临时起意用 PS随便画的网页图标）
　　~~很有科技感对不对，很赛博朋克对不对【~~ 其实这个画起来还挺简单的，就是在 PS 里画一堆大小不一的圆形路径，然后再加上不同数值的方型角点虚线描边，就视觉效果来说我还挺满意。
　　用 SVG 复现这个形状应该也很快，不知道加载速度如何，如果不太理想的话大概会进行一些简化操作。

　　那么大概的动画思路是这样的：

新建 svg 元素绘制出基础图形（大小不一的 透明圆形 ）
为图形指定不同样式的 虚线描边
用 JS 获取网页 阅读进度百分比
将 阅读进度百分比 绑定至 透明圆形 的旋转属性上

　　前三步其实都已经想好怎么操作了，第四步也有大概的思路，但是动画怎么触发还是有一些疑问，总之今天先把图案画出来就算胜利。
　　以及还有一些后续希望实现的功能：

每次刷新页面生成随机样式的虚线描边
在 JS 中通过数组写入配色，通过不同的 layout 参数调用

　　全部实现以后大概就可以作为 hexo 装饰组件在 github 上发布了，组件名就叫 HKT-924 吧，对这玩意儿就是我的人设球设了【？

操作记录

创建 svg 元素与基础图形

　　在页面 / markdown 文件中写入如下代码：

<svg class="HKT-block" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
// svg 标准元素格式，长宽均为 256
  <circle class="HKT-item" cx="128" cy="128" r="110"/>
  // circle = 创建圆形路径，示例里是三个
  <circle class="HKT-item" cx="128" cy="128" r="64"/>
  // cx = 圆心 x 轴位置; cy = 圆心 y 轴位置
  <circle class="HKT-item" cx="128" cy="128" r="32"/>
  // r = 圆形路径半径
</svg>

　　参考资料：https://www.sollrei.me/post/frontend/2019-05-07
　　注：class name 中的 HKT 是 Hekatech 的缩写，因为打算整理成组件所以直接从现在就开始使用特殊类名了。

注意：svg 是矢量元素，viewBox 属性并不是实际的元素大小
　　　如果不设置宽度的话元素会默认填满当前的父元素
　　　同样 circle 标签中填入的数据也不是实际渲染到页面上的尺寸，而是相对于画布尺寸的相对位置和距离
提案：可以理解为我们创建了一张尺寸为 256×256 的画布，以画布上 (128,128) 位置为圆心画了一个半径为 110 的圆形
　　　而这些数据单位是无穷大，因此需要在 css 样式内重新指定元素的宽才能正确显示
　　　指定了宽度后高度会像图片元素一样自动缩放保持比例不变

　　然后追加基础 css 样式：

.HKT-block {
// 使用 `.` 前缀为 classname = "HKT-block" 的元素指定样式
	display: block;
	// 不设置 block 它似乎会飞走的样子……
	opacity: 0.9;
	// 元素透明度为 90%
	position: fixed;
	// 使元素相对浏览器框口固定
	right: 1em;
	// 距离右侧窗口边缘距离
	bottom: 1em;
	// 距离下方窗口边缘的距离
	width: 50%;
	// 元素宽度为页面的 50%
	z-index: -1;
	// 堆叠顺序设置，数字越小元素位置越靠下
	// 这里是放在了页面主体的下方
}
.HKT-item {
	fill: transparent;
	// 用透明色填充圆形路径
	stroke: #000;
	// 描边颜色为黑色
}

　　全部完成后页面背景中就会出现三个大小不一的透明同心圆了。

添加不同样式的描边

　　为路径添加描边有两种可行方式，一是直接在 <circle> 标签内写入属性，二是利用 CSS。
　　因为这次绘制需要用到的属性过多，还是选择用 CSS 来进行。因为每一个圈需要呈现的样式不同，所以我们需要为他们分别指定不同的 id 来区分。

　　在之前创建的 <circle> 标签中添加 id 属性，格式如下：

1
2
3

<circle class="HKT-item" id="HKT-1" cx="128" cy="128" r="110"/>
<circle class="HKT-item" id="HKT-2" cx="128" cy="128" r="64"/>
<circle class="HKT-item" id="HKT-3" cx="128" cy="128" r="32"/>

　　然后为不同 id 指定不同的描边宽度和样式：

.HKT-item {
	stroke-linecap: butt;
	// 设置描边形状为方角
}

#HKT-1 {
	// 使用 `#` 前缀为 id = "HKT-1" 的元素设置样式
	stroke-width: 10;
	// 设置描边宽度为 10
	stroke-dasharray:55,30,5;
	// 描边的虚线样式
}
#HKT-2 {
	stroke-width: 64;
	stroke-dasharray:25,55,5;
}
#HKT-3 {
	stroke-width: 20;
	stroke-dasharray:52,5,10;
}

　　参考1：描边形状 || 参考2：虚线样式
　　虚线样式在参考 1 中也有提到，但是我觉得第二篇讲得更加详细一点。

img-left

　　这个时候就已经绘制出比较酷炫的效果了！如图←
　　之后可以再通过 增加路径 和 调整路径透明度 的方式做一些调整和细化，最终效果可以参考本页的背景图案。

　　本来想说明天再处理动画的……一看时间才早上 10 点，这算什么，早起的危害吗。
　　那下午继续来研究动画，研究不出来就先用 JS 写入图层方便生成随机样式吧……

無色人間。