在Windows Phone应用程序中使用情节提要板实现对角文本动画的最佳方法是什么? [英] What is the best way to achieve a diagonal text animation using storyboards in a Windows Phone Application?

问题描述

我想创建一个情节提要，通过在屏幕中央左右滑动两个TextBlock来设置动画.我尝试过旋转TextBlocks并在 Visual Studio混合版中使用Projection的Global Offset和Local Offset属性，还尝试在特定的Keyrames.

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.

情节提要板确实会启动，并且在Blend中看起来很完美，但是在实际设备上运行时， TextBlocks不会出现在屏幕中央-有时它们在左上角，有时在左下角，有时我几乎看不到TextBlocks的末端.

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.

如何使TextBlocks保持其位置?

How can I make my TextBlocks retain their positions?

动画看起来像这样-> http://share.bannersnack.com/F9C55FD9E8C/bxt5w58pg

The animation looks like this -> http://share.bannersnack.com/F9C55FD9E8C/bxt5w58pg

我希望他们看起来像这样

I would like them to look something like this

推荐答案

请记住定义您的RenderTranform和CompositeTransform

然后，您可以将动画关键值弄乱，以实现所需的效果.

Then you can mess with the animation key values to achieve what you want.

我使用旋转"来实现诊断，使用2个缓动动画来实现幻灯片，并使用彩色动画来实现淡入淡出.您要做的就是更改动画的持续时间和结束值，以实现所需的效果.

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>

这篇关于在Windows Phone应用程序中使用情节提要板实现对角文本动画的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！