AngularJS构建的正弦波动画

sine wave animation with angular.js，可以暂停和回放。

angular, sine, wave

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 8700
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

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 = 0.25;
        $scope.amplitude = 1;
        $scope.shadow = true;
        $scope.framerate = 60;
        $scope.increment = 5;
        $scope.rotation = 0;
    };

$scope.reset();

$scope.pathFunction = function(x) {
        var result =

// Function to determine curve
            // 0.2*(Math.sin(Math.sqrt(x)-$scope.offset))*x;
            (Math.sin(Math.sqrt(x * $scope.frequency) - $scope.offset)) * x * (0.1 * $scope.amplitude);

return result;
    };

$scope.createGraph = function(wave) {
        $scope.x = 0;
        var data = [{
            'type': 'M',
            'values': [0, 150]
        }];
        while ($scope.x < 300) {
            point = {
                x: $scope.x,
                y: 150 - $scope.pathFunction($scope.x)
            };
            data.push({
                'type': 'L',
                'values': [
                    point.x,
                    point.y
                ]
            });
            $scope.x += 1;
        }
        wave[0].setPathData(data);
    };

$scope.createGraph(reference);

$scope.updateGraph = function() {
        $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);

$scope.togglePlay = function() {
        $scope.play = !$scope.play;
        if ($scope.play === true) {
            $scope.animate();
        }
    };

$scope.stepForward = function() {
        $scope.offset += 0.5;
        $scope.createGraph(path);
    };

$scope.stepBack = function() {
        $scope.offset -= 0.5;
        $scope.createGraph(path);
    };
});

app.directive('slider', function() {
    return {
        restrict: 'A',
        template: `
			<div class="slider-label">{{ label }}</div>
			<div class="slider-bar"></div>
			<div class="slider-handle"></div>
			<div class="slider-value">{{ control | number:decimals }}</div>
		`,
        scope: {
            'label': '@',
            'minvalue': '=',
            'maxvalue': '=',
            'control': '=',
            'decimals': '=',
            'update': '&'
        },
        link: function(scope, element, attrs) {
            var handle;
            var sliderbar;
            var percent_offset;
            var handle_offset;

function positionHandle(position) {
                handle.css({
                    left: position + 'px',
                });
            }

function initialize() {
                handle = element.find('.slider-handle');
                sliderbar = element.find('.slider-bar');
                percent_offset = (scope.control - scope.minvalue) / (scope.maxvalue - scope.minvalue);
                handle_offset = percent_offset * sliderbar[0].offsetWidth;
                positionHandle(handle_offset);
            }

initialize();

element.on('mousedown touchstart', function(event) {
                var position = getPosition(event);
                scope.moving = true;
                positionHandle(position);
                var newvalue = (position / sliderbar[0].offsetWidth) * (scope.maxvalue - scope.minvalue) + scope.minvalue;
                scope.control = newvalue;
                scope.update();
                scope.$apply();
            });
            $(window).on('mousemove touchmove', function(event) {
                if (scope.moving) {
                    var position = getPosition(event);
                    positionHandle(position);
                    var newvalue = (position / sliderbar[0].offsetWidth) * (scope.maxvalue - scope.minvalue) + scope.minvalue;
                    scope.control = newvalue;
                    scope.update();
                    scope.$apply();
                }
            });
            $(window).on('mouseup touchend', function(event) {
                scope.moving = false;
            });

scope.$watch('control', function() {
                initialize();
            });
        }
    }
});

app.directive('toggle', function() {
    return {
        restrict: 'A',
        template: `
			<div class="toggle-label">{{ label }}</div>
			<div class="toggle-container" ng-class="{'toggle-off': !property}">
				<div class="toggle-handle"></div>
			</div>
		`,
        scope: {
            'label': '@',
            'property': '=',
        },
        link: function(scope, element, attrs) {
            element.on('click', function() {
                scope.property = !scope.property;
                scope.$apply();
            });
        }
    }
});

编译

CSS

* {
    box-sizing: border-box;
}
body,
html {
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    position: absolute;
    background: -linear-gradient(bottom, #0DAD83, #109A93);
    background: -webkit-linear-gradient(#0DAD83, #109A93);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
.function {
    margin: 15px;
}
.graph-container {
    width: 300px;
    height: 300px;
    border-radius: 4px;
    margin: 75px auto;
    position: relative;
    left: 0;
    right: 0;
}
.sine-wave-reference {
    opacity: 0.15;
}
.svg {
    overflow: visible;
}
.playback-controls {
    position: relative;
    width: 100%;
    min-width: 350px;
    font-size: 0;
}
.button {
    display: inline-block;
    border-radius: 2px;
    font-family: sans-serif;
    cursor: pointer;
    color: #0DAD30;
    height: 40px;
    vertical-align: top;
    margin: 15px;
}
.button.play {
    left: -2px;
    position: relative;
}
.controls-container {
    width: 350px;
    margin: 0 auto;
    position: relative;
    text-align: left;
}
.slider {
    width: 350px;
    margin: 0 auto;
    height: 60px;
    position: relative;
    left: 0;
    right: 0;
}
.slider-label {
    font-family: sans-serif;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    text-transform: lowercase;
    font-weight: 300;
}
.slider-bar {
    position: absolute;
    height: 2px;
    width: calc(100% - 80px);
    left: 15px;
    background: rgba(255, 255, 255, 0.75);
    top: 39px;
}
.slider-handle {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 2px solid white;
    background: rgba(255, 255, 255, 0.6);
    top: 25px;
    cursor: pointer;
}
.slider-value {
    width: 50px;
    height: 40px;
    position: absolute;
    top: 20px;
    right: 0;
    text-align: right;
    border-radius: 4px;
    line-height: 40px;
    color: white;
    font-family: sans-serif;
    font-weight: 300;
}
.reset {
    font-family: sans-serif;
    color: #0DAD83;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    margin: 15px 0;
    height: 40px;
    line-height: 40px;
    position: relative;
    display: inline-block;
    padding: 0 15px;
    background: white;
    border-radius: 4px;
}
.toggle {
    height: 40px;
    position: relative;
}
.shadow-toggle {
    position: absolute;
    bottom: 15px;
    right: 0;
}
.toggle-label {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    font-family: sans-serif;
    text-transform: lowercase;
    color: white;
    font-weight: 300;
    position: absolute;
    right: 70px;
}
.toggle-container {
    width: 60px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    top: 0;
    right: -5px;
    cursor: pointer;
    border: 2px solid white;
    background: #0DAD83;
    transition: background 0.25s cubic-bezier(1, 0, 0, 1);
}
.toggle-handle {
    height: 36px;
    width: 36px;
    position: absolute;
    background: black;
    left: 20px;
    border-radius: 18px;
    background: white;
    border: 2px solid #0DAD83;
    transition: left 0.25s cubic-bezier(1, 0, 0, 1);
}
.toggle-container.toggle-off {
    background: white;
}
.toggle-container.toggle-off .toggle-handle {
    right: auto;
    left: 0;
}

HTML

<div class="app-container" ng-app="waveApp" ng-controller="waveCtrl">
    <div class="playback-controls">
        <div class="button back" ng-click="stepBack()">
            <svg width="60" height="40">
                <path stroke="white" stroke-width="2" stroke-linecap="round" fill="none" d="M18,20 l8,-8 M18,20 h22 M18,20 l8,8" />
            </svg>
        </div>
        <div class="button play" ng-click="togglePlay()">
            <svg width="60" height="40">
                <path ng-show="!play" stroke="none" fill="white" d="M42,20 l-18,-10 v20 z" />
                <path ng-show="play" stroke="white" fill="none" stroke-width="4" d="M25,11 v18 M35,11 v18" />
            </svg>
        </div>
        <div class="button forward" ng-click="stepForward()">
            <svg width="60" height="40">
                <path stroke="white" stroke-width="2" stroke-linecap="round" fill="none" d="M42,20 l-8,-8 M42,20 h-22 M42,20 l-8,8" />
            </svg>
        </div>
    </div>
    <div class="graph-container">
        <svg class="svg" width="300" height="300" ng-style="{'transform': 'rotate(' + rotation + 'deg)'}">
            <path class="sine-wave-reference" ng-show="shadow" stroke="#000" stroke-width="2" stroke-linecap="round" fill="none" d="M0,150" />
            <path class="sine-wave" stroke="white" stroke-width="2" stroke-linecap="round" fill="none" d="M0,150" />
        </svg>
    </div>
    <div class="controls-container">
        <div class="slider frequency-slider" slider label="Frequency" minvalue="0" maxvalue="10" control="frequency" decimals="2" update="updateGraph()"></div>
        <div class="slider amplitude-slider" slider label="Amplitude" minvalue="0" maxvalue="7" control="amplitude" decimals="2" update="updateGraph()"></div>
        <div class="slider framerate-slider" slider label="Frame Rate" minvalue="5" maxvalue="60" control="framerate" decimals="2" update="updateGraph()"></div>
        <div class="slider speed-slider" slider label="Speed" minvalue="0" maxvalue="10" control="increment" decimals="2" update="updateGraph()"></div>
        <div class="slider rotation-slider" slider label="Rotation" minvalue="0" maxvalue="360" control="rotation" decimals="0" update="updateGraph()"></div>
        <div class="reset" ng-click="reset(); updateGraph();">reset</div>
        <div class="toggle shadow-toggle" toggle property="shadow" label="Shadow"></div>
    </div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src="/uploads/1907/path-data-polyfill.js"></script>

sine wave animation with angular.js，可以暂停和回放。

angular, sine, wave

编辑器支持Emmet

快捷键

sine wave animation with angular.js，可以暂停和回放。

angular, sine, wave

使用AngularJS构建的CSS过滤器效果演示应用

基于AngularJS实现简化版大航海游戏动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：