如何动态添加ObjectAnimationUsingKeyFrames
我想实现一个点击按钮时触发一个切换图片的功能。图片被包装在xap文件里面了。
代码如下。
- XML code
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded"><Image Margin="82,112,81,124" Grid.Column="1" x:Name="imgTest"> </Image> <TextBlock Margin="101,60,108,68" Grid.Column="1" Grid.Row="1" Text="TextBlock" TextWrapping="Wrap" d:LayoutOverrides="Width, Height"/> <Button Click="btnShow_Click" x:Name="btnShow" Width="20" Height="20"></Button> <StackPanel x:Name="MyPanl"> <StackPanel.Resources> <Storyboard x:Name="MyStory" > </Storyboard> </StackPanel.Resources> </StackPanel></Grid>
C#代码如下
- C# code
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) { BitmapImage bitmapImages = new BitmapImage(); bitmapImages.UriSource = new Uri("/Test/Te/Dnode.png", UriKind.RelativeOrAbsolute); imgTest.Source = bitmapImages; BitmapSource source; ImageSource im; var keyFrames = new ObjectAnimationUsingKeyFrames(); BitmapImage bitmapImage = new BitmapImage(); bitmapImage.UriSource = new Uri("/Test/Te/Dnode.png", UriKind.RelativeOrAbsolute); source = bitmapImage; im = bitmapImage; //BitmapSource source = bitmapImage; //DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame(); //keyFrame.Value = bitmapImage; //keyFrame.KeyTime = TimeSpan.FromSeconds(0.2); keyFrames.KeyFrames.Add(new DiscreteObjectKeyFrame { Value = im, KeyTime = new TimeSpan(0, 0, 0, 1) }); bitmapImage = new BitmapImage { UriSource = new Uri("/Test/Te/Dnode2.png", UriKind.RelativeOrAbsolute) }; //source.ClearValue(Image.SourceProperty); im = bitmapImage; //source = bitmapImage; keyFrames.RepeatBehavior = RepeatBehavior.Forever; keyFrames.KeyFrames.Add(new DiscreteObjectKeyFrame { Value = im, KeyTime = new TimeSpan(0, 0, 0, 1) }); MyStory.Children.Add(keyFrames); Storyboard.SetTarget(keyFrames, imgTest); Storyboard.SetTargetProperty(keyFrames, new PropertyPath(Image.SourceProperty)); } private void btnShow_Click(object sender, RoutedEventArgs e) { MyStory.Begin(); }
有几个问题想问一下。
1.如果我在<Storyboard x:Name="MyStory" >
这里设置了 Storyboard.TargetName和Storyboard.TargetProperty 属性是不是代码中设置就可以不写了。
2.我在xaml代码中这样写
- XML code
<StackPanel x:Name="MyPanl"> <StackPanel.Resources> <Storyboard x:Name="MyStory" > <ObjectAnimationUsingKeyFrames Duration="00:00:00.4" RepeatBehavior="Forever" Storyboard.TargetName="imag" Storyboard.TargetProperty="Source"> <DiscreteObjectKeyFrame KeyTime="00:00:00.2" x:Name="Run"> <DiscreteObjectKeyFrame.Value> <BitmapImage UriSource="/Test/Te/Dnode.png"></BitmapImage> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> <DiscreteObjectKeyFrame KeyTime="00:00:00.2" x:Name="Stop"> <DiscreteObjectKeyFrame.Value> <BitmapImage UriSource="/Test/Te/Dnode2.png"></BitmapImage> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </StackPanel.Resources> </StackPanel>
点show的时候可以实现动画。为什么动态添加时不能实现?是不是我的代码有问题。
请各路大神指点一下。快把我搞疯了...
[解决办法]
代码中存在几个问题
1、没有设置ObjectAnimationUsingKeyFrames 的 Duration
2、KeyTime是关键帧的时间,不能设为一样
3、Value应该设置为BitmapImage,而不是ImageSource
修改后的代码:
//BitmapImage bitmapImages = new BitmapImage();
//bitmapImages.UriSource = new Uri("/Test/Te/Dnode.jpg", UriKind.RelativeOrAbsolute);
//imgTest.Source = bitmapImages;
//BitmapSource source;
//ImageSource im;
var keyFrames = new ObjectAnimationUsingKeyFrames();
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("/Test/Te/Dnode.png", UriKind.Relative);
//source = bitmapImage;
//im = bitmapImage;
keyFrames.Duration = new Duration(TimeSpan.FromSeconds(3));
keyFrames.RepeatBehavior = RepeatBehavior.Forever;
//BitmapSource source = bitmapImage;
//DiscreteObjectKeyFrame keyFrame = new DiscreteObjectKeyFrame();
//keyFrame.Value = bitmapImage;
//keyFrame.KeyTime = TimeSpan.FromSeconds(0.2);
keyFrames.KeyFrames.Add(new DiscreteObjectKeyFrame
{
Value = bitmapImage,
KeyTime = new TimeSpan(0, 0, 0, 1)
});
BitmapImage bitmapImage2 = new BitmapImage
{
UriSource = new Uri("/Test/Te/Dnode2.png", UriKind.Relative)
};
//source.ClearValue(Image.SourceProperty);
//ImageSource im2 = bitmapImage2;
//source = bitmapImage;
keyFrames.KeyFrames.Add(new DiscreteObjectKeyFrame
{
Value = bitmapImage2,
KeyTime = new TimeSpan(0, 0, 0, 2)
});
MyStory.Children.Add(keyFrames);
Storyboard.SetTarget(keyFrames, imgTest);
Storyboard.SetTargetProperty(keyFrames, new PropertyPath(Image.SourceProperty));