当前位置:聪少自媒体网 > 今日头条 > 正文

今日头条下拉加载动画实现

2020-10-05 今日头条 聪少自媒体

前段时间有位好友让我抽时间看一下今日头条的下拉刷新实现,抽时间写了个demo,先看一下整体效果图.若您觉得不错,请在github上给我一颗Star.若在使用中发现BUG,请联系我邮箱zth0218@126.com

完整演示.gif

观察这个动画,整体有2部分组成.

第一部分为画线动画,包括外边框(带圆角)逆时针的绘制,内部左上角矩形顺时针绘制, 其他三条横线的绘制.

第二部分为旋转动画,内部矩形框移动,有一种将其他三条横线挤压的效果.

画线动画

绘画部分.gif

用到的有,,.具体怎么用劳烦自己谷歌吧.

和:实现图形的绘制.

: 实现绘制动画.

代码示例:

旋转动画

旋转部分.gif

旋转部分要简单些,分解成4步骤即可,具体如下图,(ps:好吧我没找到简书4张图片并排放置的方法,哪位大神知道可以指导下我 zth0218@126.com,多谢)

1.png

2.png

3.png

4.png

三者在4种情况下的,然后实例每次调用方法时,更新各自的和三条线的即可.

:运行顺序->->->

:

三条短横线运行顺序->->->

三条长横线运行顺序->->->

每1秒调取一次位置移动

代码示例:

聪少爱学堂聪少
聪少爱学堂创始人,梅州市鹏鑫网络科技有限公司CEO,09年开始踏入互联网,10年互联网行业经验,资深自媒体人,自媒体优秀导师,咪挺微商团对营销引流顾问,业务包含:精准引流技术/代引流精准粉,专业小红书,知乎,微博代运营。
  • 38988文章总数
  • 1491135访问次数
  • 建站天数
  • 合作伙伴