jquery.path, 用于圆弧和带有jQuery的贝塞尔曲线的Animatation

分享于 

3分钟阅读

GitHub

  繁體 雙語
Animatation for arcs and bezier curves with jQuery
  • 源代码名称:jquery.path
  • 源代码网址:http://www.github.com/weepy/jquery.path
  • jquery.path源代码文档
  • jquery.path源代码下载
  • Git URL:
    git://www.github.com/weepy/jquery.path.git
    Git Clone代码到本地:
    git clone http://www.github.com/weepy/jquery.path
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/weepy/jquery.path
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    jQuery.path

    沿贝塞尔曲线和圆弧提供动画。

    jQuery中的动画引擎专注于单维动画- 因这里很难沿路径动画两个变量。

    这个简单的插件提供了一种多维动画的方法,特别提供了一种沿着贝塞尔曲线和弧线进行动画处理的方法。

    贝塞尔曲线

    示例:沿bezier路径进行动画处理

    
    
    
    
    var bezier_params = {
    
    
     start: { 
    
    
     x: 185, 
    
    
     y: 185, 
    
    
     angle: 10
    
    
     }, 
    
    
     end: { 
    
    
     x:540,
    
    
     y:110, 
    
    
     angle: -10, 
    
    
     length: 0.25
    
    
     }
    
    
     }
    
    
    
    $("my_elem").animate({path : new $.path.bezier(bezier_params)})
    
    
    
    
    

    贝塞尔曲线由起点构成,每个端点都带有控制点

    • 起始点开始点
    • 结束是 final 点
    • x,表示那个点的坐标。 必选
    • 角度是控制点从连接开始和结束的角度的角度。 可选,默认值为 0
    • 长度是从点到它的控制点的距离,以从开始到结束距离的比率。 可选,默认值为 1/3

    arc

    Exampe: 沿 arc 动画

    
    
    
    
    
    var arc_params = {
    
    
     center: [285,185], 
    
    
     radius: 100, 
    
    
     start: 30,
    
    
     end: 200,
    
    
     dir: -1
    
    
     }
    
    
    
    $("my_elem").animate({path : new $.path.arc(arc_params)})
    
    
    
    
    
    • 中心是包含起点和终点的假想圆中心的坐标
    • 半径是这里圆的半径
    • 起点是起始点的角度。 0为"北",顺时针测量
    • 结束是起始点的角度。 0为"北",顺时针测量
    • dir是要移动的direction。 仅在开始和结束时不明显( 比如。 如果起始为 100,结束为 30,但你希望按顺时针方向设置动画效果

    其他路径

    创建其他路径,甚至动画其他参数是很简单的。 例如

    
    
    
    
    var SineWave = function() {
    
    
     this.css = function(p) {
    
    
     var s = Math.sin(p*20)
    
    
     var x = 500 - p * 300 
    
    
     var y = s * 50 + 150
    
    
     var o = ((s+2)/4+0.1)
    
    
     return {top: y +"px", left: x +"px", opacity: o}
    
    
     } 
    
    
    };
    
    
    
    $("my_elem").animate({path : new SineWave})
    
    
    
    
    

    链接

    兼容性

    测试中

    • Firefox 3.5
    • Safari 4
    • IE 6,7,8

    相关文章