bounce.js_创建有趣的CSS3动画_前端开发者

前端开发者丨CSS3

https://www.rokub.com

Bounce.js 是一个漂亮的关键帧动画生成工具和类库，基于CSS3实现。
bouncejs.com提供的工具支持生成静态关键帧，不需要使用额外JavaScript代码，如果想在你的应用程序中动态生成这些代码，可以使用Bounce.js类库。
安装可以通过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” ) ;通过给定的名字来定义动画。
可以在你的css动画参数中使用：my-animation 1s linear both；applyTovar bounce = new Bounce(); bounce.rotate({ from: 0, to: 90 }); bounce.applyTo(document.querySelectorAll(“.animation-target”)); // or with jquery: bounce.applyTo($(“.animation-target”)); 1 2 3 4 5 6 7 var bounce = new Bounce ( ) ; bounce . rotate ( { from : 0 , to : 90 } ) ; bounce . applyTo ( document . querySelectorAll ( “.animation-target” ) ) ; // or with jquery: bounce.applyTo($(“.animation-target”));直接在单个或者元素列表中使用动画。
这种方法可以接受许多参数：循环： 如果设置为true，则无限循环动画。
默认是false。
如果设置为true，则无限循环动画。
默认是false。
移除： 动画一旦完成就会被移除。
如果你的动画结束于一个不同于之前的元素状态，那么该元素 在一些浏览器 中标返回它的原始状态。
默认值为false。
动画一旦完成就会被移除。
如果你的动画结束于一个不同于之前的元素状态，那么该元素 中标返回它的原始状态。
默认值为false。
完成度：动画完成后运行一个回掉函数。
如果你正在使用jquery,方法将会返回一个允许你使用onComplete参数来替换：bounce.applyTo($(“.animation-target”)) .then(function() { 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类库，可以克隆这个报告并且按照如下命令运行（确定你已经安装了node、NPM和Bower）:# Install dependencies $ npm install $ bower install 1 2 # Install dependencies $ npm install $ bower install在本地主机：9000端口上启动服务。
观察变化，自动编译的文件并刷新浏览器。
$ grunt serve 1 $ grunt serve运行测试$ grunt test 1 $ grunt test该Bounce对象是你第一次通过scale、rotate、translate和skew不同的组件来构建的动画。
这样既可以被定义成已命名的动画供以后使用，也可以直接在页面中使用这些元素。
官方网站：http://bouncejs.com/

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

前端开发者丨CSS3

https://www.rokub.com