wpf 一些文字特效

文字的宽度


# 自定义一个 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>

https://www.cnblogs.com/dino623/p/wpf_rainbow_button.html

上一篇
下一篇