Question

在要运行的图像上获取动画后我从这里得到的：Animate image in a button 我希望能够打开和关闭动画，具体取决于在按钮上单击外部，即从ViewModel

所以我在Bahavior中添加了一个新的DependencyProperty（包含了所有需要的东西）

 public static readonly DependencyProperty IsShakingProperty =
        DependencyProperty.Register(IsShakingName,
                                    typeof(bool),
                                    typeof(ShakeBehavior),
                                    new PropertyMetadata(DefaultIsShaking));

我已将新公共属性添加到我的ViewModel

public bool IsShaking { get; set; }

但是我可以做些什么来打开和关闭动画，具体取决于 ViewModel属性设置为true还是false？（我想控制动画在按钮上单击）

以下是我认为相关的一些代码

private Timeline CreateAnimationTimeline()
{
    DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();

    animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(0).(1)", UIElement.RenderTransformProperty, RotateTransform.AngleProperty));

    int keyFrameCount = 8;
    double timeOffsetInSeconds = 0.25;
    double totalAnimationLength = keyFrameCount * timeOffsetInSeconds;
    double repeatInterval = RepeatInterval;
    bool isShaking = IsShaking;

    // Can't be less than zero and pointless to be less than total length
    if (repeatInterval < totalAnimationLength)
        repeatInterval = totalAnimationLength;

    animation.Duration = new Duration(TimeSpan.FromSeconds(repeatInterval));

    int targetValue = 12;
    for (int i = 0; i < keyFrameCount; i++)
        animation.KeyFrames.Add(new LinearDoubleKeyFrame(i % 2 == 0 ? targetValue : -targetValue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i * timeOffsetInSeconds))));

    animation.KeyFrames.Add(new LinearDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(totalAnimationLength))));
    return animation;
}

以下是我的XAML的一部分：

<ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Focusable="False" Command="{Binding ClickToolCommand}" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Col}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
                        <Image Source="myImage.png" Grid.Row="{Binding Path=Row}" Grid.Column="{Binding Path=Col}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
                            <i:Interaction.Behaviors>
                                <local:ShakeBehavior RepeatInterval="1" SpeedRatio="3.0" IsShaking="{Binding Path=IsShaking}"/>
                            </i:Interaction.Behaviors>

                        </Image>
                    </Button>
                </DataTemplate>
            </ListBox.ItemTemplate>

正如其他SO中所指出的，也许DataTrigger可以提供帮助，但我的XAML中没有故事板，因为我有自定义Behavior

任何输入都非常感谢！

Answer 1

首先，让我重复我在原始post中所说的内容。如果您只使用自定义控件，那么执行“摇摇欲坠”的图像按钮会变得更加简单。此外，使用摇摇欲坠的图像按钮作为“吸引用户注意力的方式”是一个可怕的想法，让我想起1990年的网站设计。此外，您复制的实现中存在一个小缺陷，对创建的触发器没有退出操作。无论如何，这是如何做你需要的：

创建附加属性，如下所示：

        public static bool GetStopAnimating(DependencyObject obj)
        {
            return (bool)obj.GetValue(StopAnimatingProperty);
        }

        public static void SetStopAnimating(DependencyObject obj, bool value)
        {
            obj.SetValue(StopAnimatingProperty, value);
        }

        // Using a DependencyProperty as the backing store for StopAnimating.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty StopAnimatingProperty =
            DependencyProperty.RegisterAttached("StopAnimating", typeof(bool), typeof(ShakeBehavior), new UIPropertyMetadata(true));

然后用以下代码替换现有的“OnAttach”方法：

        private BeginStoryboard _beginStoryBoard;
        private RemoveStoryboard _removeStoryboard;

        protected override void OnAttached()
        {
            _orignalStyle = AssociatedObject.Style;

            _beginStoryBoard = new BeginStoryboard { Storyboard = CreateStoryboard() };
            _beginStoryBoard.Name = "terribleUi";
            _removeStoryboard = new RemoveStoryboard();
            _removeStoryboard.BeginStoryboardName = _beginStoryBoard.Name; 

            AssociatedObject.Style = CreateShakeStyle();

            AssociatedObject.Style.RegisterName("terribleUi", _beginStoryBoard);
        }

然后根据按钮的可见性而不是使用摇动触发器，将其更改为关闭附加属性：

        private Trigger CreateTrigger()
        {
            Trigger trigger = new Trigger
            {
                Property = StopAnimatingProperty,
                Value = false,
            };

            trigger.EnterActions.Add(_beginStoryBoard);

            trigger.ExitActions.Add(_removeStoryboard);

            return trigger;
        }

然后按如下方式使用它：

<Button Height="50" Width="150" >
        <StackPanel>
            <Image Source="\Untitled.png" local:ShakeBehavior.StopAnimating="{Binding YourPropertyToStopTheShaking}">
                <i:Interaction.Behaviors>
                        <local:ShakeBehavior RepeatInterval="5.0" SpeedRatio="3.0"  />
                </i:Interaction.Behaviors>
            </Image>

        </StackPanel>
    </Button>

从ViewModel打开Image上的动画

1 个答案: