如何在winrt中为圆形路径上的文本设置动画？答案

【问题标题】：How can I animate text on a circular path in winrt?如何在winrt中为圆形路径上的文本设置动画？
【发布时间】：2014-09-04 15:20:03
【问题描述】：

我正在尝试为 Win8.1 的 Windows 应用商店应用程序（使用 C#）中的循环路径上的文本设置动画。尽管互联网上有一些关于如何使用 Silverlight 和 WPF 的示例，但这些示例在 WinRT 中似乎根本不起作用（例如缺少很多方法）。

在寻找解决方案时，我还发现了下面的 Stackoverflow 问题，但它仅适用于 Windows 8.0 而不适用于 Windows 8.1，因此我无法使其正常工作。

how to create motion of text along Path animation in winrt application?

如果不从头开始重新实现所有内容，是否有任何解决方案？

【问题讨论】：

我认为this 在 RT 中提供了一个 LayoutPath 替代方案非常简洁，虽然没有机会使用它，但只是一个评论。
好的提示，我可能必须实施一些解决方案，以便字母在曲线上一个接一个地“旋转”，而不是整个 TextBlock，但这仍然是一个好的开始.谢谢
是的，如果您使用单个字母，它会变得容易得多，只需设置一个椭圆作为指南，定位它们并在情节提要中设置您的旋转变换，不费吹灰之力。 LayoutPath 在过去的场景中确实很方便。

标签： c# windows xaml windows-store-apps winrt-xaml

【解决方案1】：

查看 WinRT XAML 工具包中的 CascadingTextBlock 控件，了解如何将一个 TextBlock 拆分为多个的示例。您只需要更改转换动画的方式。如果您的文本是一个常量字符串 - 最好只在 Blend 中创建动画 - 将多个单个字母 TextBlocks 排列在一个圆圈上，并使用提供的工具设计动画。

【讨论】：

不是常量字符串，但是你的 CascadingTexBlock 提示很有用，我去看看。

【解决方案2】：

这不起作用？它纯粹是一个 XAML 解决方案。故事板在加载时开始。

<Window x:Class="WpfApplication3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
   <Window.Resources>
          <Storyboard x:Key="Rotate">
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Label1">
                       <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                       <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
                 </DoubleAnimationUsingKeyFrames>
          </Storyboard>
   </Window.Resources>
   <Window.Triggers>
          <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                 <BeginStoryboard Storyboard="{StaticResource Rotate}"/>
          </EventTrigger>
   </Window.Triggers>
<Grid>
   <Label x:Name="Label1" Content="WordsAndStuff" HorizontalAlignment="Left" Margin="218.388,112.806,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.509,1.782">
          <Label.RenderTransform>
                 <TransformGroup>
                       <ScaleTransform/>
                       <SkewTransform/>
                       <RotateTransform/>
                       <TranslateTransform/>
                 </TransformGroup>
          </Label.RenderTransform>
   </Label>

</Grid>

【讨论】：

这很好，但它是 WPF 解决方案而不是 WinRT/XAML，它适用于单个标签而不是单独的字母。