的書寫動畫使用jQuery

請參考this fiddle，的書寫動畫使用jQuery

我試圖造成一種div蒼蠅，然後文本出現在一個字符時的動畫。

我想更多的是流暢的書寫效果 - 我創造更類似於一個打字效果。

有沒有這樣的jquery插件？或者我可以增強我的代碼來實現它嗎？

來源

2011-10-29 abhijit

正如字體被繪製出來一樣，好像有人在用筆寫它？這可以完成，但不是特別好。不，我不會推薦Flash。這就像推薦我刺自己的手中; -P – Bojangles

請注意，如果我調整窗口的大小，你的綠色框不與白色排隊 – Eric

是的先生：P我想要用筆寫字的東西，草書是精確，使用連接字母的字體會產生這種效果？ – abhijit

這將是棘手，但你可以使用ssh動畫使用raphael JavaScript庫來做到這一點。下面的代碼稍微改編自raphael animation demo作爲概念驗證。顯然，你將不得不有幾個漸進的路徑動畫來獲得你真正想要的效果。

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Raphaël · Animation</title> 
     <link rel="stylesheet" href="http://raphaeljs.com/demo.css"media="screen"> 
     <link rel="stylesheet" href="http://raphaeljs.com/demo-print.css"media="print"> 
     <style media="screen"> 
      #holder { 
       height: 419px; 
       margin: -205px 0 0 -305px; 
       width: 619px; 
      } 
     </style> 
     <script src="http://raphaeljs.com/raphael.js"></script> 

     <script> 
      Raphael.fn.arrow = function (x, y) { 
       return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({fill: "#fff", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.2}); 
      }; 
      window.onload = function() { 
       // var r = Raphael("holder", 619, 419), 
       var r = Raphael("holder", 619, 419), //Raphael(0, 0, "100%", "100%"), 
        dashed = {fill: "none", stroke: "#666", "stroke-dasharray": "- "}; 
       // Path 3 
       (function() { 
        var el = r.path("M20,290c0-20 40,20 40,0").attr({fill: "none", stroke: "#fff", "stroke-width": 2}), 
         elattrs = [{path: "M20,290c0-20 40,20 40,0c0-20 -40,20 -40,0z"}, {path: "M20,290c0-20 40,20 40,0c"}], 
         now = 1; 
        r.arrow(90, 290).node.onclick = function() { 
         el.stop().animate(elattrs[+(now = !now)], 1000); 
        }; 
       })(); 
      }; 
     </script> 
    </head> 
    <body> 
     <div id="holder"></div> 
    </body> 
</html>

來源

2011-10-29 22:53:36

謝謝傑夫，好一個:) – abhijit

截至2013現在有Lazy Line Painter，一個jQuery插件創建從SVG文件動畫。它建立在Raphaël上。

來源

2014-06-09 23:00:51

謝謝麥奇+1 – abhijit

輝煌，這就是那裏的贏家。 – pushplaybang

的書寫動畫使用jQuery

回答

相關問題