前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >有赞真赞,官网水波纹动画这么酷

有赞真赞,官网水波纹动画这么酷

作者头像
桃翁
发布2020-07-07 12:11:48
7920
发布2020-07-07 12:11:48
举报
文章被收录于专栏:前端桃园

在我心目中有赞前端团队感觉非常不错,特意看了看他们网站有没有好玩的动画,最终发现一个水波纹动画,感觉挺有意思,和小伙伴们分享一下。有没有发现这个弹窗底部有一个水波纹一直在动。

看到这个效果,我没想到有什么好的实现方式,最终通过分析他们的代码还原了这个效果。

做动画其实还有一招「欺骗用户的眼睛」,看似很高大尚的动画,其实可能很简单。就像今天这个动画,其实就是一个旋转和位移就搞定了。

首先看一个效果,椭圆旋转的效果是什么样的?

如果让一个椭圆做旋转动画,你会发现它有点像水波纹运动。

如果让这个椭圆边旋转边滚动呢,你会发现它在扭曲着“屁股”在走动。

代码如下:(如果你还不懂动画相关的 API,可以查看前几天的内容,或者直接查看该专题学习)

有赞的实现,其实只是把椭圆的宽高设置很大,然后让这个圆缓慢移动,椭圆的底部恰好与弹窗的底部能够重叠到一起,把蓝色底部遮挡住了一部分:

把粉色部分换成白色(和背景色一致),给人的感觉是弹窗下面的蓝条在动,其实是上面有一个大的椭圆在动。下面蓝条其实是固定高度:

如果把粉色部分换成白色:

这就是这个水波纹动效的核心思路,剩下的就是配合 UE 小姐姐调各种参数了,让整个动画变得更逼真。具体实现看代码:

底部蓝色的长条:

水波纹 1:

水波纹 2:

到这里一个水波纹的效果实现思路就分析完了,大家加油!

动画效果的 demo 我上传到了:

https://github.com/lefex/FE/tree/master/animation/animation。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端桃园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档