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

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

配置信息：

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

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: