关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...
Bounce.
bouncejs.com提供的工具支持生成靜態(tài)關(guān)鍵幀， 不需要使用額外JavaScript代碼， 如果想在你的應(yīng)用程序中動(dòng)態(tài)生成這些代碼， 可以使用Bounce.
安裝可以通過Bower或者NPM安裝： $ bower install bounce.js 1 $ bower install bounce.js或者$ npm install bounce.js 1 $ npm install bounce.js你可以從Github上瀏覽和下載所有的發(fā)行版本。
使用方式要?jiǎng)?chuàng)建一個(gè)動(dòng)畫， 可以實(shí)例化一個(gè)名為Bounce的新對象：
var bounce = new Bounce();
1
var bounce = new Bounce();
首先使用Bounce對象縮放、 旋轉(zhuǎn)、 平移和傾斜四種不同的組件來構(gòu)建動(dòng)畫。
這樣既可以定義成已命名的動(dòng)畫供以后使用， 或者直接在頁面中使用這些元素。
添加動(dòng)畫組件正如剛才所提到， 你可以像使用Bounce.js工具那樣調(diào)用scale( 縮放)、 rotate( 旋轉(zhuǎn))、 translate( 平移) 和skew( 傾斜) 方法創(chuàng)建自己的動(dòng)畫。
所有的這些方法都接受一些共同選項(xiàng)， from和to參數(shù)定義了動(dòng)畫的起始點(diǎn)。
請注意所有的這些方法都是鏈?zhǔn)秸{(diào)用。
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參數(shù)定義了元素縮放X( 寬度) 和Y( 高度) 的比率。
上面的例子繪制了從半個(gè)到整個(gè)元素。
動(dòng)畫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參數(shù)定義了旋轉(zhuǎn)的度數(shù)。
以上例子將元素向右旋轉(zhuǎn)了90°。
動(dòng)畫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參數(shù)定義了在X方向和Y方向平移的像素。
上面例子將元素向右移動(dòng)100像素。
動(dòng)畫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參數(shù)定義了元素在X和Y軸的傾斜度。
上面的例子中， 動(dòng)畫的傾斜度為在橫軸向上20°。
動(dòng)畫常用動(dòng)畫參數(shù)所有方法都接受這些附加參數(shù)： 持續(xù)時(shí)間： 動(dòng)畫在中的持續(xù)時(shí)間( ms)。
默認(rèn)為1000ms。
動(dòng)畫在中的持續(xù)時(shí)間( ms)。
默認(rèn)為1000ms。
延遲： 動(dòng)畫延遲時(shí)間( ms)。
默認(rèn)為0。
動(dòng)畫延遲時(shí)間( ms)。
默認(rèn)為0。
緩沖： 像“ bounce”、“ sway”、“ hardbounce”、“ hardsway”。
這些都是相同工具中的“ 緩沖” 菜單。
默認(rèn)為“ bounce”。
像“ bounce”、“ sway”、“ hardbounce”、“ hardsway”。
這些都是相同工具中的“ 緩沖” 菜單。
默認(rèn)為“ bounce”。
跳動(dòng)： 動(dòng)畫的跳動(dòng)次數(shù)。
默認(rèn)為4次。
動(dòng)畫的跳動(dòng)次數(shù)。
默認(rèn)為4次。
剛度( stiffness)： 在動(dòng)畫中跳出的剛度值是在1到5之間。
默認(rèn)值是3。
如何使用動(dòng)畫 一旦創(chuàng)建了動(dòng)畫， 可以選擇把它定義成名為關(guān)鍵幀動(dòng)畫， 或者直接把它運(yùn)用到DOM節(jié)點(diǎn)的任何一個(gè)元素。
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”);
通過給定的名字來定義動(dòng)畫。
可以在你的
bounce.rotate({
from:0,
to:90
});
bounce.applyTo(document.querySelectorAll(“.animation-target”)); // or with
這種方法可以接受許多參數(shù)： 循環(huán)： 如果設(shè)置為true， 則無限循環(huán)動(dòng)畫。 默認(rèn)是false。 如果設(shè)置為true， 則無限循環(huán)動(dòng)畫。 默認(rèn)是false。 移除： 動(dòng)畫一旦完成就會(huì)被移除。 如果你的動(dòng)畫結(jié)束于一個(gè)不同于之前的元素狀態(tài)， 那么該元素 在一些瀏覽器 中標(biāo)返回它的原始狀態(tài)。 默認(rèn)值為false。 動(dòng)畫一旦完成就會(huì)被移除。 如果你的動(dòng)畫結(jié)束于一個(gè)不同于之前的元素狀態(tài)， 那么該元素 中標(biāo)返回它的原始狀態(tài)。 默認(rèn)值為false。 完成度： 動(dòng)畫完成后運(yùn)行一個(gè)回掉函數(shù)。 如果你正在使用
console.log(“Animation Complete”);
});
1 2 3 4 bounce.applyTo($(“.animation-target”)).then(function () {
console.log(“Animation Complete”);
});
Remove即使動(dòng)畫定義了也可以手動(dòng)移除： bounce.remove() 1 bounce.remove() 瀏覽器支持你可以通過如下方式來檢查當(dāng)前瀏覽器的支持度： Bounce.isSupported() 1 Bounce.isSupported() 運(yùn)行類庫需要瀏覽器同時(shí)支持3D旋轉(zhuǎn)和關(guān)鍵幀動(dòng)畫。
完整示例這里有一個(gè)關(guān)于在工具中建立Splat動(dòng)畫預(yù)設(shè)并且把它運(yùn)用到一個(gè)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”));
開發(fā)如果你想在本地運(yùn)行Bounce.js的網(wǎng)站并編寫JavaScript類庫， 可以克隆這個(gè)報(bào)告并且按照如下命令運(yùn)行( 確定你已經(jīng)安裝了
觀察變化， 自動(dòng)編譯的文件并刷新瀏覽器。
$ grunt serve 1 $ grunt serve運(yùn)行測試$ grunt test 1 $ grunt test該Bounce對象是你第一次通過scale、 rotate、 translate和skew不同的組件來構(gòu)建的動(dòng)畫。
這樣既可以被定義成已命名的動(dòng)畫供以后使用， 也可以直接在頁面中使用這些元素。
官方網(wǎng)站： http: //bouncejs.com
開源地址：https://github.com/tictail/bounce.js
總結(jié)
以上是生活随笔為你收集整理的关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android推送接口,推送API
- 下一篇： 如何上传html验证文件大小,html5