c# - UWP:如何为 RenderTranform 设置动画并保持其可用?
问题描述
我有一个非常简单的项目,我需要为元素的 RenderTransform 设置动画,然后进一步操作这种变换。
请在此处找到 MVCE 作为参考:https ://github.com/cghersi/UWPExamples/tree/master/RenderTransformAnimation 。
场景如下:有一个ScrollViewer m_scrollView
,有一个Canvas
内容m_zoomView
。为了这个例子,我们还有一个CompositeTransform m_zoomViewTransform = m_zoomView.RenderTransform
.
我使用以下方法来操作 RenderTransform,无论有没有动画:
private void SetEffectiveOffsetOfScrollView(Point newOffset, bool isAnimated)
{
if (isAnimated)
{
TimeSpan dur = TimeSpan.FromSeconds(0.2);
Storyboard sb = new Storyboard { Duration = dur };
DoubleAnimation animationX = new DoubleAnimation
{
To = newOffset.X,
Duration = dur,
AutoReverse = false
};
DoubleAnimation animationY = new DoubleAnimation
{
To = newOffset.Y,
Duration = dur,
AutoReverse = false
};
sb.Children.Add(animationX);
sb.Children.Add(animationY);
Storyboard.SetTarget(animationX, m_zoomViewTransform);
Storyboard.SetTarget(animationY, m_zoomViewTransform);
Storyboard.SetTargetProperty(animationX, "CompositeTransform.TranslateX");
Storyboard.SetTargetProperty(animationY, "CompositeTransform.TranslateY");
sb.Begin();
sb.Completed += (sender, o) =>
{
m_zoomViewTransform.TranslateX = newOffset.X;
m_zoomViewTransform.TranslateY = newOffset.Y;
};
}
else
{
m_zoomViewTransform.TranslateX = newOffset.X;
m_zoomViewTransform.TranslateY = newOffset.Y;
}
}
现在,如果我使用SetEffectiveOffsetOfScrollView()
with isAnimated = true
,我将无法再更改RenderTransform
,或者至少我不再看到 UI 有任何更新。
在 MVCE 中,我添加了一个使用 调用该SetEffectiveOffsetOfScrollView()
方法的按钮isAnimated = true
,并添加了一个 Manipulation 事件来平移m_zoomView Canvas
: 一旦单击该按钮,我就无法再平移Canvas
.
如何使用SetEffectiveOffsetOfScrollView()
with为转换设置动画,仍然能够在此操作后看到 UI 的更新animate=false
?
解决方案
这是由于依赖属性值优先,如下所述: https ://docs.microsoft.com/en-us/windows/uwp/xaml-platform/dependency-properties-overview#dependency-property-value-precedence
在此重现中,故事板仍处于活动状态,因为 DoubleAnimations 上的默认 FillBehavior=HoldEnd。由于这些动画仍然存在,因此即使在 isAnimated=false 情况下设置了新的本地值,也会使用动画值。
简单的解决方法是在将新的本地值设置为保持后,在 Storyboard 的 Completed 处理程序中调用 sb.Stop() 。这将停止动画,删除它们持有的 Animated 值,并允许使用 Local 值。
推荐阅读
- mongodb - 总和列,在 Mongoose 中的日期字段之间
- python - Working with multiple filename patterns in python
- reactjs - 从字符串到 int 的 api 响应
- tensorflow - TensorRTOptimizer 警告
- r - 基于两个标志的总和
- python - 如何从 Python 中的给定字符串中删除子字符串列表?
- java - 重启tomcat使应用程序更快
- html - 不透明的 CSS 动画不适用于 safari,但适用于谷歌浏览器
- c++ - 如何打开一个文本文件
- python - 如何将excel日期时间作为浮点数而不是xlwings中的'datetime.datetime'?