/Farivate

Primary LanguageJava

兴趣标签card动画效果的实现

兴趣标签Feed是为了影响用户推荐而产生的一个卡片,其中包括一级标签和二级标签。

一级标签:兴趣分类的主体标签。

二级标签:一级标签下挂的用户可选择的具体标签


兴趣标签的展示逻辑

推荐feed流中:后台吐出该类型数据给前端,前端负责展示。露出时全部展示一级标签,当card被RecyclerView回收后重新创建,只保留数据,不记录上次的动画状态。

我的页面:有一个兴趣入口,点击请求后台数据,展示兴趣标签。

feed流兴趣标签需要缓存的数据

一级标签及其下挂二级标签的text,二级标签的选中状态。

兴趣标签的动画

1.展示气泡动画

当card露出区域大于等于三分之二后,启动气泡动画,每个一级标签所在的气泡向四周轻晃。
当card露出区域不足三分之二时,停止该动画,气泡停留在当前晃动的位置。
当气泡存在其他动画时,先暂停该气泡的展示动画,直到气泡的其他动画执行完毕后再恢复

2.点击气泡弹出二级标签的动画

  1. 当该气泡为中心气泡时:

    [1] 该气泡已经弹出了二级标签,则点击无效果

    [2] 该气泡尚未弹出二级标签

      (1) 以前没有选中的二级标签时,则气泡内居中的一级标签文字下移到气泡边缘,气泡内展示二级标签
    
      (2) 以前有选中的二级标签时,先执行(1),再讲气泡内当前展示的二级标签中已被选中过的标签执行动画移动到气泡边缘展示
    
  2. 当该气泡为边缘气泡时:

    [1] 中心气泡尚未弹出二级标签,该气泡也未弹出二级标签,二者启动交换位置的动画,当到达指定位置后,再执行1->[2]

    [2] 中心气泡弹出了二级标签,该气泡未弹出二级标签,先将中心气泡回复一级标签展示状态,在执行[1]

    交换动画是指两个气泡互相移动交换其位置