"[链接]Avalonia 制作复杂布局动画截至本文撰写时，通过“Avalonia 布局动画”、“Avalonia 复杂动画”等关键词仍很难在互联网上直接检索到“如何使用 Avalonia 制作复杂的布局动画”的相关内容。恰好笔者在这方面有些研究，便 ...."

U914922008
邦邦社区 40937 号会员
服务器云平台 tuxedo 虚拟机 • 0 回帖 • 1 浏览 • 3 小时前

Avalonia 制作复杂布局动画

截至本文撰写时，通过 “Avalonia 布局动画”、“Avalonia 复杂动画” 等关键词仍很难在互联网上直接检索到 “如何使用 Avalonia 制作复杂的布局动画” 的相关内容。
恰好笔者在这方面有些研究，便想编撰一篇相对深入的文章。

这是笔者第一次面向互联网公开发表技术文章，如有错漏或用词不当，还请各位读者海涵，或直接指出。

一、简单了解 Avalonia 的动画系统

Avalonia 提供三种类型的动画：

类型	描述	用例
关键帧动画	使用多个关键帧在时间轴上改变一个或多个属性。	由样式选择器触发的复杂、多步骤动画。
控件过渡	在属性值变化时对单个属性进行动画处理。	为属性变化（不透明度、颜色、大小）提供平滑的视觉反馈。
组合动画	在渲染线程上运行的代码驱动动画。	从 C# 控制的高性能或程序化动画。

此外，页面过渡还会在控件（如 TransitioningContentControl 和 Carousel）中切换内容时产生动画。

更详细的内容不再赘述，如不了解请直接查阅 Avalonia 在线文档。

二、布局动画的困局

二.1 布局动画六要素

一个控件在画布上的位置和尺寸由四个角的坐标与宽高决定，即：

Width、Height、Canvas.Left、Canvas.Top、Canvas.Right、Canvas.Bottom。

可能你会想：Grid.Row、DockPanel.Dock 等属性不也能起到类似作用吗？为什么没有把它们包含在内？
——因为它们对动画的支持非常有限，几乎无法用来实现平滑的布局动画。

二.2 布局系统简述

创建控件时并不强制要求提供上述“布局动画六要素”。
例如在 Grid、DockPanel、StackPanel 等布局容器中，你只需要提供一些布局相关的附加信息，容器便会自行计算最终的布局结果。
这些计算结果最终都会反映到控件的 Bounds 属性上，而不是直接反映在 Width、Height、Canvas.Left 等属性上。

二.3 困局

最直观的想法往往是：直接对 Width、Height 使用控件过渡就可以实现动画了。
然而一旦真正尝试，就会发现效果并不理想。很多人可能就卡在这一步，连如何控制 Canvas.Left、Canvas.Top、Canvas.Right、Canvas.Bottom 都还没来得及思考。

正如布局系统简述所说，布局动画六要素并非在所有情况下都是确定的。
从 C# 代码中创建动画固然是一个解决方案，但这会失去 .axaml 文件的灵活性——只要对 .axaml 的改动稍大一些，就必须同步修改创建动画的 C# 代码。
同时，Avalonia 框架动画系统默认提供的各种工具，很可能也需要你重新实现一遍。

这些因素使布局动画的开发成本和门槛都被抬高到了一个不合理的高度。

Avalonia 制作复杂布局动画

Avalonia 制作复杂布局动画

一、简单了解 Avalonia 的动画系统

二、布局动画的困局

二.1 布局动画六要素

二.2 布局系统简述

二.3 困局

相关帖子

赞助商我要投放