peko-ios/issues/gift-animation-optimization.md

礼物动画优化方案B实施总结

问题描述

用户发送礼物时，消息列表会不断闪烁，特别是在连续送礼场景下问题更明显。

根本原因

1. 礼物动画与消息列表更新同时进行，产生视觉冲突
2. 消息列表使用 UITableViewRowAnimationNone 导致突兀的更新效果
3. 滚动时机与动画执行时机冲突

实施方案B：优化消息更新动画

修改内容

1. 优化消息插入动画

• 将 UITableViewRowAnimationNone 改为 UITableViewRowAnimationFade
• 添加 UIView.animateWithDuration:0.2 包装动画
• 应用位置：appendAndScrollToBottom 和 appendAndScrollToAtUser 方法

2. 优化滚动时机

• 延迟滚动执行：dispatch_after(0.1秒)
• 使用更平滑的滚动动画：UIViewAnimationOptionCurveEaseOut
• 动画时长：0.3秒

3. 添加礼物消息识别

• 新增 isGiftMessage: 方法识别礼物消息
• 支持 CustomMessageType_Gift、CustomMessageType_AllMicroSend、CustomMessageType_Super_Gift

4. 礼物消息特殊处理

• 在 addRoomMessage: 中对礼物消息添加0.05秒延迟
• 让动画先执行，再更新消息列表

5. 优化 Cell 更新逻辑（新增）

• 在 XPRoomMessageTableViewCell.m 中优化 setMessageInfo: 方法
• 使用 UIView.performWithoutAnimation 避免布局动画
• 延迟图片加载，避免与礼物动画冲突
• 添加动画状态检查，避免动画期间的布局更新
• 使用更平滑的布局更新动画

修改的文件

• YuMi/Modules/YMRoom/View/MessageContainerView/XPRoomMessageContainerView.m
• YuMi/Modules/YMRoom/View/MessageContainerView/View/XPRoomMessageTableViewCell.m

关键代码变更

// 1. 消息插入动画优化
[UIView animateWithDuration:0.2 animations:^{
    [self.messageTableView insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationFade];
}];

// 2. 滚动时机优化
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self scrollToBottom:NO];
});

// 3. 平滑滚动动画
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    [self.messageTableView scrollToRowAtIndexPath:ip atScrollPosition:UITableViewScrollPositionBottom animated:NO];
} completion:nil];

// 4. 礼物消息延迟处理
if ([self isGiftMessage:messageData]) {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.05 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self appendAndScrollToBottom];
    });
}

预期效果

1. 减少礼物动画与消息更新的视觉冲突
2. 提供更平滑的用户体验
3. 保持消息的实时性
4. 适用于连续送礼场景

风险评估

• 低风险：只修改UI更新逻辑，不影响核心功能
• 兼容性：保持现有API不变
• 性能：轻微提升，减少视觉冲突

测试建议

1. 测试单个礼物发送
2. 测试连续快速送礼
3. 测试不同礼物类型
4. 测试消息列表滚动状态下的表现