小皓子 wrote:
.slide.zoomOut {
opacity: 1.0;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
-webkit-transition-property: -webkit-transform, opacity;
-webkit-transition-delay: 5.0s, 0.0s;
-webkit-transition-duration: 10.0s, 5.0s;
這邊的前後秒數代表什麼意思呢??!!
.slide.zoomOut {
opacity: 1.0;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
-webkit-transition-property: -webkit-transform, opacity;
-webkit-transition-duration: 10.0s, 2.0s;
-webkit-transition-delay: 3.0s, 0;
}
.slide.zoomIn {
-webkit-transform: scale(2.0);
opacity: 0.0;
這個主題一開始第一張圖片是底圖
這時第二張圖片其實已經貼上了, 並且設定成"zoom in"狀態
只是因為透明度被設為0 (opacity 0,0)所以看不到
而第二張的圖片大小被設定為螢幕的兩倍大(scale(2.0))
所以如果你respring之後
看到的是底圖, 過了幾秒之後->兩倍大的第二張圖開始顯現
當第二張圖的透明度由0達到1之後
就開始執行"zoom out"的動作(圖片縮小)
-webkit-transform: scale(1.0); --> 這個轉場效果最後會將圖縮到全螢幕 1.0
-webkit-transform-origin: 50% 50%; -->最後的圖片位置會放到螢幕的中間
-webkit-transition-property: -webkit-transform, opacity; -->這個轉場效果包含兩個動作, transform縮放, 和opacity更改透明度
-webkit-transition-duration: 10.0s, 2.0s; -->上一個指令中的動作, 各用多少時間來完成
以這個例子為例, transform需要花10秒, 意思是從二倍大的圖, 縮小到一倍大的圖要花10秒的時間
opacity需要花2秒, 意思是透明度從0到1要花上兩秒
-webkit-transition-delay: 3.0s, 0; -->執行這兩個效果之前需等待時間. transform等待三秒, opacity立即執行.
聽起來有點複雜, 但是整個套用了之後你看到的效果就是
第一張底圖
第二張圖載入. 開始執行opacity效果, 同時tranform效果等待執行中(等待3秒)
花了2秒, 透明度由0變成1. 此時離transform執行還剩1秒
1秒後, 執行transform, 第二張圖利用10秒時間, 由2倍大縮小到1倍
配合theme.js裡的 var slideRotation (一張圖片停留時間), 可以得出圖片縮小到1倍之後, 下一張圖片何時載入.
例如我的slideRotation是設0.3 (分鐘), 也就是18秒
但是上面的轉場效果總共花了13秒 (3秒的transform等待時間+10秒的transform)
所以圖片最後縮小完後還會在桌面停留 18-13=5秒
所以5秒後, 第三張圖片就開始動作了 (花二秒改透明度, 再等一秒後開始縮小, 10秒後縮完, 等5秒, 第四張圖...)
希望這樣解釋不會搞的越來越複雜...邊看著圖片的變化邊算秒數, 會比較容易了解一點~
