Question

我对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>

使用svg创建和动画化两个正弦波路径，并将它们链接到不同的对象

0 个答案: