当前位置： 文江博客话题详情

Blend 4 中的文本块动画

发布于 2024-12-08 23:45:43 字数 8771 浏览 0 评论 0原文

我对 Blend 还很陌生，我正在制作故事板（请参阅随附的 XAML），而我所坚持的部分是包含单词 INNOVATIONS 的 TextBlock。我的目标是一次从右侧滑入 1 个字母，直到单词完成（希望这是有道理的），

当我陷入困境时，任何人都可以为我指出正确的方向，提前致谢

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="Innovation_Text.MainPage">
<UserControl.Resources>
    <Storyboard x:Name="FLIX_Storyboard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(Brush.RelativeTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.05"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn" Power="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(Brush.RelativeTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.05"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn" Power="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Innovations">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DropShadow">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Innovations" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DropShadow" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.200087"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.200087"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5">

    <Grid.RenderTransform>
        <ScaleTransform x:Name="PageScale" ScaleX="1" ScaleY="1"/>
    </Grid.RenderTransform>


    <Grid.Background>
        <RadialGradientBrush RadiusY="0.726" Center="0.5,0.3" RadiusX="0.427">
            <RadialGradientBrush.RelativeTransform>
                <CompositeTransform CenterY="0.5" CenterX="0.5"/>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FFBB0000" Offset="0.09"/>
            <GradientStop Color="#FF110000" Offset="1"/>
        </RadialGradientBrush>
    </Grid.Background>

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/> 
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid x:Name="Centre" Grid.Row="1" Grid.Column="1" >

        <Grid.RowDefinitions>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="1.9*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="FLIX" Grid.Row="0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" >
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
        <Image x:Name="image" Source="FLIX - Flix w shadow.png">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
    </Grid>

<Grid x:Name="Innovations" Grid.Row="1" VerticalAlignment="Top"  >
        <Viewbox VerticalAlignment="Stretch">
            <TextBlock x:Name="INNOVATIONS_copy" Foreground="#FF050608" FontSize="44" FontFamily="/Innovation_Text;component/Fonts.zip#Helvetica Neue" 
Text="I N N O V A T I O N S" >
    <TextBlock.Effect>
        <DropShadowEffect Color="#FFA34747" Direction="150" BlurRadius="0" ShadowDepth="2"/>
    </TextBlock.Effect>
</TextBlock>
        </Viewbox>
    </Grid>


<Grid x:Name="DropShadow" Grid.Row="2"  VerticalAlignment="Center"  >
<Ellipse Height="9" Stroke="Black" VerticalAlignment="Center" Opacity="0.3" StrokeThickness="0">
        <Ellipse.Effect>
            <BlurEffect/>
        </Ellipse.Effect>
        <Ellipse.Fill>
            <RadialGradientBrush RadiusY="0.859" RadiusX="0.755">
                <GradientStop Color="#FF0E0D0D"/>
                <GradientStop Color="#FF543F3F" Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    </Grid>
    </Grid>
</Grid>

原文

I am pretty new to Blend, i'm working on a storyboard (see attached XAML) and the part i am stuck on is the TextBlock that contains the word INNOVATIONS. My goal for this is to have 1 letter at a time slide in from the right until the word is completed (hope that makes sense)

Can anyone point me in the right direction as i am stuck, thanks in advance

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="Innovation_Text.MainPage">
<UserControl.Resources>
    <Storyboard x:Name="FLIX_Storyboard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(Brush.RelativeTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.05"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn" Power="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(Brush.RelativeTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
            <EasingDoubleKeyFrame KeyTime="0" Value="0.05"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <PowerEase EasingMode="EaseIn" Power="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Innovations">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DropShadow">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Innovations" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DropShadow" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.200087"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="FLIX">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0.200087"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <SineEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5 0.5">

    <Grid.RenderTransform>
        <ScaleTransform x:Name="PageScale" ScaleX="1" ScaleY="1"/>
    </Grid.RenderTransform>


    <Grid.Background>
        <RadialGradientBrush RadiusY="0.726" Center="0.5,0.3" RadiusX="0.427">
            <RadialGradientBrush.RelativeTransform>
                <CompositeTransform CenterY="0.5" CenterX="0.5"/>
            </RadialGradientBrush.RelativeTransform>
            <GradientStop Color="#FFBB0000" Offset="0.09"/>
            <GradientStop Color="#FF110000" Offset="1"/>
        </RadialGradientBrush>
    </Grid.Background>

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/> 
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid x:Name="Centre" Grid.Row="1" Grid.Column="1" >

        <Grid.RowDefinitions>
            <RowDefinition Height="5*"/>
            <RowDefinition Height="1.9*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>

        <Grid x:Name="FLIX" Grid.Row="0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" >
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
        <Image x:Name="image" Source="FLIX - Flix w shadow.png">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
    </Grid>

<Grid x:Name="Innovations" Grid.Row="1" VerticalAlignment="Top"  >
        <Viewbox VerticalAlignment="Stretch">
            <TextBlock x:Name="INNOVATIONS_copy" Foreground="#FF050608" FontSize="44" FontFamily="/Innovation_Text;component/Fonts.zip#Helvetica Neue" 
Text="I N N O V A T I O N S" >
    <TextBlock.Effect>
        <DropShadowEffect Color="#FFA34747" Direction="150" BlurRadius="0" ShadowDepth="2"/>
    </TextBlock.Effect>
</TextBlock>
        </Viewbox>
    </Grid>


<Grid x:Name="DropShadow" Grid.Row="2"  VerticalAlignment="Center"  >
<Ellipse Height="9" Stroke="Black" VerticalAlignment="Center" Opacity="0.3" StrokeThickness="0">
        <Ellipse.Effect>
            <BlurEffect/>
        </Ellipse.Effect>
        <Ellipse.Fill>
            <RadialGradientBrush RadiusY="0.859" RadiusX="0.755">
                <GradientStop Color="#FF0E0D0D"/>
                <GradientStop Color="#FF543F3F" Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    </Grid>
    </Grid>
</Grid>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

清君侧 2024-12-15 23:45:43

我只浏览了 XAML，因为我认为真正的问题是概念性的。如果您想以这种方式为文本设置动画，则需要将其转换为路径，然后将每个字母分解为路径，然后为每个字母设置动画。

好消息：这很容易做到。坏消息是，一旦将文本转换为路径，就无法回头，因此该解决方案不是动态的。

步骤：

  1. 添加 TextBlock 和文本
  2. 选择 TextBlock >对象>路径>转换为路径
  3. 选择路径>对象路径>释放复合路径
  4. 对于带有“孔”的字母，例如 O 和小 E，这将填充孔。要解决此问题，请选择它们（您必须使用“对象”和“时间轴”），然后选择“对象”>“时间轴”。组合>排除重叠
  5. 现在每个字母都是它自己的路径元素，并且可以相应地对它们进行动画处理。

下面是一个简单的示例，您需要调整关键帧和缓动才能完成它。

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="AnimateText.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="FlyInText">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-600"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-605"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path2">
            <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-604"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path3">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-607"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path4">
            <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="-608"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource FlyInText}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M0,2.646978E-23 L7.8750189,2.646978E-23 L7.8750189,29.484579 L42.656353,29.484579 L42.656353,2.646978E-23 L50.531371,2.646978E-23 L50.531371,67.219216 L42.656353,67.219216 L42.656353,36.562753 L7.8750189,36.562753 L7.8750189,67.219216 L0,67.219216 z" Fill="Black" Margin="0,185.374,-90.343,189.407" RenderTransformOrigin="2.05612861363488,0.479776820933295" Stretch="Fill" HorizontalAlignment="Right" Width="50.531">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path1" Data="M21.984941,6.4679997 C18.359924,6.4679999 15.281784,7.7649211 12.750523,10.358763 10.21926,12.952605 8.6567526,16.343351 8.063,20.531 L33.984999,20.531 C33.953749,16.093341 32.88343,12.640094 30.774046,10.171256 28.664661,7.7024188 25.734959,6.4679999 21.984941,6.4679997 z M22.125329,0 C28.406673,3.8146973E-06 33.266121,2.0312538 36.703671,6.0937503 40.141224,10.15625 41.859997,15.796875 41.859997,23.015625 L41.859997,27.046875 7.9688682,27.046875 C8.0938703,32.390626 9.5313917,36.515626 12.281433,39.421876 15.031474,42.328126 18.81278,43.781251 23.625352,43.781251 29.031683,43.781251 34.000505,42.000001 38.531824,38.437501 L38.531824,45.656251 C34.313011,48.718751 28.734802,50.250001 21.797199,50.250001 15.015848,50.250001 9.687644,48.070314 5.8125863,43.710939 1.9375286,39.351564 0,33.218751 0,25.3125 0,17.84375 2.117219,11.757813 6.3516572,7.0546873 10.586095,2.3515663 15.843986,3.8146973E-06 22.125329,0 z" Fill="Black" HorizontalAlignment="Right" Margin="0,203.468,-145.516,188.282" RenderTransformOrigin="0.95688572963324,0.281706929984476" Stretch="Fill" Width="41.86">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path2" Data="M-3.7057691E-22,0 L7.6875185,0 L7.6875185,71.062992 L-3.7057691E-22,71.062992 z" Fill="Black" Margin="0,181.53,-164.829,189.407" RenderTransformOrigin="-1.74699268175043,0.50791554081656" Stretch="Fill" HorizontalAlignment="Right" Width="7.688">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path3" Data="M2.1527299E-06,0 L7.6875206,0 L7.6875206,71.062992 L2.1527299E-06,71.062992 z" Fill="Black" Margin="0,181.53,-188.079,189.407" RenderTransformOrigin="-4.77138386968077,0.50791554081656" Stretch="Fill" HorizontalAlignment="Right" Width="7.688">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path4" Data="M23.90625,6.4679995 C18.96875,6.4679999 15.0625,8.1477098 12.1875,11.50713 9.3124998,14.866549 7.8749998,19.499424 7.8749993,25.405754 7.8749998,31.09333 9.3281248,35.577766 12.234375,38.859058 15.140625,42.140354 19.03125,43.780998 23.90625,43.780998 28.875,43.780998 32.695312,42.171604 35.367187,38.952808 38.039062,35.734016 39.375,31.15583 39.375,25.21825 39.375,19.21817 38.039062,14.593109 35.367187,11.343065 32.695312,8.0930214 28.875,6.4679999
23.90625,6.4679995 z M24.46875,0 C31.625,3.8146973E-06 37.210941,2.2031288 41.226562,6.609375 45.242191,11.015625 47.25,17.125 47.25,24.937502 47.25,32.59375 45.085941,38.726563 40.757812,43.335938 36.429687,47.945313 30.625,50.25 23.343752,50.25 16.25,50.25 10.585937,48.007813 6.3515623,43.523438 2.1171875,39.039063 -2.4586911E-07,33.09375 2.8421709E-14,25.6875 -2.4586911E-07,17.625 2.203125,11.328125 6.6093752,6.796875 11.015625,2.2656288 16.96875,3.8146973E-06
24.46875,0 z" Fill="Black" HorizontalAlignment="Right" Margin="0,203.468,-247.61,188.282" RenderTransformOrigin="-1.19891505330772,0.281716388918158" Stretch="Fill" Width="47.25">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
</Grid>

I only glanced through the XAML because I think the real problem is conceptual. If you want to animate the text in this manner, you'll need to convert it to a Path and then break each letter into a Path, and then animate each letter.

The good news: it is pretty easy to do. The bad news, once you turn the text into paths there is no going back, so this solution isn't dynamic.

Steps:

  1. Add the TextBlock and text
  2. Select the TextBlock > Object > Path > Convert to path
  3. Select the Path > Object Path > Release compound path
  4. For letters with "holes", like O's and little E's, this will fill in the holes. To fix this, select them both (you'll have to use the Objects and Timeline) then Object > Combine > Exclude Overlap
  5. Now each letter is it's own Path element and they can be animated accordingly.

Below is a simple example of this, you would need to adjust the Keyframes and Easings to finish it up.

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="AnimateText.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="FlyInText">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-600"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-605"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path2">
            <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-604"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path3">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-607"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="path4">
            <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="-608"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource FlyInText}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M0,2.646978E-23 L7.8750189,2.646978E-23 L7.8750189,29.484579 L42.656353,29.484579 L42.656353,2.646978E-23 L50.531371,2.646978E-23 L50.531371,67.219216 L42.656353,67.219216 L42.656353,36.562753 L7.8750189,36.562753 L7.8750189,67.219216 L0,67.219216 z" Fill="Black" Margin="0,185.374,-90.343,189.407" RenderTransformOrigin="2.05612861363488,0.479776820933295" Stretch="Fill" HorizontalAlignment="Right" Width="50.531">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path1" Data="M21.984941,6.4679997 C18.359924,6.4679999 15.281784,7.7649211 12.750523,10.358763 10.21926,12.952605 8.6567526,16.343351 8.063,20.531 L33.984999,20.531 C33.953749,16.093341 32.88343,12.640094 30.774046,10.171256 28.664661,7.7024188 25.734959,6.4679999 21.984941,6.4679997 z M22.125329,0 C28.406673,3.8146973E-06 33.266121,2.0312538 36.703671,6.0937503 40.141224,10.15625 41.859997,15.796875 41.859997,23.015625 L41.859997,27.046875 7.9688682,27.046875 C8.0938703,32.390626 9.5313917,36.515626 12.281433,39.421876 15.031474,42.328126 18.81278,43.781251 23.625352,43.781251 29.031683,43.781251 34.000505,42.000001 38.531824,38.437501 L38.531824,45.656251 C34.313011,48.718751 28.734802,50.250001 21.797199,50.250001 15.015848,50.250001 9.687644,48.070314 5.8125863,43.710939 1.9375286,39.351564 0,33.218751 0,25.3125 0,17.84375 2.117219,11.757813 6.3516572,7.0546873 10.586095,2.3515663 15.843986,3.8146973E-06 22.125329,0 z" Fill="Black" HorizontalAlignment="Right" Margin="0,203.468,-145.516,188.282" RenderTransformOrigin="0.95688572963324,0.281706929984476" Stretch="Fill" Width="41.86">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path2" Data="M-3.7057691E-22,0 L7.6875185,0 L7.6875185,71.062992 L-3.7057691E-22,71.062992 z" Fill="Black" Margin="0,181.53,-164.829,189.407" RenderTransformOrigin="-1.74699268175043,0.50791554081656" Stretch="Fill" HorizontalAlignment="Right" Width="7.688">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path3" Data="M2.1527299E-06,0 L7.6875206,0 L7.6875206,71.062992 L2.1527299E-06,71.062992 z" Fill="Black" Margin="0,181.53,-188.079,189.407" RenderTransformOrigin="-4.77138386968077,0.50791554081656" Stretch="Fill" HorizontalAlignment="Right" Width="7.688">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path x:Name="path4" Data="M23.90625,6.4679995 C18.96875,6.4679999 15.0625,8.1477098 12.1875,11.50713 9.3124998,14.866549 7.8749998,19.499424 7.8749993,25.405754 7.8749998,31.09333 9.3281248,35.577766 12.234375,38.859058 15.140625,42.140354 19.03125,43.780998 23.90625,43.780998 28.875,43.780998 32.695312,42.171604 35.367187,38.952808 38.039062,35.734016 39.375,31.15583 39.375,25.21825 39.375,19.21817 38.039062,14.593109 35.367187,11.343065 32.695312,8.0930214 28.875,6.4679999
23.90625,6.4679995 z M24.46875,0 C31.625,3.8146973E-06 37.210941,2.2031288 41.226562,6.609375 45.242191,11.015625 47.25,17.125 47.25,24.937502 47.25,32.59375 45.085941,38.726563 40.757812,43.335938 36.429687,47.945313 30.625,50.25 23.343752,50.25 16.25,50.25 10.585937,48.007813 6.3515623,43.523438 2.1171875,39.039063 -2.4586911E-07,33.09375 2.8421709E-14,25.6875 -2.4586911E-07,17.625 2.203125,11.328125 6.6093752,6.796875 11.015625,2.2656288 16.96875,3.8146973E-06
24.46875,0 z" Fill="Black" HorizontalAlignment="Right" Margin="0,203.468,-247.61,188.282" RenderTransformOrigin="-1.19891505330772,0.281716388918158" Stretch="Fill" Width="47.25">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
</Grid>

回复 原文
~没有更多了~

关于作者

她说她爱他

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文