xaml - 为 Metro 应用程序的 Bing map 上的标记图钉设置动画

Question

我有一个 Bing map 控件，我想为 map 上绘制的图钉的位置设置动画。

理想情况下，我想编写这样的代码:

// Image myPin = some Image on the map layer;

var sb = new Storyboard();
var duration = DurationHelper.FromTimeSpan(System.TimeSpan.FromMilliseconds(1000));
sb.Duration = duration;

LocationAnimation ani = new LocationAnimation();
ani.To = new Location(33.3, 11.1); // destination lat, lng
ani.Duration = duration;

sb.Children.Add(ani);
Storyboard.SetTarget(ani, myPin);
Storyboard.SetTargetProperty(ani, "MapLayer.Position");

Resources.Add("moveMyPin", sb);
sb.Begin();

当然没有LocationAnimation框架中的类。有几个类似的:PointAnimation与 Point 一起使用输入，而 DoubleAnimation与个人合作 double值(value)观。

我以为我必须实现我的 Timeline -派生类，但到目前为止我发现的文档在这方面没有帮助，我不知道从哪里开始。

如何为没有 *Animation 类准备好的属性设置动画？我错过了什么吗？

更新 : 我想我可以做类似的事情

// let aniX and aniY be two DoubleAnimation objects
StoryBoard.SetTargetProperty(aniX, "(MapLayer.Position).Latitude")
StoryBoard.SetTargetProperty(aniY, "(MapLayer.Position).Longitude")

但现在我遇到了另一个问题，因为我看不到如何为附加属性设置动画，并且总是得到一个异常，比如“无法解析 TargetProperty (MapLayer.Position).Latitude on specified object”。

所以我想现在的问题变成了:如何为附加属性指定属性路径？

进一步更新 :我可能在“SetTargetProperty”这件事上走错了路，因为这会产生依赖动画(请参阅评论中的链接)。是否有更好的方法将标记针设置为坐标目标？

更新 3 :正如 Jared 指出的，我可以尝试为 RenderTransform 设置动画。 ，或者使用过渡来实现我的结果。我已经走了这条路，这似乎不是我的解决方案。这是我发现的:

使用 RepositionThemeAnimation ，看来我必须给出大头针的新像素位置。这有几个原因:首先，我知道引脚的纬度/经度目的地，但必须计算出投影(据我所知，没有公共(public)接口(interface)可以使用投影)。其次，投影本身可以随着 map 的缩放/平移而改变。动画结束时的像素目标不能与初始像素目标相同。在我的场景中，这是一个主要问题，因为在动画发生时 map 很可能正在移动。

使用 RepositionThemeTransition所有奇怪的像素/投影问题都消失了。到目前为止，这是我能够看到我期望的动画的唯一方法。我只是设置了转换并设置了标签的新纬度/经度位置(通过 MapLayer.SetPosition)。但它有两个主要问题。我无法设置动画的持续时间(也无法设置缓动功能)。最重要的是，当引脚到达最终位置时，我看不到任何执行代码的方法。

Answer 1

附加属性可以设置动画，但您必须将它们的名称括在括号中。在此处查看示例:

http://www.charlespetzold.com/blog/2007/09/080231.html

但是，我相信这仅适用于设置整个值(位置)，可能不适用于子属性(纬度和经度)。

我想知道您是否可以提供有关您正在尝试做的事情的更多信息。这是临时动画吗？即，您是否希望图钉在入口或离开时进行动画处理？如果是这样，您可以只在 RenderTransform X 和 Y 上做一个动画。您实际上不会更改图钉的位置，但您可以使用 RenderTransform 临时更改它的绘制位置。

更好的是，您也许可以摆脱现在内置于框架中的免费动画。您甚至不需要 Storyboard来使用它们，只需将它们设置在元素上，如下所示:

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
</Button>

有关动画库的更多示例，甚至许多动画的视频预览，请参阅:

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx