What is the best way to achieve a diagonal text animation using storyboards in a Windows Phone Application?

问题

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