SVG动画正弦波

下载代码

html

css

分享到微信朋友圈

html

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;
}

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();
			
			function getPosition (event) {
				var position = 0;
				if (event.type == 'mousedown' || event.type == 'mousemove') {
					position = event.pageX - sliderbar.offset().left;
				} else if (event.type == 'touchstart' || event.type == 'touchmove') {
					position = event.originalEvent.touches[0].pageX - sliderbar.offset().left;
				}
				if (position < 0) {
					position = 0;
				} else if (position > sliderbar[0].offsetWidth) {
					position = sliderbar[0].offsetWidth;
				}
				return position;
			}
			
			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();
			});
		}
	}
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg