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

分享 / 3158 / 7 / 创建于 8年前

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

Alt text

源码下载

从效果上看，我们需要考虑以下几个问题：
1.叶子的随机产生；

2.叶子随着一条正余弦曲线移动；

3.叶子在移动的时候旋转，旋转方向随机，正时针或逆时针；

4.叶子遇到进度条，似乎是融合进入；

5.叶子不能超出最左边的弧角；

7.叶子飘出时的角度不是一致，走的曲线的振幅也有差别，否则太有规律性，缺乏美感；

代码部分

阿极

12 声望

暂无个人描述~

1 人点赞

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

推荐文章：

更多推荐...

工作

[求职]在郑州工作4年的程序媛的简历优化 13 / 172 |

博客

工作小锦囊系列——如何实现一个车辆预定功能（下） 13 / 15 |

博客

冯老师的困惑——测试和正式环境掐架篇（一） 15 / 23 |

分享创造

使用 Laravel 10 & Vue 3 开发了一个社区站，一起来玩下～ 17 / 39 |

博客

简单对比一下DcatAdmin和filament的各自优缺点 28 / 33 |

博客

历时一个月，《穿透Laravel》全书完成！ 87 / 25 |

讨论数量: 7

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

源码下载

代码部分

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

源码下载

代码部分

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录