前言
昨天我给博客加上了几个TG的动画贴纸表情包,包含:瑞克和莫蒂、派大星、金克斯、小黄人、BLACKPINK(粉墨)、名人梗图(PeopleMemes)、小黄鸭(UtyaDuck),具体可以在评论区尝试一下。
但是就算我导出的大小是100x100并且压缩成了WEBP格式,单个表情的大小还是能够达到300KB左右,如果大小为64x64的就只有100KB左右,但有些影响观感,所以我选择牺牲流量换取观感,其实这里还有另外一条路可以走,那就是“为何不尝试直接播放.tgs或lottie呢?”,今天尝试了下,发现同时播放10-20个小黄人表情包的时候已经掉帧严重了,故此放弃。
然后受到莎娃的启发,所以目前的实现方式是将在挑选表情包时的动态图修改为静态预览图,只有在鼠标悬停或者发送评论后才会显示动态图,这样可以避免访客在挑选表情包时直接加载动态图产生的大量流量,以下就是修改过程。
你可以在本站评论区查看效果
PS: 以下为twikoo评论驱动的修改方式
修改过程
前往 SwaggyMacro/OwO_Stickers
仓库,直接下载所有文件到你的CDN或者仓库目录(如果你是Github部署的话) ...
以下顺序按照 新-旧 时间排序。 (PS: 无法渲染的将会放在时间轴下面)
2024
08-30
新增插件abbrlink,将站点链接转换为更为简短的链接,如本文的链接为:https://b.ncii.cn/p/b9a9.html,后续应该不会再对链接进行改动,以保证链接的稳定性。
08-29
支持了RSS2以及ATOM,地址:https://b.ncii.cn/rss2.xml https://b.ncii.cn/atom.xml
将twikoo评论的数据换到MongoDB了(只支持MongoDB),私有化部署默认是LoKiJS数据库(性能和存储容量不行),之前的评论数据都没有了,虽然目前还没有啥评论。
在尝试了直接在博客中播放lottie或tgs动画后放弃,性能消耗实在太大,20个小黄人表情同时播放已经掉帧严重了。
后面受到莎娃启发,将OwO表情修改了下,正常情况下选择表情仅显示静态预览图,发送评论后以及鼠标悬停时才显示动态图,这样可以避免访客在挑选表情包时直接加载动态图产生的大量流量。
详情见:给HEXO加上TG的动画贴纸表情包
08-28
新增了几个TG的动画表情包, ...
前言
由于公司项目,需要一个球形容器,在网上找了一下,发现Handycontrol提供了,但是Handycontrol这项目实在太大了,扒下来也有点麻烦,后面发现Github上有一个日本人写的WaveProgressBar,看起来还行,就拿起来改了下。
HandyControl
这是HandyControl提供的WaveProgressBar控件,看起来效果确实不错,但是不太符合公司需求,因为偏工业一点。
Handycontrol/WaveProgressBar:
WaveProgressBar
最后实现的效果如下,看起来还不错。 绑定参数如下:
Progress : 进度
WaveFillColorBrush : 最外层的填充颜色
WaveColorBrush : 波浪背面的另一层颜色,用来显示类似水面的效果,具体可以看下面的效果图,可能有点模糊。
FontBrush : 进度百分比颜色
项目地址 :
SwaggyMacro/WaveProgressBar