У меня есть приложение, которое очень «основано на соединении», то есть несколько входов / выходов.
Концепция пользовательского интерфейса «кабеля» - это именно то, что я ищу, чтобы прояснить эту концепцию.Пользователь.Propellerhead применили аналогичный подход в программном обеспечении Reason для аудио компонентов, проиллюстрированных в этом видео на YouTube (ускоренная перемотка вперед до 2: 50 с) .
Я могу заставить эту концепцию работать в GDI, нарисовавСплайн из точки А в точку Б, должен быть более элегантный способ использовать пути или что-то в WPF для этого, но с чего начать?Есть ли хороший способ имитировать анимацию колебания кабеля, когда вы берете его и встряхиваете?
Я также открыт для управления библиотеками (коммерческими или с открытым исходным кодом), если это колесо уже было изобретено для WPF.
Обновление: Благодаря ссылкам в ответах пока я почти там.
Я создалBezierCurve программно, точка 1 - (0, 0), точка 2 - нижняя точка «зависания», а точка 3 - там, где находится курсор мыши.Я создал PointAnimation для точки 2 с примененной к ней функцией замедления ElasticEase, чтобы придать эффект "колебания" (т. Е. Отскока средней точки вокруг).
Единственная проблема в том,анимация, кажется, немного запаздывает.Я запускаю раскадровку каждый раз, когда мышь двигается, есть ли лучший способ сделать эту анимацию?Мое решение до сих пор находится здесь:
Детская площадка Bezier Curve
Код:
private Path _path = null;
private BezierSegment _bs = null;
private PathFigure _pFigure = null;
private Storyboard _sb = null;
private PointAnimation _paPoint2 = null;
ElasticEase _eEase = null;
private void cvCanvas_MouseMove(object sender, MouseEventArgs e)
{
var position = e.GetPosition(cvCanvas);
AdjustPath(position.X, position.Y);
}
// basic idea: when mouse moves, call AdjustPath and draw line from (0,0) to mouse position with a "hang" in the middle
private void AdjustPath(double x, double y)
{
if (_path == null)
{
_path = new Path();
_path.Stroke = new SolidColorBrush(Colors.Blue);
_path.StrokeThickness = 2;
cvCanvas.Children.Add(_path);
_bs = new BezierSegment(new Point(0, 0), new Point(0, 0), new Point(0, 0), true);
PathSegmentCollection psCollection = new PathSegmentCollection();
psCollection.Add(_bs);
_pFigure = new PathFigure();
_pFigure.Segments = psCollection;
_pFigure.StartPoint = new Point(0, 0);
PathFigureCollection pfCollection = new PathFigureCollection();
pfCollection.Add(_pFigure);
PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures = pfCollection;
_path.Data = pathGeometry;
}
double bottomOfCurveX = ((x / 2));
double bottomOfCurveY = (y + (x * 1.25));
_bs.Point3 = new Point(x, y);
if (_sb == null)
{
_paPoint2 = new PointAnimation();
_paPoint2.From = _bs.Point2;
_paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);
_paPoint2.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
_eEase = new ElasticEase();
_paPoint2.EasingFunction = _eEase;
_sb = new Storyboard();
Storyboard.SetTarget(_paPoint2, _path);
Storyboard.SetTargetProperty(_paPoint2, new PropertyPath("Data.Figures[0].Segments[0].Point2"));
_sb.Children.Add(_paPoint2);
_sb.Begin(this);
}
_paPoint2.From = _bs.Point2;
_paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);
_sb.Begin(this);
}