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