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

7 c# wpf animation timer

下午好,

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

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

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

  1. 手臂以两个角度摆动,每次扫描的速度为n毫秒
  2. 每次手臂扫过结束时,指示灯闪烁
  3. 创建指示符并按顺序闪烁(每次扫描结束时一个).

现在问题是Arm和light flash动画是在代码中创建的,并添加到故事板中,永远重复和自动反转.

指标是在代码中创建的,需要在每个Arm扫描动画结束时触发事件.

所以,我经过多次搞乱后所做的就是创建一个与故事板同步运行的计时器.

问题是,超过30秒,计时器和故事板不同步,因此指示器和手臂扫描不及时(对节拍器不好!!).

我试图抓住已完成的动画事件并将其用作停止和重新启动计时器的触发器,这就是我能想出的所有内容以保持两者完美同步.

由于故事板滑动以及故事板在使用.start调用计时器之前在线上调用故事板而导致不同步的事实导致,这虽然微秒我认为意味着它们开始不可靠但不完全相同时间.

我的问题,当我尝试绑定到完成的动画事件时,它永远不会触发.我的印象是,无论自动反转(即每次迭代之间)都完成了甚至火灾.情况并非如此吗?

任何人都可以想到另一种(更狡猾)的方式来保持两件事同步.

最后,我确实想看看我是否可以从故事板中解雇一个方法(这会让我的生活变得非常简单,但是看起来似乎无法做到这一点).

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

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

下面的代码来自我的项目到目前为止(不是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);    
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

小智 0

您可以尝试 2 个动画,一个用于右侧挥杆,一个用于左侧挥杆。在每个动画完成中,启动另一个动画(检查取消标志)并更新指示器(可能通过调度程序上的 BeginInvoke,这样就不会干扰下一个动画开始。)