feat(rolling): 实现滚动组件的无缝循环播放功能#1561
feat(rolling): 实现滚动组件的无缝循环播放功能#1561laoshuikaixue wants to merge 14 commits intoClassIsland:masterfrom
Conversation
- 将 Grid 布局替换为 StackPanel，添加水平间距设置 - 增加 ItemsControlContainerCopy 副本容器，实现无缝滚动效果 - 修改滚动动画逻辑，计算总宽度时包含间距 - 优化动画关键帧，支持停顿偏移和循环播放 - 添加尺寸变化检测优化，避免重复计算 - 更新组件样式和布局结构
|
解决了滚动末尾留白过大的问题，并实现了首尾相接的无缝滚动效果 与1.x版本逻辑一致 MyVideo_1.mp4 |
HelloWRC
left a comment
There was a problem hiding this comment.
不应考虑使用这种模式实现无缝滚动。因为如果添加了可能随机显示内容的组件（如随机模式的轮播组件或 ExtraIsland 的一言组件），这个动画就会因为两个组件显示的内容不同而露馅。并且同时初始化两份组件也会带来一定的性能负担。
- 移除旧的 ItemsControlContainerCopy 边框和 ItemsControl - 添加 Rectangle 作为 ItemsControlContainerMirror 实现镜像效果 - 使用 VisualBrush 创建容器的视觉镜像
- 将 StackPanel 替换为 Grid 布局以支持更灵活的排列 - 添加 ColumnDefinitions 属性定义自动和固定列宽 - 为 GridScrollContainer 添加高度绑定以匹配容器高度 - 将 ItemsControlContainerMirror 移至 Grid 的第二列 - 为 ItemsControlContainerMirror 添加高度绑定以匹配容器高度 - 完善布局结构提升组件渲染性能
- 将ClipToBounds属性从False更改为True - 添加RenderOptions.BitmapInterpolationMode设置为LowQuality - 添加RenderOptions.EdgeMode设置为Aliased
已修改，使用了 VisualBrush 来实现镜像 |
HelloWRC
left a comment
There was a problem hiding this comment.
根据测试，在滚动尽头的镜像矩形没有按预期显示。请修复此问题，使其能按预期工作。
20260101-0530-28.6796298.mp4
| RenderOptions.BitmapInterpolationMode="LowQuality" | ||
| RenderOptions.EdgeMode="Aliased" |
There was a problem hiding this comment.
在这里指定渲染质量是基于什么目的？这样可能会降低渲染质量，如非必要，最好不要在这里添加这类设置。
|
注意到在重新加载此组件后，镜像矩形的内容更新了。可能是 VisualBrush 未及时更新导致的这个问题。 |
- 移除RenderOptions的低质量设置以改善渲染效果 - 修复ItemsControl的Height绑定以确保正确显示 - 简化VisualBrush的配置参数
export-1767246983419.mp4 |
HelloWRC
left a comment
There was a problem hiding this comment.
20260101-1349-39.5026392.mp4
事实上 VisualBrush 没更新这个问题还是没有被根治……
这个主要是 Avalonia 的 VisualBrush 不是实时更新的，如果要实现像 wpf 那样的实时更新效果，可能要下一番功夫再合适的时机使用一些方法触发笔刷更新才行，这也是为什么我一开始移植的时候放弃了这个实现思路。
检查清单