用微信小程序做个简单旋转动画

时隔多年，重回江湖（至少半个月。。）

我们书接上回，利用躺平时间来做一个表白信的故事。成品效果在脑海里呈现了无数次，动起手来发现还是东拼西凑的找资料（代码写得好，完全看网友），哎~哪能料到小程序升级了，Canvas画布的用法变了！！！

活跃下躺平的时间，挑战小程序表白信功能

以前的画布功能不能用，要用新版本，结果新版本好像说的又看不懂。可能归根结底能力跟不上大厂的节奏。

网友说得好：只要思想不滑坡，办法总比困难多！

回顾之前的开发计划：

1、利用目前已完成备案的小程序“虾码”添加“时空鸡汤”按钮

2、“时空鸡汤”点击后打开新的页面，在页面中提供用户几个维度的鸡汤选项（自己、家人、朋友、Ta吧），选择后通过Canvas这个画布组件绘制星空粒子效果，然后粒子们向屏幕中心旋转消失，当消失的瞬间弹出一句心灵鸡汤

3、完美收场

实际开发效果：

1、小程序“虾码”添加“时空鸡汤”按钮（完成）

2、绘制画布时，新版本没有明确的案例及网络资源，就先放弃粒子效果，直接搜索一张圆形的星空图片

2.1、将查询好的星空图片进行透明化、边缘模糊化处理，让图片在与黑色背景的网页融合效果好一些

2.2、增加图片旋转缩小功能，经过查询，小程序提供了“animation”这么一个让人又爱又恨的组件

2.2.1、（故事环节）开发环境参照官方样例及网友代码，可以实现旋转缩小并逐渐消失动画，后来一想，由大变小时，图片出来的一瞬间有些突兀，就改为由小变大并逐渐消失。

2.2.2、不得不说，开发环境效果确实还是不错的，但是真机预览之后，效果只出现一次，经过一系列查询发现是“animation”动画效果执行后会定格在最后的效果，若要初始化可以1、2、3、4、5、6...叭叭叭一堆方案，结果一个不好用，哎！

2.2.3、确实没有好办法就搁置了

2.2.4、后来一想，除了js，css也支持旋转和隐藏的效果，找到“transform”这个属性

2.2.5、重构代码，通过定时器+css实现了图片旋转效果！

2.3、已发布

扫描商品码，简化版验真伪

商品扫码验真伪

下期预告：马上清明了，离家甚远，做一个线上祭拜的功能吧