南昌 网站制作,wordpress官网密码错误,wordpress 加速js插件,网页制作如何新建站点WPF开发者QQ群#xff1a; 340500857 | 微信群 - 进入公众号主页 加入组织玩玩彩虹文字#xff0c;这次用 LinearGradientBrush 并且制作成按钮#xff0c;虽然没技术含量反而有些实用#xff0c;这就是返璞归真吗。首先来回忆下 LinearGradientBrush 的用法。LinearG… WPF开发者QQ群 340500857 | 微信群 - 进入公众号主页 加入组织 玩玩彩虹文字这次用 LinearGradientBrush 并且制作成按钮虽然没技术含量反而有些实用这就是返璞归真吗。首先来回忆下 LinearGradientBrush 的用法。LinearGradientBrush 表示线性渐变的画刷它的 StartPoint和 EndPoint 代表渐变的方向。LinearGradientBrush 还包含一个 GradientStops 集合其中每个对象指定一种颜色和一个沿画笔渐变轴的偏移量。PS有更好的方式欢迎推荐。01—代码如下一、概念很简单实际使用起来也很简单。例如将下面的 LinearGradientBrush 应用在文字上文字就变成了彩虹色。LinearGradientBrush x:NameRainbowBrush StartPoint0,0.5 EndPoint1,.5GradientStop x:NameG2 Offset.166 Color#65b849 /GradientStop x:NameG4 Offset.3333 Color#f7b423 /GradientStop x:NameG6 Offset0.5 Color#f58122 /GradientStop x:NameG10 Offset0.666 Color#de3a3c /GradientStop x:NameG12 Offset0.8633 Color#943f96 /GradientStop x:NameG14 Offset01 Color#009fd9 /
/LinearGradientBrush这时候也可以在属性窗口里看到这个画刷的具体内容二、如果两个 GradientStop 之间 Color 相同就不会发生渐变如果两个 GradientStop 之间 Offset 就会马上变。利用这种手法再加上我使用了等宽字体所以可以制造出每个字颜色不一样的彩虹文字LinearGradientBrush x:NameRainbowBrush StartPoint0,0.5 EndPoint1,.5GradientStop x:NameG1 Offset0 Color#65b849 /GradientStop x:NameG2 Offset.166 Color#65b849 /GradientStop x:NameG3 Offset.166 Color#f7b423 /GradientStop x:NameG4 Offset.3333 Color#f7b423 /GradientStop x:NameG5 Offset0.3333 Color#f58122 /GradientStop x:NameG6 Offset0.5 Color#f58122 /GradientStop x:NameG7 Offset0.5 Color #f8f8f8 /GradientStop x:NameG8 Offset0.5 Color #f8f8f8 /GradientStop x:NameG9 Offset0.50 Color#de3a3c /GradientStop x:NameG10 Offset0.666 Color#de3a3c /GradientStop x:NameG11 Offset0.666 Color#943f96 /GradientStop x:NameG12 Offset0.8633 Color#943f96 /GradientStop x:NameG13 Offset0.8633 Color#009fd9 /GradientStop x:NameG14 Offset01 Color#009fd9 /
/LinearGradientBrush这时候属性窗口里的画刷就成了这样下一步我将这个 TextBlock 放进按钮的控件模板里面在 MouseOver 的 Storyboard 里控制LinearGradientBrush改变方向。有两种方式可以改变它的方向其中一种是用 PointAnimation 改变 StartPoint 和 EndPoint另一种是用 DoubleAnimation 直接改变 LinearGradientBrush.RelativeTransform。后一种的写法如下三、创建代码如下StoryboardDoubleAnimation Storyboard.TargetNametextBlockStoryboard.TargetProperty(TextBlock.Foreground).(Brush.RelativeTransform).(RotateTransform.Angle)To90Duration0:0:0.5DoubleAnimation.EasingFunctionQuarticEase EasingModeEaseOut //DoubleAnimation.EasingFunction/DoubleAnimation
/StoryboardLinearGradientBrush x:NameRainbowBrush StartPoint0,0.5 EndPoint1,.5LinearGradientBrush.RelativeTransformRotateTransform Angle0 CenterX0.5 CenterY0.5 //LinearGradientBrush.RelativeTransform
/LinearGradientBrush运行起来的效果就是将所有颜色旋转 90 度看起来就像以前的 Apple 的 Logo 配色。四、在上面的 LinearGradientBrush 里我偷偷藏了两个白色的 GradientStop 名为 G6 和 G7 那两个它们的 Offset 都是 0.5处于正中间的位置。在按钮的 Pressed 状态中用 DoubleAnimation 将它们前后的所有 GradientStop 的 Offset 都设置为 0 或 1效果是将所有颜色向两边推。因为现在旋转了 90 度所以实际上是向上下两个方向推DoubleAnimation Storyboard.TargetNameG2Storyboard.TargetPropertyOffsetTo0 /……
……DoubleAnimation Storyboard.TargetNameG13Storyboard.TargetPropertyOffsetTo1 /到这里一个彩虹按钮就完成了。02—效果预览鸣谢素材提供者 - [Dino]陈锦华源码地址如下https://github.com/DinoChan/wpf_design_and_animation_labgithubhttps://github.com/yanjinhuagood/WPFDevelopers.gitgiteehttps://gitee.com/yanjinhua/WPFDevelopers.gitWPF开发者QQ群 340500857 blogs https://www.cnblogs.com/dino623Githubhttps://github.com/DinoChan出处https://www.cnblogs.com/dino623版权本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。转载请著名作者 出处 https://github.com/yanjinhuagood扫一扫关注我们更多知识早知道点击阅读原文可跳转至源代码
