TextBlock上的动画文本显示为来自设备左角并向右移动 [英] Animation on TextBlock Text to display as a come from left corner of device and go to right direction

问题描述

Hello All，

Hello All,

我是Windows Phone应用开发的新手。我的问题是我想动画TextBlock将其显示为可移动的，并且显示类似于从设备的左角移动并向设备的右方向移动。同样，下一个文本应该从设备的右上角
显示，然后向左转。这个过程不断进行。

I am new in Windows Phone Apps Development. My issue is i want to animate TextBlock to display it as a movable and show like coming from left corner of device and move to right direction of device. Similarly next Text should be display from right corner of device and go to left direction. This process continuously going on .

请帮助我如何实现它。如果可能请分享代码。

Please help me how can i achieve it. If possible please share code.

提前致谢。

推荐答案

为了在Windows Phone 8或windows phone silverlight 8.1中进行动画制作，Blend for Visual Studio可以帮助我们更轻松地实现它。我已经创建了一个关于动画textBlock的示例，例如来自设备
的左下角，并按照以下方式移动到设备的正确方向，希望它可以帮助您：

For doing the animation in the windows phone 8 or windows phone silverlight 8.1, the Blend for Visual Studio can help us to implement it more easily. And I have create an example about animating a textBlock like coming from the left corner of device and moving to the right direction of device as following, hope it can help you:

在MainPage.xaml中：

In the MainPage.xaml:

<phone:PhoneApplicationPage.Resources>
		<Storyboard x:Name="StoryboardTextBlock" RepeatBehavior="Forever">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="textBlock">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="582.965"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-23.975"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="11.356"/>
				<EasingDoubleKeyFrame KeyTime="0:0:2" Value="27.76"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        	<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="-107,129,0,0" TextWrapping="Wrap" Text="I can move" VerticalAlignment="Top" Width="218" Foreground="#FFF01414" RenderTransformOrigin="0.5,0.5">
        		<TextBlock.RenderTransform>
        			<CompositeTransform/>
        		</TextBlock.RenderTransform>
        	</TextBlock>

        </Grid>

     </Grid>

在MainPage.xaml.cs中：

In the MainPage.xaml.cs:

public MainPage()
        {
            InitializeComponent();
            this.StoryboardTextBlock.Begin();
        }

最好的问候，

Amy Peng

Best Regards,
Amy Peng

这篇关于TextBlock上的动画文本显示为来自设备左角并向右移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！