文字的宽度
# 自定义一个 Shape 子类 GeometryTextShape
# 然后内容使用 formattedText.BuildGeometry 计算出 Geometry
# 然后设置 GeometryTextShape ,StrokeThickness 值 ,这样就可以无级设置宽度了
public class GeometryTextShape : Shape {}
# 核心代码
var formattedText = new FormattedText(this.Text ?? string.Empty,
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface(this.FontFamily, this.FontStyle, this.FontWeight, this.FontStretch), this.FontSize, Brushes.Black, 100);
this.textGeometry = formattedText.BuildGeometry(new Point());
单独设置文字动画
# 将文字打散,然后将 Array 的文字作为 ItemsControl 的 ItemsSource
文字横向显示
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
# 设置 <ItemsControl.ItemTemplate /> 针对每个文字设置为一个 TextBlock, 并针对它设置动画
## 这里是跳起又落下的动画
<TextBlock.Resources>
<Storyboard x:Key="Storyboard">
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.Y" To="-30" Duration="0:0:0.2" />
<DoubleAnimation
BeginTime="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.Y" To="0" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="3" EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</TextBlock.Resources>
<TextBlock.RenderTransform>
<TranslateTransform x:Name="TextTransform" Y="0" />
</TextBlock.RenderTransform>
## 鼠标移入时运行动画
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource Storyboard}" />
</EventTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
按下颜色分离动画
如果颜色有很多层的话,使用代码处理可能会方便一些
# 将背景设置为多层颜色, 中间要设置 2 个白色的White
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0 .5" EndPoint="1 .5">
<GradientStop x:Name="GradientStop1" Offset="0" Color="#4a0e68" />
<GradientStop x:Name="GradientStop2" Offset="0.14" Color="#4a0e68" />
<GradientStop x:Name="GradientStop3" Offset="0.14" Color="#b62223" />
<GradientStop x:Name="GradientStop4" Offset="0.29" Color="#b62223" />
<GradientStop x:Name="GradientStop5" Offset="0.29" Color="#fdd70c" />
<GradientStop x:Name="GradientStop6" Offset="0.43" Color="#fdd70c" />
<GradientStop x:Name="GradientStop7" Offset="0.43" Color="#f16704" />
<GradientStop x:Name="GradientStop8" Offset="0.57" Color="#f16704" />
<GradientStop x:Name="G7" Offset="0.57" Color="BlueViolet" />
<GradientStop x:Name="G8" Offset="0.57" Color=" BlueViolet" />
<GradientStop x:Name="GradientStop9" Offset="0.57" Color="#69982d" />
<GradientStop x:Name="GradientStop10" Offset="0.71" Color="#69982d" />
<GradientStop x:Name="GradientStop11" Offset="0.71" Color="#0075a5" />
<GradientStop x:Name="GradientStop12" Offset="0.85" Color="#0075a5" />
<GradientStop x:Name="GradientStop13" Offset="0.85" Color="#0b0045" />
<GradientStop x:Name="GradientStop14" Offset="1" Color="#0b0045" />
<LinearGradientBrush.RelativeTransform>
<RotateTransform x:Name="ForegroundRotateTransform" Angle="0" CenterX=".5" CenterY=".5" />
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
## 鼠标按下所有颜色往 < 0 与 > 1 移动,鼠标弹起恢复原样,但是要注意鼠标移出时也要恢复一下,因为可能会按着鼠标移出,再释放鼠标的
### 恢复
<EventTrigger RoutedEvent="TextBlock.MouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Offset" To="0" Duration="0:0:.1" />
<DoubleAnimation
Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Offset" To="0.14" Duration="0:0:.1" />
。。。
<DoubleAnimation
Storyboard.TargetName="GradientStop13" Storyboard.TargetProperty="Offset" To="0.85" Duration="0:0:.1" />
<DoubleAnimation
Storyboard.TargetName="GradientStop14" Storyboard.TargetProperty="Offset" To="1" Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
### 分离
<EventTrigger RoutedEvent="TextBlock.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="GradientStop1" Storyboard.TargetProperty="Offset" To="-10" Duration="0:0:3" />
<DoubleAnimation
Storyboard.TargetName="GradientStop2" Storyboard.TargetProperty="Offset" To="-10" Duration="0:0:3" />
。。。
<DoubleAnimation
Storyboard.TargetName="GradientStop13" Storyboard.TargetProperty="Offset" To="10" Duration="0:0:3" />
<DoubleAnimation
Storyboard.TargetName="GradientStop14" Storyboard.TargetProperty="Offset" To="10" Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>