问题
I would like to create a storyboard that animates two TextBlocks by sliding them from right and left in the center of the Screen. I have tried rotating the TextBlocks and using Global Offset
and Local Offset
properties of Projection
in Blend for Visual Studio and also manually using Translate X and Translate Y properties of the RenderTransform
at specific Keyrames
.
The storyboard does kick off and appears perfect in Blend but when running on the actual device, the TextBlocks don't appear in the center of the screen - sometimes they're in the top-left corner, sometimes in the bottom left and sometimes I barely see the ends of the TextBlocks.
How can I make my TextBlocks retain their positions?
The animation looks like this -> http://share.bannersnack.com/F9C55FD9E8C/bxt5w58pg
I would like them to look something like this
回答1:
Remember to define your RenderTranform
and CompositeTransform
Then you can mess with the animation key values to achieve what you want.
I used a Rotation to achieve the diag, and 2 easing animation to achieved the slide, and a color animation to achieved your fading. All you have to do is change the duration of the animation and the ending values to achieve what you want.
<TextBlock x:Name="textbox1" Text="Super Awesome Diag Text" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Margin="0,200,0,0" >
<TextBlock.RenderTransform>
<CompositeTransform Rotation="330"/>
</TextBlock.RenderTransform>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textbox1">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textbox1">
<EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="100" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimation Storyboard.TargetName="textbox1" Storyboard.TargetProperty="(TextBlock.Foreground).Color" From="Transparent" To="Red" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
来源:https://stackoverflow.com/questions/26828755/what-is-the-best-way-to-achieve-a-diagonal-text-animation-using-storyboards-in-a