force.js是一款可以制作各种平滑页面滚动过渡效果和元素动画效果的JavaScript插件。该插件可以和jQuery结合使用，也可以单独通过JS来使用。通过它可以制作出31种动画的平滑过渡效果。
安装
可以通过bower来安装该插件。
bower install force-js
使用方法
使用该插件需要在页面中引入force.js文件。
<script src="force.js.js"></script>
与jQuery结合使用
Force.js会自动检测页面是否加载了jQuery，并使jQuery对象继承force.move()和force.jump()函数。你可以像下面这样来移动元素：
$('#ball').move({left: 100px, top: 50px}, 1000);
页面平滑滚动
如果要自动检测页面中的hash链接，可以调用force.bindHashes()方法：
force.bindHashes();
如果你想手动设置，那么使用force.jump()方法：
var element = document.getElementBy('element-id');
// jump by object
force.jump(element);
// jump by selector
force.jump('#element-id');
你也可以使用一额外的配置参数：
force.jump(target);
var options = {
setHash: false
// if set to TRUE, it sets the hash/id value of the element in the URL
duration: 500,
done: function() {},
easing: 'easeInQuad',
};
force.jump(target, options);
或者使用jQuery：
$('#ball').jump();
//$('#ball').jump(options);
元素平滑过渡动画
使用force.move()方法可以制作元素的平滑过渡动画效果。
var element = document.getElementBy('element-id');
// jump by object
force.move(element, {left: 100px, top: 50px}, 1000);
// jump by selector
force.move('#element-id', {left: 100px, top: 50px}, 1000);
也可以在调用函数时设置一些配置参数：
force.move(target, properties, duration, doneCallback);
var options = {
properties: {
left: '100px'
},
duration: 500,
done: function() {},
easing: 'easeInQuad'
};
force.move(target, options);
或者使用jQuery：
$('#ball').move({left: 100px, top: 50px}, 1000);
// $('#ball').move(options, duration, doneCallback);
配置参数
在force.js中你可以修改任何你想修改的东西。
// 修改单个选项
force.opt.cacheScrolling = true;
// 或者使用配置函数并传入一个对象来覆盖旧的配置
force.config( { cacheScrolling: true } );
hashLinkPattern: 'a[href*="#"]:not([href="#"])'
通过执行force.bindHashes()函数来发现页面中的hash链接的选择器。
frames: 60
默认force.js的动画速度为60fps。你可以通过这个参数来自定义动画速度。
moveDuration: 1000 AND jumpDuration: 1000
force.move()和force.jump()函数的默认动画持续时间为1000毫秒。你可以在函数中传入duration配置参数来修改动画持续时间。
moveEasing: 'swing' AND jumpEasing: 'swing'
默认的动画easing函数是swing，可用的easing效果有：
- swing
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic*
- easeOutElastic*
- easeInOutElastic*
- easeInBack*
- easeOutBack*
- easeInOutBack*
- easeInBounce*
- easeOutBounce*
- easeInOutBounce*
带*号的easing效果不CSS动画过渡，只能使用原生的javascript。
cacheJumps: true
页面跳转默认会被缓存，这意味着下一场跳转只有在上一次跳转结束后才会有动画效果。设置这个参数为false会离开停止当前的跳转，并开始新的跳转。
cssTransitions: true
默认情况下，force.js在浏览器支持的情况下使用CSS动画过渡效果。建议将该选项设置为true，如果浏览器不支持CSS动画过渡，插件会自动转换为JS动画过渡。
force-js插件的github地址为：https://github.com/gravmatt/force-js
