选中单元格(Cell)时为Gradient View添加动画效果的实现咨询

核心前提 #

你当前直接控制显隐的逻辑无法实现动画，是因为hidden属性属于非可动画属性，没有过渡帧，需要改用透明度、缩放等可动画属性控制状态切换。

具体实现步骤 #

• 第一步：调整渐变视图初始配置
  初始化渐变视图时默认将alpha（透明度）设为0，加到Cell视图层级的最底层，避免遮挡其他内容，初始状态不要设置hidden = YES/true
• 第二步：重写Cell选中状态监听方法，加入动画逻辑
  不同平台的实现示例如下：
  iOS Swift 示例

  override func setSelected(_ selected: Bool, animated: Bool) {
      super.setSelected(selected, animated: animated)
      // 定义状态切换的终态
      let updateState = {
          self.gradientView.alpha = selected ? 1 : 0
          // 可选添加缩放动效，增强点击反馈感
          self.gradientView.transform = selected ? .identity : .init(scaleX: 0.95, y: 0.95)
      }
      // 根据系统传入的animated参数判断是否需要执行动画
      if animated {
          UIView.animate(withDuration: 0.25, delay: 0, options: .curveEaseInOut, animations: updateState)
      } else {
          updateState()
      }
  }
  

  iOS Objective-C 示例

  - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
      [super setSelected:selected animated:animated];
      void (^updateState)(void) = ^{
          self.gradientView.alpha = selected ? 1 : 0;
          self.gradientView.transform = selected ? CGAffineTransformIdentity : CGAffineTransformMakeScale(0.95, 0.95);
      };
      if (animated) {
          [UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:updateState completion:nil];
      } else {
          updateState();
      }
  }
  

  Android Kotlin 示例

  override fun setSelected(selected: Boolean) {
      super.setSelected(selected)
      val targetAlpha = if (selected) 1f else 0f
      val targetScale = if (selected) 1f else 0.95f
      gradientView.animate()
          .alpha(targetAlpha)
          .scaleX(targetScale)
          .scaleY(targetScale)
          .setDuration(250)
          .setInterpolator(DecelerateInterpolator())
          .start()
  }
  

• 第三步：修复Cell复用异常
  在Cell复用回调方法中主动赋值选中状态，避免滑动时出现遗留的半透明异常：
  • iOS 端在tableView:cellForRowAtIndexPath:中调用[cell setSelected:isSelected animated:NO]
  • Android 端在onBindViewHolder中调用itemView.isSelected = currentItem.isSelected

可选进阶效果 #

• 如果需要渐变本身的流动效果，iOS可以给CAGradientLayer添加CABasicAnimation修改locations属性，Android可以通过属性动画修改GradientDrawable的颜色/位置属性，实现选中时渐变扫过的动效
• 可以搭配阴影透明度的动画，和渐变过渡配合增强层次感

内容的提问来源于stack exchange，提问作者Akshat Tiwari