BezierPlugin插件(js/jquery)--模拟曲线贝塞尔运动、绘制曲线的实用插件

昨天一个网站项目的实际需求:当点击“购买”按钮后,当前货物“飞向”侧边的购物车。设计要求,飞行轨迹必须是一条“曲线”。

----------------------------------------------------

配置信息:

BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件,位置在:com.greensock.plugins,我测试使用的JS有:

<script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>

TweenMax-tween核心库

EasePack-缓动库,如果没有特别缓动,可不加载

BezierPlugin-贝塞尔曲线库,必须

----------------------------------------------------

拟合输出曲线时代码示例--可用于绘制曲线,要结合canvas等绘制引擎:

//输入input:

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//输出output:

{

x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],

y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]

}

--------------------------------------------------------

曲线运动示例----结合TweenMax可直接产生曲线运动

//起点坐标不用放到代码中,以下三个点分别是第2点,第3点及终点

TweenMax.to(document.getElementById("myp"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});

-------------------------------------------------------------------------------------

本插件还有更丰富的功能调用,比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值(比如透明度、角度),详细说明如下(英文):

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html



[本日志由 admin 于 2014-08-05 10:21 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 7409
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭