Question

我有一个好主意，即使用可用于SVG对象的'stroke-dasharray'CSS属性，来描绘页面上的路径，为它提供一种很好的艺术方式来显示形状。

它完美运行，并得到大多数现代浏览器和手机的支持。

我可以在这里找到一个很好的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功能，尽可能少地重新发明动画框架）

Answer 1

CSS过渡怎么样？它们的性能也比jQuery动画更好。

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

但请确保不要将两者用于同一属性，因为jQuery动画会干扰CSS过渡。

Answer 2

最近，我一直在使用一个很好的强大的跨浏览器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)
}

没有.animate（）jQuery动画的最干净的方法是什么？

2 个答案: