开发者

Textblock animation in Blend 4

开发者 https://www.devze.com 2023-04-12 09:41 出处：网络
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 tim
相关专题：animationblendexpression-blendstoryboardxaml

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>

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&#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>

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9