[UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画
1. 什么是 CompositionBrush
CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔。
使UWP 应用时可以选择使用 XAML 画笔或 CompositionBrush(合成画笔) 绘制 UIElement。很多时候XAML画笔和合成画笔都能实现同样的效果,在官方文档 使用 XAML 画笔 vs。CompositionBrush 这一节中有详细的对比介绍。
CompositionBrush性能更好且能做更复杂的动画。XAML Brush的能力是有极限的,我从短暂的UWP生涯当中学到一件事,XAML Brush越是玩弄动画,动画就越可能因为没有料到的事态而失败……除非超越XAML Brush。所以我不做XAML Brush动画啦。
2. 使用CompositionLinearGradientBrush
CompositionLinearGradientBrush 是线性渐变画笔,它是最基本的画笔之一,可以实现类似 LinearGradientBrush的效果。基本使用步骤如下:
- 通过Compositor创建CompositionLinearGradientBrush;
- 通过Compositor创建并配置CompositionColorGradientStop,然后添加到CompositionLinearGradientBrush的ColorStops里;
- 创建SpriteVisual并将它的Brush设置为CompositionLinearGradientBrush;
- 使用ElementCompositionPreview.SetElementChildVisual 将SpriteVisual设置到某个UIElement的可视化层里。
具体代码如下:
<Rectangle x:Name="Gradient"/>
var compositor = Window.Current.Compositor;
//创建 CompositionLinearGradientBrush。
var gradientBrush = compositor.CreateLinearGradientBrush();
gradientBrush.StartPoint = Vector2.Zero;
gradientBrush.EndPoint = new Vector2(1.0f);
var blueGradientStop = compositor.CreateColorGradientStop();
blueGradientStop.Offset = 0f;
blueGradientStop.Color = Color.FromArgb(255, 43, 210, 255);
var redGradientStop = compositor.CreateColorGradientStop();
redGradientStop.Offset = 1f;
redGradientStop.Color = Color.FromArgb(255, 255, 43, 136);
gradientBrush.ColorStops.Add(blueGradientStop);
gradientBrush.ColorStops.Add(redGradientStop);
//创建SpriteVisual并设置Brush
var backgroundVisual = compositor.CreateSpriteVisual();
backgroundVisual.Brush = gradientBrush;
//将自定义 SpriteVisual 设置为元素的可视化树的最后一个子元素。
ElementCompositionPreview.SetElementChildVisual(Gradient, backgroundVisual);
Gradient.SizeChanged += (s, e) =>
{
if (e.NewSize == e.PreviousSize)
return;
//设置gradientBrush的尺寸
backgroundVisual.Size = e.NewSize.ToVector2();
gradientBrush.CenterPoint = backgroundVisual.Size / 2;
};
运行效果如下:
写了这么多代码,最终的效果其实和下面的XAML一样。
<Rectangle x:Name="Gradient">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FFFF2B88" Offset="1"/>
<GradientStop Color="#FF2BD2FF" Offset="0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
到目前为止看起来CompositionBrush没什么优势。
3. 使用合成动画
其实CompositionBrush其中一个好玩的地方是灵活的合成动画。
要使用合成动画,简单来说就是三个步骤:
- 创建CompositionAnimation;
- 配置CompositionAnimation;
- 在要实现动画效果的CompositionObject及其属性上调用StartAnimation;
下面这段代码是对CompositionColorGradientStop的Offset
属性进行动画:
//创建动画
var relaxGradientStopOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
//配置动画
relaxGradientStopOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
relaxGradientStopOffsetAnimation.InsertKeyFrame(1.0f, ViewModel.IsInPomodoro ?1.0f : 0.75f);
//运行动画
_relaxGradientStop.StartAnimation(nameof(_relaxGradientStop.Offset), relaxGradientStopOffsetAnimation);
完整代码在 这里,具体运行效果如下:
4. 结语
其实上面的动画也可以用XAML画刷及Storyboard实现,但和这些技术已经老夫老妻了,再玩下去也没什么激情,所以想要玩点新花样。最近一直在搞番茄钟应用,有什么新的想法都会塞进去,可以在下面地址安装:
5. 参考
合成画笔 - Windows UWP applications _ Microsoft Docs
合成动画 - Windows UWP applications _ Microsoft Docs
CompositionLinearGradientBrush Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
SpriteVisual Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
ElementCompositionPreview.SetElementChildVisual(UIElement, Visual) Method (Windows.UI.Xaml.Hosting) - Windows UWP applications _ Microsoft Docs
6. 源码
OnePomodoro_Gradients.xaml.cs at master
最新文章
- MySQL中GROUP_CONCAT中排序
- js实现windows扫雷(jquery)
- 二、MongoDB的基础知识简介
- ViewFlipper的简单使用实现图片轮播效果
- Django Admin 简单部署上线
- La=LaULb (单链表)
- 用XCA(X Certificate and key management)可视化程序管理SSL 证书(3)--创建自己定义的凭证管理中心(Certificate Authority)
- Repository在DDD中的应用
- parted
- 小程序 新建项目底部tabbar
- Python标准库--time模块的详解
- css3 media
- 初窥Java之四
- 通过chrome console 快速获取网页连接
- 解决adb:error: unknown host service
- 软件测试_Linux
- C++雾中风景番外篇2:Gtest 与 Gmock,聊聊C++的单元测试
- 最新的 CocoaPods 的使用教程(一)
- 剑指Offer——跳台阶
- ubuntu安装chrome浏览器
热门文章
- java使用FileSystem上传文件到hadoop分布式文件系统配置
- response中文乱码问题
- ZooKeeper 介绍及集群环境搭建
- 构建企业级数据湖?Azure Data Lake Storage Gen2实战体验(中)
- .NET Core 获取请求类容(body)
- python学习笔记之zipfile模块
- Spring MVC-从零开始-web.xml中classpath和classpath* 有什么区别
- 注意!GetThreadPriority的返回值不是系统的优先级值
- Flask基础(10)-->;http的无状态协议解决办法一(客户端cookie)
- Scanner类的next()方法和nextLine()方法的异同点