Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者

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 1 s 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
» 本文来自:前端开发者 » 《Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者》
» 本文链接地址:https://www.rokub.com/265.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!