关键帧动画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
總結
以上是生活随笔為你收集整理的关键帧动画html例子,Bounce.js 是一个漂亮的CSS3关键帧动画生成工具和类库_前端开发者...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android推送接口,推送API
- 下一篇： threejs添加立方体_前端图形学(三