У меня есть приложение, которое очень "основано на подключении", то есть несколько входов/выходов.
Концепция пользовательского интерфейса "кабеля" - именно то, что я ищу, чтобы сделать концепцию понятной пользователю. Propellerhead применил аналогичный подход в своем программном обеспечении Reason для аудиокомпонентов, проиллюстрированном в этом видео на YouTube (быстрая перемотка вперед до 2 м: 50 секунд).
Я могу заставить эту концепцию работать в GDI, рисуя сплайн из точки A в точку B, для этого нужно использовать более элегантный способ использования Paths или что-то в WPF, но с чего вы начинаете? Есть ли хороший способ имитировать анимацию кабельного размаха, когда вы хватаете ее и встряхиваете?
Я также открыт для управления библиотеками (коммерческими или с открытым исходным кодом), если это колесо уже было изобретено для WPF.
Обновление: Благодаря ссылкам в ответах до сих пор я почти там.
Я создал программный код BezierCurve
, а точка 1 - (0, 0)
, точка 2 - нижняя точка "зависания", а точка 3 - везде, где находится курсор мыши. Я создал PointAnimation
для Point 2 с функцией ослабления ElasticEase
, примененной к нему, чтобы дать эффект "Swinging" (т.е. Отскакивая среднюю точку вокруг бит).
Проблема только в том, что анимация кажется немного запоздалой. Я начинаю раскадровку каждый раз, когда движется мышь, есть ли лучший способ сделать эту анимацию? Мое решение до сих пор находится здесь:
код:
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);
}