其他代码

贝兹曲线和弧线运动jQuery插件

也想出现在这里?联系我们
面包多

贝兹曲线和弧线运动jQuery插件-创客云
jQuery.path 是一款可以实现元素沿贝兹曲线和弧线运动的 jQuery 插件。这是一个工具类插件,它提供了一写多维的动画的方法,特别是提供了沿 Bezier 曲线和圆弧的动画方法。Bezier(贝兹曲线示例):下面是沿一条贝兹曲线动画的示例代码。

  1. var bezier_params = {
  2.     start: { 
  3.       x: 185, 
  4.       y: 185, 
  5.       angle: 10
  6.     },  
  7.     end: { 
  8.       x:540,
  9.       y:110, 
  10.       angle: -10, 
  11.       length: 0.25
  12.     }
  13.   }
  14.  
  15. $("my_elem").animate({path : new $.path.bezier(bezier_params)})
也想出现在这里?联系我们
创客主机

贝兹曲线由一个开始点,一个结束点和一个控制点组成:

start 是开始点

也想出现在这里?联系我们
创客主机

end 是结束点

x 和 y 代表点的坐标系。必须填写

angle 是控制点和开始点及结束点连线的角度。可选参数,默认为 0

length 是从点到它的控制点的距离和开始点到结束点距离的比例。可选参数,默认为 1/3

Arc(弧线示例):

下面是沿一条贝兹曲弧线动画的示例代码。

  1. var arc_params = {
  2.     center: [285,185],  
  3.         radius: 100,    
  4.         start: 30,
  5.         end: 200,
  6.         dir: -1
  7.   }
  8. $("my_elem").animate({path : new $.path.arc(arc_params)})

弧线参数:

center 是包含开始点和结束点的圆形的中心

radius 是圆形的半径

start 是开始点的角度。0 代表“正北”,顺时针方向旋转

end 是结束点的角度。0 代表“正北”,顺时针方向旋转

dir 是移动的方向。如果不是从开始点到结束点的动画就需要明确指出该参数,例如:开始点为 100,结束点为 30,但是你想顺时针运动

其它路径动画:

该插件也提供了一些沿其它路径动画的功能。例如下面是一个沿正弦波运动的动画:

  1. var SineWave = function() {
  2.   this.css = function(p) {
  3.     var s = Math.sin(p*20)
  4.     var x = 500 - p * 300 
  5.     var y = s * 50 + 150
  6.     var o = ((s+2)/4+0.1)
  7.     return {top: y + "px", left: x + "px", opacity: o}
  8.   } 
  9. };   
  10. $("my_elem").animate({path : new SineWave})
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(3)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!