c# - 在 WPF 中创建高级节拍器(代码创建动画和完成事件的问题)

Question

下午好

在过去的几周里，我一直致力于创建一个高级节拍器的项目。节拍器由以下东西组成

1. 摆臂
2. 闪光灯
3. 代表节拍的一组动态创建的用户控件(其中 4 个可以打开、重音或关闭)。
4. 一个用户控件，用于显示 LCD 数字显示屏并计算所选 BPM 的节拍之间的毫秒数(60000/BPM = 毫秒)

用户选择一个 BPM 并按下开始，然后发生以下情况

1. ARM 以每次扫描 n 毫秒的速率在两个角度之间摆动
2. 每次 ARM 挥动结束时灯会闪烁
3. 指示器已创建并按顺序闪烁(每次扫描结束时闪烁一次)。

现在的问题 ARM 和灯光闪光动画是用代码创建的，并添加到 Storyboard中，可以永远重复并自动反转。

指示器是用代码创建的，需要在每个 ARM 扫动动画结束时触发一个事件。

所以，经过一番折腾后，我做的是创建一个与 Storyboard同步运行的计时器。

问题是，超过 30 秒时，计时器和 Storyboard 不同步，因此指示器和挥臂 Action 不及时(对节拍器不利!!)。

我试图捕捉动画的完成事件并将其用作停止和重新启动计时器的触发器，这是我能想到的让两者保持完美同步的全部。

不同步是由 Storyboard滑动引起的，事实上 Storyboard是在用.start调用计时器之前在行上用begin调用的，虽然我认为微秒意味着它们开始时不可能接近但不在完全相同的时间。

我的问题，当我尝试绑定(bind)到动画的完成事件时，它永远不会触发。我的印象是，无论自动反转(即在每次迭代之间)如何，完成甚至触发。不是这样吗？

有谁能想出另一种(更巧妙的)方法来使这两件事保持同步。

最后，我确实查看了我是否可以从 Storyboard 中触发一个方法(这会让我的生活变得非常轻松，但似乎无法做到这一点)。

如果有任何建议我并不珍贵，我只想完成这个!!

最后的兴趣点，bpm 可以在节拍器运行时进行调整，这是通过计算运行中的毫秒持续时间(鼠标按下按钮)并根据当前速度和新速度之间的差异缩放 Storyboard 来实现的。显然，运行指标的计时器必须同时更改(使用间隔)。

下面的代码来 self 目前的项目(不是 XAML，只是 C#)

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Controls;
using System.Windows.Threading;    

namespace MetronomeLibrary
{    
    public partial class MetronomeLarge
    {
        private bool Running;

        //Speed and time signature
        private int _bpm = 60;
        private int _beats = 4;
        private int _beatUnit = 4;
        private int _currentBeat = 1;
        private readonly int _baseSpeed = 60000 / 60;
        private readonly DispatcherTimer BeatTimer = new DispatcherTimer();

        private Storyboard storyboard = new Storyboard();

        public MetronomeLarge()
        {
            InitializeComponent();

            NumericDisplay.Value = BPM;

            BeatTimer.Tick += new EventHandler(TimerTick);

            SetUpAnimation();    
            SetUpIndicators(); 
        }

        public int Beats
        {
            get
            {
                return _beats;
            }
            set
            {
                _beats = value;
                SetUpIndicators();
            }
        }

        public int BPM
        {
            get
            {
                return _bpm;
            }
            set
            {
                _bpm = value;
                //Scale the story board here
                SetSpeedRatio();
            }
        }

        public int BeatUnit
        {
            get
            {
                return _beatUnit;
            }
            set
            {
                _beatUnit = value;
            }
        }

        private void SetSpeedRatio()
        {
            //divide the new speed (bpm by the old speed to get the new ratio)
            float newMilliseconds = (60000 / BPM);
            float newRatio = _baseSpeed / newMilliseconds;
            storyboard.SetSpeedRatio(newRatio);

            //Set the beat timer according to the beattype (standard is quarter beats for one sweep of the metronome
            BeatTimer.Interval = TimeSpan.FromMilliseconds(newMilliseconds);
        }

        private void TimerTick(object sender, EventArgs e)
        {
            MetronomeBeat(_currentBeat);

            _currentBeat++;

            if (_currentBeat > Beats)
            {
                _currentBeat = 1;
            }
        }

        private void MetronomeBeat(int Beat)
        {
                //turnoff all indicators
                TurnOffAllIndicators();

                //Find a control by name
                MetronomeLargeIndicator theIndicator = (MetronomeLargeIndicator)gridContainer.Children[Beat-1];

                //illuminate the control
                theIndicator.TurnOn();
                theIndicator.PlaySound();    
        }

        private void TurnOffAllIndicators()
        {

            for (int i = 0; i <= gridContainer.Children.Count-1; i++)
            {
                MetronomeLargeIndicator theIndicator = (MetronomeLargeIndicator)gridContainer.Children[i];
                theIndicator.TurnOff();
            }
        }

        private void SetUpIndicators()
        {
            gridContainer.Children.Clear();
            gridContainer.ColumnDefinitions.Clear();

            for (int i = 1; i <= _beats; i++)
            {
                MetronomeLargeIndicator theNewIndicator = new MetronomeLargeIndicator();

                ColumnDefinition newCol = new ColumnDefinition() { Width = GridLength.Auto };
                gridContainer.ColumnDefinitions.Add(newCol);
                gridContainer.Children.Add(theNewIndicator);
                theNewIndicator.Name = "Indicator" + i.ToString();
                Grid.SetColumn(theNewIndicator, i - 1);
            }
        }   

        private void DisplayOverlay_MouseDown(object sender, MouseButtonEventArgs e)
        {
            ToggleAnimation();
        }

        private void ToggleAnimation()
        {
            if (Running)
            {
                //stop the animation
                ((Storyboard)Resources["Storyboard"]).Stop() ;
                BeatTimer.Stop();
            }
            else
            {
                //start the animation
                BeatTimer.Start();
                ((Storyboard)Resources["Storyboard"]).Begin();
                SetSpeedRatio();                 
            }

            Running = !Running;
        }


        private void ButtonIncrement_Click(object sender, RoutedEventArgs e)
        {
            NumericDisplay.Value++;
            BPM = NumericDisplay.Value;
        }

        private void ButtonDecrement_Click(object sender, RoutedEventArgs e)
        {
            NumericDisplay.Value--;
            BPM = NumericDisplay.Value;
        }

        private void ButtonIncrement_MouseEnter(object sender, MouseEventArgs e)
        {
            ImageBrush theBrush = new ImageBrush() 
            { 
                ImageSource = new BitmapImage(new 
                    Uri(@"pack://application:,,,/MetronomeLibrary;component/Images/pad-metronome-increment-button-over.png")) 
            };
            ButtonIncrement.Background = theBrush;
        }

        private void ButtonIncrement_MouseLeave(object sender, MouseEventArgs e)
        {
            ImageBrush theBrush = new ImageBrush() 
            { 
                ImageSource = new BitmapImage(new 
                    Uri(@"pack://application:,,,/MetronomeLibrary;component/Images/pad-metronome-increment-button.png")) 
            };
            ButtonIncrement.Background = theBrush;
        }

        private void ButtonDecrement_MouseEnter(object sender, MouseEventArgs e)
        {
            ImageBrush theBrush = new ImageBrush() 
            { 
                ImageSource = new BitmapImage(new 
                    Uri(@"pack://application:,,,/MetronomeLibrary;component/Images/pad-metronome-decrement-button-over.png")) 
            };
            ButtonDecrement.Background = theBrush;
        }

        private void ButtonDecrement_MouseLeave(object sender, MouseEventArgs e)
        {
            ImageBrush theBrush = new ImageBrush() 
            { 
                ImageSource = new BitmapImage(new 
                    Uri(@"pack://application:,,,/MetronomeLibrary;component/Images/pad-metronome-decrement-button.png")) 
            };
            ButtonDecrement.Background = theBrush;
        }

        private void SweepComplete(object sender, EventArgs e)
        {
            BeatTimer.Stop();
            BeatTimer.Start();
        }

        private void SetUpAnimation()
        {
            NameScope.SetNameScope(this, new NameScope());
            RegisterName(Arm.Name, Arm);

            DoubleAnimation animationRotation = new DoubleAnimation()
            {
                From = -17,
                To = 17,
                Duration = new Duration(TimeSpan.FromMilliseconds(NumericDisplay.Milliseconds)),
                RepeatBehavior = RepeatBehavior.Forever,
                AccelerationRatio = 0.3,
                DecelerationRatio = 0.3,
                AutoReverse = true,                 
            };

            Timeline.SetDesiredFrameRate(animationRotation, 90);

            MetronomeFlash.Opacity = 0;

            DoubleAnimation opacityAnimation = new DoubleAnimation()
            {
                From = 1.0,
                To = 0.0,
                AccelerationRatio = 1,
                BeginTime = TimeSpan.FromMilliseconds(NumericDisplay.Milliseconds - 0.5),
                Duration = new Duration(TimeSpan.FromMilliseconds(100)),
            };

            Timeline.SetDesiredFrameRate(opacityAnimation, 10);

            storyboard.Duration = new Duration(TimeSpan.FromMilliseconds(NumericDisplay.Milliseconds * 2));
            storyboard.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTarget(animationRotation, Arm);
            Storyboard.SetTargetProperty(animationRotation, new PropertyPath("(UIElement.RenderTransform).(RotateTransform.Angle)"));
            Storyboard.SetTarget(opacityAnimation, MetronomeFlash);
            Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("Opacity"));    
            storyboard.Children.Add(animationRotation);
            storyboard.Children.Add(opacityAnimation);

            Resources.Add("Storyboard", storyboard);    
        }
    }
}

Answer 1

这可能不容易用 WPF 动画实现。相反，一个好的方法是 game loop .进行一些研究应该可以找到很多关于此的资源。第一个跳出来的是http://www.nuclex.org/articles/3-basics/5-how-a-game-loop-works .

在您的游戏循环中，您将遵循以下基本程序之一:

• 计算自上一帧以来经过了多少时间。
• 适本地移动您的显示器。

或

• 计算当前时间。
• 适本地放置您的显示器。

游戏循环的优点是虽然时间可能会轻微漂移(取决于您使用的时间类型)，但所有显示都会漂移相同的量。

您可以通过系统时钟计算时间来防止时钟漂移，实际上系统时钟不会漂移。计时器确实会漂移，因为它们不按系统时钟运行。