关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...
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