Bounce.

bouncejs.com提供的工具支持生成静态关键帧， 不需要使用额外JavaScript代码， 如果想在你的应用程序中动态生成这些代码， 可以使用Bounce.

安装可以通过Bower或者NPM安装： $ bower install bounce.js 1 $ bower install bounce.js或者$ npm install bounce.js 1 $ npm install bounce.js你可以从Github上浏览和下载所有的发行版本。

使用方式要创建一个动画， 可以实例化一个名为Bounce的新对象：

var bounce = new Bounce();

1

var bounce = new Bounce();

首先使用Bounce对象缩放、 旋转、 平移和倾斜四种不同的组件来构建动画。

这样既可以定义成已命名的动画供以后使用， 或者直接在页面中使用这些元素。

添加动画组件正如刚才所提到， 你可以像使用Bounce.js工具那样调用scale( 缩放)、 rotate( 旋转)、 translate( 平移) 和skew( 倾斜) 方法创建自己的动画。

所有的这些方法都接受一些共同选项， from和to参数定义了动画的起始点。

请注意所有的这些方法都是链式调用。

scalevar bounce = new Bounce();

bounce.scale({

from: {

x:0.5,

y:0.5

},

to: {

x:1,

y:1

}

});

1 2 3 4 5

var bounce = new Bounce();

bounce.scale({

from: {

x:0.5,

y:0.5

},

to: {

x:1,

y:1

}

});

from和to参数定义了元素缩放X( 宽度) 和Y( 高度) 的比率。

上面的例子绘制了从半个到整个元素。

动画rotatevar bounce = new Bounce();

bounce.rotate({

from:0,

to:90

});

1 2 3 4 5

var bounce = new Bounce();

bounce.rotate({

from:0,

to:90

});

from和to参数定义了旋转的度数。

以上例子将元素向右旋转了90°。

动画translatevar bounce = new Bounce();

bounce.translate({

from: {

x:0,

y:0

},

to: {

x:100,

y:0

}

});

1 2 3 4 5

var bounce = new Bounce();

bounce.translate({

from: {

x:0,

y:0

},

to: {

x:100,

y:0

}

});

from和to参数定义了在X方向和Y方向平移的像素。

上面例子将元素向右移动100像素。

动画skewvar bounce = new Bounce();

bounce.skew({

from: {

x:0,

y:0

},

to: {

x:20,

y:0

}

});

1 2 3 4 5

var bounce = new Bounce();

bounce.skew({

from: {

x:0,

y:0

},

to: {

x:20,

y:0

}

});

from和to参数定义了元素在X和Y轴的倾斜度。

上面的例子中， 动画的倾斜度为在横轴向上20°。

动画常用动画参数所有方法都接受这些附加参数： 持续时间： 动画在中的持续时间( ms)。

默认为1000ms。

动画在中的持续时间( ms)。

默认为1000ms。

延迟： 动画延迟时间( ms)。

默认为0。

动画延迟时间( ms)。

默认为0。

缓冲： 像“ bounce”、“ sway”、“ hardbounce”、“ hardsway”。

这些都是相同工具中的“ 缓冲” 菜单。

默认为“ bounce”。

像“ bounce”、“ sway”、“ hardbounce”、“ hardsway”。

这些都是相同工具中的“ 缓冲” 菜单。

默认为“ bounce”。

跳动： 动画的跳动次数。

默认为4次。

动画的跳动次数。

默认为4次。

刚度( stiffness)： 在动画中跳出的刚度值是在1到5之间。

默认值是3。

如何使用动画 一旦创建了动画， 可以选择把它定义成名为关键帧动画， 或者直接把它运用到DOM节点的任何一个元素。

define `var bounce = new Bounce(); bounce.rotate({ from: 0, to: 90 }); bounce.define(“my-animation”); 1 2 3 4 5 6 `

var bounce = new Bounce();

bounce.rotate({

from:0,

to:90

});

bounce.define(“my-animation”);

通过给定的名字来定义动画。

可以在你的

bounce.rotate({

from:0,

to:90

});

bounce.applyTo(document.querySelectorAll(“.animation-target”)); // or with

这种方法可以接受许多参数： 循环： 如果设置为true， 则无限循环动画。 默认是false。 如果设置为true， 则无限循环动画。 默认是false。 移除： 动画一旦完成就会被移除。 如果你的动画结束于一个不同于之前的元素状态， 那么该元素 在一些浏览器 中标返回它的原始状态。 默认值为false。 动画一旦完成就会被移除。 如果你的动画结束于一个不同于之前的元素状态， 那么该元素 中标返回它的原始状态。 默认值为false。 完成度： 动画完成后运行一个回掉函数。 如果你正在使用

console.log(“Animation Complete”);

});

1 2 3 4 bounce.applyTo($(“.animation-target”)).then(function () {

console.log(“Animation Complete”);

});

Remove即使动画定义了也可以手动移除： bounce.remove() 1 bounce.remove() 浏览器支持你可以通过如下方式来检查当前浏览器的支持度： Bounce.isSupported() 1 Bounce.isSupported() 运行类库需要浏览器同时支持3D旋转和关键帧动画。

完整示例这里有一个关于在工具中建立Splat动画预设并且把它运用到一个animation – target类的元素中。

var bounce = new Bounce();

bounce.translate({

from: {

x:-300,

y:0

},

to: {

x:0,

y:0

},

duration:600,

stiffness:4

}).scale({

from: {

x:1,

y:1

},

to: {

x:0.1,

y:2.3

},

easing:”sway”,

duration:800,

delay:65,

stiffness:2

}).scale({

from: {

x:1,

y:1

},

to: {

x:5,

y:1

},

easing:”sway”,

duration:300,

delay:30,

}).applyTo(document.querySelectorAll(“.animation-target”));

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var bounce = new Bounce();

bounce.translate({

from: {

x:-300,

y:0

},

to: {

x:0,

y:0

},

duration:600,

stiffness:4

}).scale({

from: {

x:1,

y:1

},

to: {

x:0.1,

y:2.3

},

easing:”sway”,

duration:800,

delay:65,

stiffness:2

}).scale({

from: {

x:1,

y:1

},

to: {

x:5,

y:1

},

easing:”sway”,

duration:300,

delay:30,

}).applyTo(document.querySelectorAll(“.animation-target”));

开发如果你想在本地运行Bounce.js的网站并编写JavaScript类库， 可以克隆这个报告并且按照如下命令运行( 确定你已经安装了

观察变化， 自动编译的文件并刷新浏览器。

$ grunt serve 1 $ grunt serve运行测试$ grunt test 1 $ grunt test该Bounce对象是你第一次通过scale、 rotate、 translate和skew不同的组件来构建的动画。

这样既可以被定义成已命名的动画供以后使用， 也可以直接在页面中使用这些元素。

官方网站： http: //bouncejs.com

开源地址：https://github.com/tictail/bounce.js