将UWP XAML动画转换为c#
本文关键字:转换 动画 UWP XAML | 更新日期: 2023-09-27 18:03:02
我有一个工作的XAML动画,用于动画一个类似里程表的数字。我需要制作这个动画的六个几乎相同但又不同的版本。据我所知,以这种方式重用动画XAML并不是一种好方法,所以为了保持代码DRY,我转向了动画的编程创建。
在尝试将这个XAML动画转换为c#时,我遇到了一个问题,我的目标无法找到:
未检测到已安装的组件。'r'n'r'n无法解析TargetName Digit1.
如果我调用Storyboard.SetTarget()
而不是Storyboard.SetTargetName()
,我不再得到这个异常,但仍然没有在屏幕上发生任何事情。
谁能告诉我我在这个翻译中做错了什么?
XAML:<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Page.Resources>
<x:Double x:Key="OdometerMoveUpDistance">-101</x:Double>
<Storyboard x:Name="OdometerUpStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="Digit1">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="{StaticResource OdometerMoveUpDistance}" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Canvas x:Name="Odometer" Width="100" Height="100">
<TextBlock x:Name="Digit1" FontSize="100" Text="8">
<TextBlock.RenderTransform><CompositeTransform /></TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Page>
c#: private void Btn_Click(object sender, RoutedEventArgs e)
{
DoubleAnimationUsingKeyFrames digitUp = CreateOdometerdigitAnim(this.Digit1, 0, -101);
var storyboard = new Storyboard();
storyboard.Children.Add(digitUp);
storyboard.Begin(); // Exception happens on this line
}
private DoubleAnimationUsingKeyFrames CreateOdometerdigitAnim(TextBlock digit, double startPos, double endPos)
{
var start = new EasingDoubleKeyFrame();
start.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
start.Value = startPos;
var end = new EasingDoubleKeyFrame();
end.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1000));
end.Value = endPos;
var anim = new DoubleAnimationUsingKeyFrames();
anim.KeyFrames.Add(start);
anim.KeyFrames.Add(end);
Storyboard.SetTargetProperty(anim, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
Storyboard.SetTargetName(anim, digit.Name);
/* Using SetTarget instead of SetTargetName throws no exception but still does not animate */
// Storyboard.SetTarget(anim, digit);
return anim;
}
如果我调用Storyboard.SetTargetName()而不是Storyboard.SetTargetName(),我不再得到这个异常,但屏幕上仍然什么也没发生。
需要给Digit1.RenderTransform
一个CompositeTransform
对象。您可以使用XAML或code-behind:
如果在XAML:
<TextBlock x:Name="Digit1" FontSize="100" Text="8">
<TextBlock.RenderTransform>
<CompositeTransform />
</TextBlock.RenderTransform>
</TextBlock>
如果在Code-Behind中,则在storyboard.Begin()
之前添加代码,如下所示:
Digit1.RenderTransform = new CompositeTransform();
...
storyboard.Begin();
我可以用你的代码重现这个问题。我尝试用XAML定义的StoryBoard+Animation,一切都很好。后续需要内部渠道确认在尝试将这个XAML动画转换为c#时,我遇到了一个问题,我的目标无法找到:
未检测到已安装的组件。'r'n'r'n无法解析TargetName Digit1.