代码改变世界

wpf 文字动画

2011-08-04 18:06  观海看云  阅读(510)  评论(0编辑  收藏  举报

下班闲来无事,做个文字动画玩玩。

<UserControl.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="1.0" Color="#666666" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</UserControl.Background>
<UserControl.Resources>
<DrawingBrush x:Key="MyWireBrushResource"
Viewport
="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="#66CCCCFF" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#66CCCCFF" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</UserControl.Resources>
<StackPanel Margin="40">
<Border Name="TextBorder" HorizontalAlignment="Left" VerticalAlignment="Center"
Background
="{StaticResource ResourceKey=MyWireBrushResource}">
<TextBlock Name="RealText" FontFamily="Segoe UI" FontSize="60" Margin="40"
Foreground
="White">WPF之家--wpf123
<TextBlock.TextEffects>
<TextEffect PositionCount="1" x:Name="MyTextEffect">
<TextEffect.Transform>
<SkewTransform x:Name="TextEffectSkewTransfrom" CenterX="0" CenterY="0"></SkewTransform>
</TextEffect.Transform>
</TextEffect>
</TextBlock.TextEffects>

<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="15" Duration="0:0:0.25"
RepeatBehavior
="Forever" AutoReverse="True"
Storyboard.TargetName
="TextEffectSkewTransfrom"
Storyboard.TargetProperty
="AngleX"></DoubleAnimation>
<DoubleAnimation From="0" To="43" Duration="0:0:0.5"
RepeatBehavior
="Forever" AutoReverse="True"
Storyboard.TargetName
="TextEffectSkewTransfrom"
Storyboard.TargetProperty
="AngleY"></DoubleAnimation>
<DoubleAnimation From="30" To="400" Duration="0:0:13"
RepeatBehavior
="Forever" AutoReverse="True"
Storyboard.TargetName
="TextEffectSkewTransfrom"
Storyboard.TargetProperty
="CenterX"></DoubleAnimation>
<Int32AnimationUsingKeyFrames
Storyboard.TargetName="MyTextEffect"
Storyboard.TargetProperty
="PositionStart"
Duration
="0:0:13"
AutoReverse
="True"
RepeatBehavior
="Forever">
<Int32AnimationUsingKeyFrames.KeyFrames>
<DiscreteInt32KeyFrame Value="0" KeyTime="0:0:0" />
<DiscreteInt32KeyFrame Value="1" KeyTime="0:0:1" />
<DiscreteInt32KeyFrame Value="2" KeyTime="0:0:2" />
<DiscreteInt32KeyFrame Value="3" KeyTime="0:0:3" />
<DiscreteInt32KeyFrame Value="4" KeyTime="0:0:4" />
<DiscreteInt32KeyFrame Value="5" KeyTime="0:0:5" />
<DiscreteInt32KeyFrame Value="6" KeyTime="0:0:6" />
<DiscreteInt32KeyFrame Value="7" KeyTime="0:0:7" />
<DiscreteInt32KeyFrame Value="8" KeyTime="0:0:8" />
<DiscreteInt32KeyFrame Value="9" KeyTime="0:0:9" />
<DiscreteInt32KeyFrame Value="10" KeyTime="0:0:10" />
<DiscreteInt32KeyFrame Value="11" KeyTime="0:0:11" />
<DiscreteInt32KeyFrame Value="12" KeyTime="0:0:12" />
</Int32AnimationUsingKeyFrames.KeyFrames>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Border>

<Rectangle Name="ReflectedText"
Height
="{Binding ElementName=TextBorder,Path=ActualHeight}"
Width
="{Binding ElementName=TextBorder,Path=ActualWidth}"
HorizontalAlignment
="Left" VerticalAlignment="Top">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#66000000"></GradientStop>
<GradientStop Offset="1.0" Color="#00000000"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.OpacityMask>

<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=TextBorder}">
<VisualBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"></ScaleTransform>
<TranslateTransform Y ="1"></TranslateTransform>
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</StackPanel>

 效果图: