StoryBoard总是在xaml(windows商店应用程序)中转换后以原始坐标开始

本文关键字：转换 开始 坐标 原始 应用程序 xaml windows StoryBoard | 更新日期: 2023-09-27 18:26:22

我有一个画布，它在转换为更靠近特定坐标后实现了双重动画。

变换和双重动画效果良好。但在动画完成后，画布会重置到布局的最右角。奇怪的是，如果我不给画布任何宽度或删除网格列，这种行为就不存在。

你知道我在这里错过了什么吗？我正在尝试将源放在页面的右侧，将目标放在左侧。

编辑-1:经过一些测试，我意识到这些值并没有重置，但故事板/双重动画本身正在将画布向右移动。不过我不明白是什么原因造成的。

第2版：经过进一步的调查，看起来双动画总是从画布的初始坐标开始，而不是使用当前位置。即使从坐标提到相对于整个网格，它也只能根据原始布局设置动画。有没有办法强制故事板使用当前位置？

这是代码：XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
<Canvas Name="target"  >
        <Rectangle  Width="150" Height="150" Fill="Gray"  />
    </Canvas>
<Canvas Name="source"  ManipulationMode="All" Grid.Column="1">
            <Rectangle Name="testRectangle"  Width="150" Height="150" Fill="Blue"   />
        </Canvas>
</Grid>

代码背后：

Public Point p = new Point(225, 225);
 public MainPage()
        {
            this.InitializeComponent();
            DragabbleRectangle();
        }
private void DragabbleRectangle()
        {
            source.ManipulationDelta += source_ManipulationDelta;
            source.RenderTransform = new CompositeTransform(); ;
        }
void source_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
Point origin = new Point(0, 0);
Canvas rect = sender as Canvas;
Point pT= rect.TransformToVisual(Window.Current.Content).TransformPoint(origin);
CompositeTransform tT = rect.RenderTransform as CompositeTransform;
tT.TranslateX += e.Delta.Translation.X;
tT.TranslateY += e.Delta.Translation.Y;
var distance = Math.Pow(pT.X - p.X,2) + Math.Pow(pT.Y-p.Y, 2);
if (distance  < 2500)
            {
                Duration d = TimeSpan.FromSeconds(1);
                rect.Margin = new Thickness(0);
                rect.RenderTransform = tT;// new CompositeTransform();
                DoubleAnimation xAnimation = new DoubleAnimation { To = p.X, From = pT.X,
                Duration = d, EasingFunction = new QuinticEase() };
                DoubleAnimation yAnimation = new DoubleAnimation { To = p.Y, From = pT.Y,
                Duration = d, EasingFunction = new QuinticEase() };
                Storyboard.SetTargetProperty(xAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
                Storyboard.SetTargetProperty(yAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
                Storyboard storyboard = new Storyboard();
                Storyboard.SetTarget(storyboard, rect);
                storyboard.Children.Add(xAnimation);
                storyboard.Children.Add(yAnimation);
                storyboard.Begin();
}
        }

StoryBoard总是在xaml(windows商店应用程序)中转换后以原始坐标开始

看起来您没有订阅故事板完成事件。如果是这种情况，则必须给出与原始坐标的相对距离。以下是一些你可以尝试的方法：

将根网格命名为布局

<Grid x:name="layout" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
...
</Grid>

在后面的代码中，将动画更改为相对距离。。。

Point relative = layout.TransformToVisual(source).TransformPoint(origin);
DoubleAnimation xAnimation = new DoubleAnimation { To = p.X + relative.X, From = tT.TranslateX,
                Duration = d, EasingFunction = new QuinticEase() };
DoubleAnimation yAnimation = new DoubleAnimation { To = p.Y + relative.Y, From = tT.TranslateY,
                Duration = d, EasingFunction = new QuinticEase() };
相关文章：