什麼是最簡潔的方式來動畫沒有.animate（）jQuery？

我有一個不錯的主意，即使用可以在SVG對象上使用的'stroke-dasharray'CSS屬性來描述頁面上的路徑，爲形狀的出現提供一個很好的藝術方式。什麼是最簡潔的方式來動畫沒有.animate（）jQuery？

它的工作原理非常完美，並且受到大多數現代瀏覽器和手機的支持。

的我做了什麼一個很好的的jsfiddle可以在這裏找到：http://jsfiddle.net/G6ECE/

，使整個事情現在勾選代碼：

num=0; 
    setInterval(function(){ 
     updateStroke(num); 
     num+= 0.2; 
    }, 1); 
    function updateStroke(num){ 

     // stroke-dasharray is a list of two or more numbers. In this example, percentage values are used to make all paths fully stroked at the end of the animation, irregardless of path length. 
     $('svg path').css({stroke:'#00FF00','stroke-dasharray':num+'% '+(100-num)+'%'}); 
    }

顯然，這是一個非常基本的，醜陋的方式動畫的東西。

我想自定義一點動畫：我希望能夠添加自定義動畫長度並使用不同的緩動。不幸的是，我通常用來爲CSS屬性設置動畫效果的jQuery $（）.animate（）函數不支持非數字值。

由於stroke-dasharray使用兩個或多個數字（像素或百分比）值來工作，我需要一個替代的.animate（）

什麼是做到這一點的乾淨的方式？（使用盡可能多的現有jQuery功能，並儘可能少地重新創建動畫框架）

來源

2014-03-25 Qqwy

而不是'setInterval'你應該使用'requestAnimationFrame'，參見http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/。 –

CSS轉換怎麼樣？他們也比jQuery動畫有更好的表現。

http://www.w3schools.com/css/css3_transitions.asp

但千萬不要因爲jQuery的動畫與CSS過渡干涉同時使用同一屬性。

來源

2014-03-25 13:09:00 Dion

在這個簡單的例子中，CSS轉換（甚至CSS動畫）可能非常有效。這是一個好主意，這就是爲什麼你得到讚揚:)。但是我正在尋找一種讓我更有控制力的方式：當您想要根據具體情況以不同的方式對一個元素進行動畫處理時，CSS動畫會很快變得令人厭煩/混亂。 – Qqwy

最近，我一直在與一個不錯的健壯的跨瀏覽器JavaScript動畫對象。一旦你瞭解了它的使用方式，它對於所有或者你的SVG動畫就變得無縫了。它可以附加到任何svg元素和控制關聯值。

有一些例子，在顯示的動畫性能（線性，二次，疏導等）的各種選擇： http://www.svgDiscovery.com/

下面是對象：

var AnimateJS=function(options){ 
    this.options=options 
    var start = new Date 
    var iT = setInterval(
    function(){ 
     var timePassed = new Date - start 
     var progress = timePassed/options.duration 
     if (progress > 1) progress = 1 
     this.progress=progress 
     var delta = options.delta(progress) 
     options.output(delta) 
     if (progress == 1)clearInterval(iT); 
    },options.delay) 
}

來源

2014-03-25 19:54:24

什麼是最簡潔的方式來動畫沒有.animate（）jQuery？

回答

相關問題