svg入门制作简易动画 ╰半夏微凉° 2022-05-29 12:13 494阅读 0赞 #### svg的分量越来越重要了,如果你学好了svg也能在前段站住一席之地 #### #### 今天主要使用svg制作一个简易的人物动画;纯手工制作,有些粗糙,主要是熟悉svg,各位看了之后可以试着画一画 #### <svg class="runPath" width="1100" height="420" xmlns="http://www.w3.org/2000/svg"> <g id="man"> <rect id="Rectangle" fill="#F4D79D" transform="rotate(0 150 19)" x="100" y="120" width="30" height="100" rx="15"/> <rect id="Rectangle2" fill="#595959" transform="rotate(0 150 19)" x="95" y="120" width="40" height="60" rx="10"/> <rect id="Rectangle1" fill="#F4D79D" transform="rotate(0 150 19)" x="100" y="120" width="30" height="100" rx="15"/> <rect id="Rectangle3" fill="#595959" transform="rotate(0 150 19)" x="95" y="120" width="40" height="60" rx="10"/> <ellipse id="cirBody" cx="120" cy="100" rx="40" ry="50" fill="#595959"/> <ellipse id="cirfoot" cx="115" cy="210" rx="20" ry="10" fill="#8f8f8f"/> <ellipse id="cirfoot1" cx="115" cy="210" rx="20" ry="10" fill="#8f8f8f"/> <rect id="Rectarm" fill="#F4D79D" transform="rotate(0 110 80)" x="110" y="80" width="30" height="50" rx="15"/> <rect id="Rectarm1" fill="#F4D79D" transform="rotate(-30 120 115)" x="105" y="110" width="30" height="50" rx="15"/> <ellipse id="head" cx="120" cy="35" rx="20" ry="25" fill="#F4D79D"></ellipse> <path id="hat" d="M100 35 C105,-5 135,-5 140,35 L150,35" stroke="black" fill="green" stroke-width="1"/> <path id="mouse" d="M135,45 L145,45" stroke="white" stroke-width="1"/> <animateMotion path="M10,80 L980,80" begin="0s" dur="24s" repeatCount="indefinite"/> </g> </svg> function addAnimation(arg){ var rt=document.getElementById(arg.ele); var aT=document.createElementNS("http://www.w3.org/2000/svg","animateTransform"); if (aT) { aT.setAttribute("attributeName",arg.attributeName); aT.setAttribute("type",arg.type); aT.setAttribute("begin",arg.begin); aT.setAttribute("dur",arg.dur); aT.setAttribute("values",arg.values); aT.setAttribute("repeatCount",arg.repeatCount); rt.appendChild(aT); } } window.onload=function(){ addAnimation({ "ele":"Rectangle", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"-8 150 19;8 150 19;-8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"cirfoot", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"-8 150 19;8 150 19;-8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"Rectangle1", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"8 150 19;-8 150 19;8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"cirfoot1", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"8 150 19;-8 150 19;8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"Rectangle2", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"-8 150 19;8 150 19;-8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"Rectangle3", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"8 150 19;-8 150 19;8 150 19", "repeatCount":"indefinite", }); addAnimation({ "ele":"Rectarm1", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"-50 120 115;-30 120 115;-50 120 115", "repeatCount":"indefinite", }); addAnimation({ "ele":"Rectarm", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"5 110 80;0 110 80;5 110 80", "repeatCount":"indefinite", }); addAnimation({ "ele":"cirBody", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"5 120 110;-5 120 110;5 120 110", "repeatCount":"indefinite", }); addAnimation({ "ele":"head", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"5 120 110;-5 120 110;5 120 110", "repeatCount":"indefinite", }); addAnimation({ "ele":"hat", "attributeName":"transform", "type":"rotate", "begin":"0", "dur":"4s", "values":"5 120 110;-5 120 110;5 120 110", "repeatCount":"indefinite", }); } #### 代码略粗糙,仅供参考作用 ####
还没有评论,来说两句吧...