本文将和大家介绍一个 Avalonia 动效界面效果,由三个圆带模糊效果实现的模糊界面动效背景,适合用在各种 AIGC 主题的应用里面
本文代码基于 Avalonia 11.2.x 版本实现,预期在其他 Avalonia 版本也能正常使用
本文效果由 晓嗔戈 提供,我只是记录此实现方法的工具人
界面效果如下图所示,录制的gif中颜色存在一些偏差,动画有些卡顿,实际效果要好一些
实现原理非常简单,就是构建出三个圆形,三个圆形的大小不相同,然后让其做绕圈动画。最后叠加上模糊效果即可
具体实现代码如下
本文内容里面只给出关键代码片段,如需要全部的项目文件,可到下文找到所有代码的下载方法
<Grid Width="500" Height="500" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Styles>
<Style Selector="Ellipse.Animation">
<Setter Property="Opacity" Value="0.6" />
<Style.Animations>
<Animation Duration="0:0:2"
FillMode="Forward" IterationCount="INFINITE">
<KeyFrame Cue="0%">
<Setter Property="RotateTransform.Angle" Value="0.0" />
</KeyFrame>
<KeyFrame Cue="50%">
<Setter Property="TranslateTransform.X" Value="40" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="RotateTransform.Angle" Value="360.0" />
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
<Setter Property="Effect">
<BlurEffect Radius="150" />
</Setter>
</Style>
</Grid.Styles>
<Ellipse Width="350" Height="350" Classes="Animation" Fill="#7BFFC3" RenderTransformOrigin="60% 40%"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 -200 0 0"/>
<Ellipse Width="177" Height="177" Classes="Animation" Fill="#406AFF" RenderTransformOrigin="60% 60%"
HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="-30"/>
<Ellipse Width="150" Height="150" Classes="Animation" Fill="#3EECFF" RenderTransformOrigin="40% 40%"
HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="-20"/>
</Grid>
本文代码放在 github 和 gitee 上,可以使用如下命令行拉取代码。我整个代码仓库比较庞大,使用以下命令行可以进行部分拉取,拉取速度比较快
先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin da21241511b1b7b7834bb5bd2844ece9e9e96ee3
以上使用的是国内的 gitee 的源,如果 gitee 不能访问,请替换为 github 的源。请在命令行继续输入以下代码,将 gitee 源换成 github 源进行拉取代码。如果依然拉取不到代码,可以发邮件向我要代码
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
git pull origin da21241511b1b7b7834bb5bd2844ece9e9e96ee3
获取代码之后,进入 AvaloniaIDemo/WheafairkahealawChowhearrakearwha 文件夹,即可获取到源代码
更多 Avalonia 界面效果博客,请参阅 博客导航
这样的效果在 WPF 实现起来也很简单,以下是一个简单的 WPF 的演示,为了方便演示我这里没有用样式,也只用了一个圆形,代码如下
<Ellipse x:Name="BackgroundBlueEllipse" Width="350" Height="350" Fill="#7BFFC3"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0 -200 0 0" RenderTransformOrigin="0.6,0.4">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="BackgroundBlueEllipseTranslateTransform"></TranslateTransform>
<RotateTransform x:Name="BackgroundBlueEllipseRotateTransform"></RotateTransform>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard Duration="0:0:2" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="BackgroundBlueEllipseTranslateTransform" Storyboard.TargetProperty="X" From="0" To="100" AutoReverse="True" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="BackgroundBlueEllipseRotateTransform" Storyboard.TargetProperty="Angle" From="0" To="360"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
<Ellipse.Effect>
<BlurEffect Radius="150" />
</Ellipse.Effect>
</Ellipse>
本文会经常更新,请阅读原文: https://blog.lindexi.com/post/Avalonia-%E7%95%8C%E9%9D%A2%E6%95%88%E6%9E%9C-%E4%B8%89%E4%B8%AA%E5%9C%86%E5%AE%9E%E7%8E%B0%E6%A8%A1%E7%B3%8A%E7%95%8C%E9%9D%A2%E5%8A%A8%E6%95%88%E8%83%8C%E6%99%AF.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。
如果你想持续阅读我的最新博客,请点击 RSS 订阅,推荐使用RSS Stalker订阅博客,或者收藏我的博客导航
本作品采用
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:
https://blog.lindexi.com
),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请
与我联系
。
无盈利,不卖课,做纯粹的技术博客
以下是广告时间
推荐关注 Edi.Wang 的公众号
欢迎进入 Eleven 老师组建的 .NET 社区
以上广告全是友情推广,无盈利