动画,Image.Source和绑定

丹尼斯

我有这个视图模型:

public class ViewModel : ViewModelBase
{
    public ViewModel()
    {
        // indeed, images are dynamically generated
        normal = new BitmapImage(new Uri("Normal.jpg", UriKind.Relative));
        flash = new BitmapImage(new Uri("Flash.jpg", UriKind.Relative));
    }

    public bool IsFlashing
    {
        get { return isFlashing; }
        set
        {
            if (isFlashing != value)
            {
                isFlashing = value;
                OnPropertyChanged("IsFlashing");
            }
        }
    }
    private bool isFlashing;

    public ImageSource Normal
    {
        get { return normal; }
        private set
        {
            if (normal != value)
            {
                normal = value;
                OnPropertyChanged("Normal");
            }
        }
    }
    private ImageSource normal;

    public ImageSource Flash
    {
        get { return flash; }
        set
        {
            if (flash != value)
            {
                flash = value;
                OnPropertyChanged("Flash");
            }
        }
    }
    private ImageSource flash;
}

我想(从动画视图图像NormalFlash再次和)时IsFlashing == true为了演示我要实现的目标,我将发布一段XAML:

        <DataTemplate x:Key="MyTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>

                <CheckBox Content="Is flashing" IsChecked="{Binding IsFlashing}"/>

                <Image x:Name="MyImage" Grid.Row="1" Source="{Binding Normal}"/>
            </Grid>

            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsFlashing}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyImage" 
                                                               Storyboard.TargetProperty="Source" 
                                                               RepeatBehavior="Forever">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Normal}"/>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="{Binding Flash}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

这是行不通的,因为动画引擎无法冻结带有绑定的情节提要。还有其他方法可以做到这一点吗?

我可以在视图模型中使用计时器来解决这个问题……但是这种方法闻起来很香。

更新根据Richard Deeming的回答,数据模板看起来是这样的。它比定时器更有效,并且绝对更好:

        <DataTemplate x:Key="MyTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition />
                </Grid.RowDefinitions>

                <CheckBox Content="Is flashing" IsChecked="{Binding IsFlashing}"/>

                <Image x:Name="NormalImage" Grid.Row="1" Source="{Binding Normal}"/>
                <Image x:Name="FlashImage" Grid.Row="1" Source="{Binding Flash}" Visibility="Collapsed"/>
            </Grid>

            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsFlashing}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" 
                                                               Storyboard.TargetProperty="Visibility" 
                                                               RepeatBehavior="Forever"
                                                               Duration="0:0:1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FlashImage" 
                                                               Storyboard.TargetProperty="Visibility" 
                                                               RepeatBehavior="Forever"
                                                               Duration="0:0:1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard FillBehavior="Stop">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalImage" 
                                                               Storyboard.TargetProperty="Visibility"
                                                               Duration="0:0:1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard>
                            <Storyboard FillBehavior="Stop">
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FlashImage" 
                                                               Storyboard.TargetProperty="Visibility"
                                                               Duration="0:0:1">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Collapsed}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
理查德姆(Richard Deeming)

最简单的解决方案可能是具有两个重叠的图像-一个绑定到Normal源,另一个绑定到Flash源。然后,您可以使用StoryboardVisibility为两张图片上的属性设置动画

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

插入动画和绑定

来自分类Dev

Android数据绑定和动画

来自分类Dev

如何正确绑定MVVM中的Image.Source?

来自分类Dev

使用INotifyPropertyChanged从BitmapImage变量绑定Image.Source

来自分类Dev

SwiftUI中的动画绑定

来自分类Dev

视差滚动绑定动画,以不同的速度动画

来自分类Dev

将Image.Source绑定到System.Drawing.Image不显示

来自分类Dev

剔除绑定中的同步动画

来自分类Dev

在Flash中加载,渲染和设置3D绑定模型的动画(或提出替代方法)

来自分类Dev

为什么将图像路径绑定到Image.Source不能按这种方式工作

来自分类Dev

Swift Image 打开动画

来自分类Dev

CSS动画和变形

来自分类Dev

Android动画和过渡

来自分类Dev

CSS动画和过渡

来自分类Dev

CSS动画和变形

来自分类Dev

jQuery动画和流星

来自分类Dev

UIAlert视图和动画

来自分类Dev

AngularJS和动画

来自分类Dev

延迟和动画jQuery

来自分类Dev

视图和动画问题

来自分类Dev

CSS 和 SVG 动画

来自分类Dev

如何生成这样的动画和“按钮动画”?

来自分类Dev

我想防止触发第二次点击,直到使用绑定和取消绑定完成动画,但它无法正常工作

来自分类Dev

优化控制模板以使绑定动画化

来自分类Dev

动画后WPF元素高度绑定丢失

来自分类Dev

jQuery动画后绑定Angular数据

来自分类Dev

暂停和恢复圆形动画

来自分类Dev

CSS亮度和对比动画

来自分类Dev

自动版式,约束和动画