Raphael.js繪製迴圈動畫
阿新 • • 發佈：2019-01-06
今天有人叫我幫看了一個程式；
需要實現的是點選按鈕，橢圓線段的一段移動到另外一端；橢圓所關聯的另一條線段路徑也隨之改變；再次點選按鈕，效果反之；
不多說了兩種程式碼；
第一種是我做的；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Raphael</title> <script src="../js/jquery.js"></script> <script src="../js/raphael.js"></script> <script> var paper; var state = false; var e; $(function() { paper = new Raphael("holder",640,480); var path = paper.path("M 10,10 L 10,300"); var over = paper.path("M 10 10 L 316 248").attr("stroke","red"); var circle = paper.circle(316, 248, 5).attr({stroke : "none",fill : "red"}); e = paper.ellipse(10, 10, 7, 3).attr({stroke : "none",fill : "red"}); e.onAnimation(function() { console.log(this) var x = this.attr("cx"); var y = this.attr("cy"); over.attr({path : "M 316,248L" +x+ "," +y+ "",stroke : "red"}); }); }) function start() { if(state) { e.animate({"cx":10,"cy":10},3000); state = false; } else { e.animate({"cx":10,"cy":300},3000); state = true; } } </script> </head> <body> <div id="holder"></div> <input type="button" value="click" onclick="start()" > </body> </html>
第二種是他修改的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Raphael</title> <script src="../js/raphael.js"></script> <script> Raphael("holder", 640, 480, function() { var r = this, p = r.path("M10,10L10,300"), flag = 0, over = r.path().attr({ stroke : "#fff" }), len = p.getTotalLength(), e = r.ellipse(0, 0, 7, 3).attr({ stroke : "none", fill : "red" }).onAnimation(function() { var t = this.attr("transform"); over.attr({ path : "M316,248L" + t[0][1] + "," + t[0][2] + "z", stroke : "red" }); }); r.circle(316, 248, 5).attr({ stroke : "none", fill : "red" }); r.customAttributes.along = function(v) { var point = p.getPointAtLength(v * len); return { transform : "t" + [ point.x, point.y ] + "r" + point.alpha }; }; e.attr({ along : 0 }); pathButton = r.image("按鈕圖片地址", 510, 288, 50, 43).attr({ cursor : "pointer", title : "xxx" }).click(function() { if (flag == 0) { e.animate({ along : 1 }, 2e4, function() { e.attr({ along : 1 }); }); flag = 1; } else { e.animate({ along : 0 }, 2e4, function() { e.attr({ along : 0 }); }); flag = 0; } }); }); </script> </head> <body> <div id="holder"></div> </body> </html>
兩種都能實現
效果圖基本如下：
