Добавление нескольких эффектов в анимацию с использованием раскадровки с использованием WPF

1

У меня возникли проблемы с добавлением нескольких эффектов в анимационную последовательность в WPF. У меня есть несколько прямоугольников, расположенных внутри сетки, и способ работы анимации заключается в следующем порядке:

  1. По умолчанию пользователь видит сетку таким образом, что каждая ячейка ограничена серебряной рамкой на черном холсте, цвет прямоугольника внутри каждой ячейки может быть прозрачным/черным.
  2. При наведении мыши прямоугольник в ячейке меняет свой ход и заполняется зеленым.
  3. При выходе из мыши предыдущая ячейка медленно меняет цвет до состояния по умолчанию до наведения мыши.

Я смог сделать эффект анимации только для цвета штриха, но не объединить его с свойствами заливки. Вот фрагмент кода для создания прямоугольников в сетке:

            Style cellStyle = PrepareAnimationStyle();
            foreach (string label in rowHeaders)
            {
                for (int n = 0; n < numOfCols; n++)
                    grid.Children.Add(new Rectangle()
                    {
                        Stroke = Brushes.Silver,
                        StrokeThickness = 2,
                        Fill = Brushes.Transparent,
                        Height = cellSize,
                        Width = cellSize,
                        Style = cellstyle
                    });
            }

И вот код, который устанавливает анимацию (все еще выполняется, не может заставить ее работать по мере необходимости):

Style PrepareAnimationStyle()
{
    Trigger animTrigger = new Trigger();
    animTrigger.Property = ContentElement.IsMouseOverProperty;
    animTrigger.Value = true;

    System.Windows.Media.Animation.ColorAnimation toGreen = new          System.Windows.Media.Animation.ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
    toGreen.FillBehavior = FillBehavior.HoldEnd;
    System.Windows.Media.Animation.ColorAnimation toTransparent = new System.Windows.Media.Animation.ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));
    System.Windows.Media.Animation.ColorAnimation toSilver = new System.Windows.Media.Animation.ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));

    System.Windows.Media.Animation.Storyboard sbEnter = new System.Windows.Media.Animation.Storyboard();
    //Storyboard.SetTargetProperty(toGreen, new PropertyPath("Stroke.Color"));
    Storyboard.SetTargetProperty(toGreen, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
    sbEnter.Children.Add(toGreen);

    /*Storyboard sbFill = new Storyboard();
    Storyboard.SetTargetProperty(toGreen, new PropertyPath("Fill.Color"));
    sbFill.Children.Add(toSilver);

    Storyboard sbFillEmpty = new Storyboard();
    Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
    sbFillEmpty.Children.Add(toSilver);*/

    Storyboard sbExit = new Storyboard();
    //Storyboard.SetTargetProperty(toSilver, new PropertyPath("Stroke.Color"));
    Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
    sbExit.Children.Add(toSilver);

    animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
    //animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFill });
    //animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFillEmpty });
    animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });

    Style cellStyle = new Style();
    cellStyle.Triggers.Add(animTrigger);

    return cellStyle;
}
Теги:
wpf
animation

1 ответ

2
Лучший ответ

Ну вот

    Style PrepareAnimationStyle()
    {
        Trigger animTrigger = new Trigger();
        animTrigger.Property = FrameworkElement.IsMouseOverProperty;
        animTrigger.Value = true;

        ColorAnimation strokeToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
        ColorAnimation strokeToSilver = new ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));

        ColorAnimation fillToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
        ColorAnimation fillToTransparent = new ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));

        Storyboard sbEnter = new Storyboard();
        Storyboard.SetTargetProperty(strokeToGreen, new PropertyPath("Stroke.Color"));
        Storyboard.SetTargetProperty(fillToGreen, new PropertyPath("Fill.Color"));
        sbEnter.Children.Add(strokeToGreen);
        sbEnter.Children.Add(fillToGreen);

        Storyboard sbExit = new Storyboard();
        Storyboard.SetTargetProperty(strokeToSilver, new PropertyPath("Stroke.Color"));
        Storyboard.SetTargetProperty(fillToTransparent, new PropertyPath("Fill.Color"));
        sbExit.Children.Add(strokeToSilver);
        sbExit.Children.Add(fillToTransparent);

        animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
        animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });

        Style cellStyle = new Style();
        cellStyle.Triggers.Add(animTrigger);

        return cellStyle;
    }

чтобы он работал правильно, обязательно установите заливку и ход, пока вы добавляете ячейку

пример

        Style cellStyle = PrepareAnimationStyle(); //this line is out side of the cell loop
        ....
        rect.Fill = new SolidColorBrush(Colors.Transparent);
        rect.Stroke = new SolidColorBrush(Colors.Silver);
        rect.Style = cellStyle;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню