Я не очень знаком с javascript и jQuery, поэтому я попытался найти похожие проекты, которые могут помочь решить мою проблему.
Я пытаюсь создать и оживить две синусоиды. Моя идея может быть основана на следующем codepen https://codepen.io/anon/pen/GPjwGw.
Основная идея заключается в том, чтобы иметь одну оригинальную синусоидальную волну и ту, которая отображает изменения частоты, амплитуды и т. Д. Очень похоже на кнопку тени. Но я не смог создать стандартную синусоидальную волну. В этом примере значение волны растет (синусоида становится больше и длиннее), но на самом деле она должна оставаться постоянной.
Кроме того, цвета волны должны быть в состоянии изменить пользователь, например, если я хочу скрыть обе синусоидальные волны и показать вместо этого два шара, которые выглядят как "подпрыгивающие". Таким образом, они связаны с путем синусоидальных волн. Чтобы иметь лучшую видимость, один из шаров также должен быть подвижным с помощью ползункового регулятора. Это должен быть ползунок частотного диапазона.
Так что у меня полная синусоида 2pi или 360 °, мой ползунок диапазона может перемещать один шар по траектории синусоиды и продолжать анимацию оттуда. Так должно выглядеть, как будто они отскакивают асинхронно.
Из-за моей нынешней проблемы один из шариков (который модифицируется) оболочки отскакивает «назад» с частотой 180 °, так что каким-то образом необходимо реализовать «если условие». Я надеюсь, что смогу описать вам мою проблему
Я пробовал кое-что, но не смог достичь простой синусоиды. Когда я просматривал код, многие вещи показались мне совершенно неизвестными, поэтому я очень признателен за помощь в кодировании. Ниже я сократил код до базового, просто чтобы показать вам два круглых объекта и достигнутую синусоидальную волну https://codepen.io/anon/pen/zyaMYm.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://jaromvogel.com/js/lib/path-data-polyfill.js"></script>
<style>
.graph-container {
width: 100px;
height: 100px;
border-radius: 4px;
margin: 2px auto;
position: relative;
left: ;
right: 0;
}
.svg {
overflow: visible;
}
</style>
</head>
<body>
<div class="app-container" ng-app="waveApp" ng-controller="waveCtrl">
<div class="graph-container">
<svg class="svg" width="300" height="100" ng-style="{'transform': 'rotate(' + rotation + 'deg)'}">
<path class="sine-wave-reference" ng-show="shadow" stroke="#000" stroke-width="2" stroke-linecap="round" fill="none"/>
<path class="sine-wave" stroke="black" stroke-width="2" stroke-linecap="round" fill="none"/>
</svg>
<svg class="svg" width="300" height="100"">
<circle cx="5" cy="50" r="5" stroke="black" stroke-width="1" fill="red"/>
<circle cx="20" cy="50" r="5" stroke="black" stroke-width="1" fill="green"/>
</svg>
</div>
</div>
<script type="text/javascript">
var app = angular.module('waveApp', []);
app.controller('waveCtrl', function($scope) {
var path = $('.sine-wave');
var reference = $('.sine-wave-reference');
$scope.x = 0;
$scope.offset = 0;
$scope.reset = function () {
$scope.frequency = 3;
$scope.amplitude = 50;
$scope.shadow = false;
$scope.framerate = 60;
$scope.increment = 5;
$scope.rotation = 0;
};
$scope.reset();
$scope.pathFunction = function (x) {
var result =
// Function to determine curve
// f(x)= a * math.sin(b*(x+c))+d
// a=amplitude , b=frequency, c=move x-direction, d=move y-direction
(Math.sin(Math.sqrt(x*$scope.frequency)-$scope.offset))*(0.8 * $scope.amplitude);
return result;
};
$scope.createGraph = function (wave) {
$scope.x = 2;
var origin = [
{
'type': 'M',
'values': [0,150]
}
];
for (var i = 0; i <= 500; i++) {
var point = {
x: $scope.x,
y: 150 - $scope.pathFunction($scope.x)
};
origin.push({
'type': 'L',
'values': [
point.x ,
point.y
]
});
$scope.x = $scope.x + 1;
}
wave[0].setPathData(origin);
};
$scope.createGraph(reference);
$scope.play = true;
$scope.animate = function () {
if ($scope.play === true) {
$scope.offset += ($scope.increment / $scope.framerate);
$scope.createGraph(path);
setTimeout(function () {
requestAnimationFrame($scope.animate);
},(1000 / $scope.framerate));
}
}
requestAnimationFrame($scope.animate);
});
</script>
</body>
</html>