Question

我是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>

Answer 1

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

好消息：这很容易做到。坏消息，一旦你将文本转换成路径就没有回头路，所以这个解决方案不是动态的。

步骤：

添加TextBlock和文本
选择TextBlock＆gt;对象＆gt;路径＆gt;转换为路径
选择路径＆gt;对象路径＆gt;释放复合路径
对于带有“洞”的字母，如O和小E，这将填补这些洞。要解决此问题，请同时选择它们（您必须使用对象和时间轴），然后选择对象＆gt;结合＆gt;排除重叠
现在每个字母都是它自己的Path元素，它们可以相应地设置动画。

下面是一个简单的例子，你需要调整Keyframes和Easings来完成它。

<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&#xd;&#xa;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&#xd;&#xa;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>

Blend 4中的文本块动画

1 个答案: