一个绚丽的 loading 动效分析与实现！

分享 / 0 / 1 / 创建于 9年前

前两天我们这边的头儿给我说，有个 gif 动效很不错，可以考虑用来做项目里的loading，问我能不能实现，看了下效果确实不错，也还比较有新意，复杂度也不是非常高，所以就花时间给做了，我们先一起看下原gif图效果：
http://finalshares.cn/attachment/1601/thre...

从效果上看，我们需要考虑以下几个问题：
1.叶子的随机产生；
2.叶子随着一条正余弦曲线移动；
3.叶子在移动的时候旋转，旋转方向随机，正时针或逆时针；
4.叶子遇到进度条，似乎是融合进入；
5.叶子不能超出最左边的弧角；
7.叶子飘出时的角度不是一致，走的曲线的振幅也有差别，否则太有规律性，缺乏美感；

最终效果如下，本来录了20+s，但是PS只能转5s，所以有兴趣的大家自己运行的玩吧：
http://finalshares.cn/attachment/1601/thre...

源码下载：http://finalshares.com/read-6767?from=phph...