공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/SVG

raphaeljs - Gradient Animation

serpiko 2014. 1. 28. 20:09

raphaeljs에서 그라데이션 형태의 애니메이션은 왜 없을까 하여 그라데이션부분만 구글링하고


그라데이션 분할, 애니메이션 동작을 구현하여 곧 솔루션에 적용할 요량으로 만든 데모.


정말 좋은 프레임웍인데 자료가 많이 없어서 적용하는데에 애를 먹었다.


완성한 코드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>라파엘데모</title>
  <script type='text/javascript' src='../raphael-min.js'></script>
	<script type='text/javascript'>

	window.onload=function(){
		var grade = 0; // imap 등급
		var _num = 0;
		var _thick = 20;
		var x1 = 20, y1 =20;
		var x2 = 190, y2=190;
		var colorArr = [{a:"#27ee00", b:"#d5ee1e", c:"#27ee00"}]; //녹색그라데이션
		var paper = Raphael(10, 10, 800, 600);
		var path = paper.path('M'+x1+' '+y1+'L' + x2 + ' ' + y2);
		path.attr({
			"stroke-width": 4,"stroke": "#00f", "stroke-opacity": 0.5,"fill": "90-#f00:5-#00f:95",
			});

		var len = path.getTotalLength();

		//var fakepath = paper.rect(x1,y1,len,thick).attr({"fill": "0-#27ee00-#d5ee1e:50-#27ee00",stroke:"none"});
		var fakepath = paper.rect(x1,y1,len,_thick).attr({
			"fill": "0-"+ colorArr[grade].a +"-"+ colorArr[grade].b +":"+ _num +"-"+ colorArr[grade].c +"",stroke:"none"
			});

		var angle =  Math.atan2(y2-y1,x2-x1) * 180 / Math.PI;
		fakepath.rotate(angle,x1,y1);

		var work = setInterval(anim, 100);
		function anim(){
			//‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›
			var fakepath = paper.rect(x1,y1,len,_thick).attr({
				"fill": "0-"+ colorArr[grade].a +"-"+ colorArr[grade].b +":"+ _num +"-"+ colorArr[grade].c +"",stroke:"none"
				});
			_num >= 100 ? _num=0 : _num+=10;
			//라디안-도 공식 : x(아크탄젠트) * 180 / Math.PI
			var angle =  Math.atan2(y2-y1,x2-x1) * 180 / Math.PI;
			fakepath.rotate(angle,x1,y1);
		}
	}
	</script>
</head>
<body>
</body>
</html>


결과) IE8,9,10,11, 크롬, 파이어폭스, 사파리



저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > SVG' 카테고리의 다른 글

SVG로 변환해 본것들과 SVG애니메이션들  (0) 2014.03.10
path  (0) 2013.11.29
SVG란?  (0) 2013.11.29
Flash 2 SVG (플래시를 SVG로 변환)  (0) 2013.10.25
SVG 및 Canvas 중에서 선택하는 방법  (0) 2013.10.16
댓글