網(wǎng)易看游戲官網(wǎng)（http://kanyouxi.163.com/）（已下架），是我以前（2014年）做的一個(gè)項(xiàng)目，也是我們首個(gè)放棄Flash，采用HTML5與制作動(dòng)畫的網(wǎng)站，當(dāng)時(shí)業(yè)內(nèi)為數(shù)不多的采用CSS3用于主動(dòng)畫實(shí)際生產(chǎn)的網(wǎng)站，當(dāng)然現(xiàn)在已經(jīng)很廣泛使用了，特別是在移動(dòng)端，CSS3是性能的保障?，F(xiàn)在總結(jié)分享一下，能讓自己有溫故知新之余，也希望對(duì)初學(xué)者進(jìn)階有幫助。

怎樣的動(dòng)畫？

這個(gè)動(dòng)畫并不算復(fù)雜，但包含了transform，rotate，translate，keyframes，緩動(dòng)，和循環(huán)次數(shù)這幾個(gè)重要的內(nèi)容。好了，先看看動(dòng)畫效果，下面是錄屏動(dòng)畫，也可以到網(wǎng)易看游戲官網(wǎng)（http://kanyouxi.163.com/）(已下架)上去看看。

有幾個(gè)關(guān)鍵點(diǎn)，按順序分別為：

•  白色iPhone向上翻動(dòng)，然后做幾個(gè)小幅度抖動(dòng)；
• 字幕從右邊出現(xiàn)，把白色iPhone向左推動(dòng)；
• 白色iPhone快到心頭后，黑色iPhone也跟隨出現(xiàn)；
• 大標(biāo)題“網(wǎng)易看游戲”背景波浪式閃爍滾動(dòng)。

下面讓我們我們一個(gè)個(gè)來。

注：這是一個(gè)CSS3進(jìn)階實(shí)踐文章，如果你對(duì)CSS3動(dòng)畫還不是很了解，請(qǐng)先看這里： CSS3動(dòng)畫 ，1分鐘快速了解一下再回來。

1. 向上翻動(dòng)并抖動(dòng)

這里有幾個(gè)關(guān)鍵屬性，詳細(xì)使用方法可以進(jìn)去看： @keyframes ， transform:rotate(deg); ， transform-origin:x,y;

準(zhǔn)備動(dòng)畫關(guān)鍵幀@keyframes

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    100% {
        transform:rotate(0deg); 
        transform-origin:125px 600px;
        }            
}

我們直接用百份比來作為幀點(diǎn)，因?yàn)楹竺孢€會(huì)把它再細(xì)分多個(gè)幀。

設(shè)置旋轉(zhuǎn)與Anchor Point（錨點(diǎn)transform-origin:x,y; ）

transform:rotate(-30deg);
transform-origin:125px 650px;

旋轉(zhuǎn)是必須的，但為何要修改Anchor Point呢？

Anchor Point，是借用了cocos2D里的說法，是指變換的原點(diǎn)。

因?yàn)閠ransform的默認(rèn)錨點(diǎn)是中心，即(50%,50%)，在transform里Anchor Point屬性就是 transform-origin ，以下是默認(rèn)值：

transform-origin:50%,50%

在支持3D的變換里，還有第3個(gè)數(shù)值：z，默認(rèn)是0

如果不修改，就會(huì)以iPhone的中心為原點(diǎn)旋轉(zhuǎn)，這不是我們想要的效果，所以把它移到下方的水平中央去。

這個(gè)圖片的寬度是250px，高度為525px，下方中央就是(125px,525px)，但為了模擬實(shí)物在桌子上搖擺，還要往下移一些，經(jīng)過嘗試，我們最終選擇了(125px,650px)，如下圖示：

添加抖動(dòng)與擬物

抖動(dòng)其實(shí)也是幾個(gè)關(guān)鍵幀組合的產(chǎn)物，首次旋轉(zhuǎn)不是0度，而是過了一點(diǎn)點(diǎn)的10度，接著往返各兩個(gè)關(guān)鍵幀，幅度逐漸減小。添加關(guān)鍵幀后的@keyframes改動(dòng)如下：

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    50% {
        transform:rotate(10deg);
        transform-origin:125px 600px;
        }
    75% {
        transform:rotate(-5deg);
        }
    100% {
        transform:rotate(0deg);
        }
}

注意，上面33%位置的幀處，添加了一條 transform-origin:125px 600px; ，因?yàn)槿绻怀刹蛔兊腻^點(diǎn)，會(huì)給人感覺像是一個(gè)鐘擺，太死板不夠擬物化，想像一下：一個(gè)東西以某個(gè)拋物線落到地上，經(jīng)過與地面碰撞，改變運(yùn)動(dòng)方向，最終慢慢停下來，所以我們把中心點(diǎn)的高度也減小一點(diǎn)，讓人看上去“ 不那么規(guī)律 ”。

在關(guān)鍵幀的時(shí)間點(diǎn)上，也模擬了慢出的緩動(dòng)效果。所謂的動(dòng)畫感覺做得好不好，也就是緩動(dòng)效果做得如何，夠不夠接近物理世界給人的認(rèn)知。

這個(gè)幀點(diǎn)也并非最后的時(shí)間點(diǎn)，請(qǐng)繼續(xù)往下看。

2. 字幕出現(xiàn)并推走iPhone

字幕出現(xiàn)

字幕在另外一個(gè)元素，所以我們新建一個(gè)關(guān)鍵幀組：

@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}

因?yàn)槭莍Phone動(dòng)畫先走，然后才是字幕，所以動(dòng)畫延時(shí)執(zhí)行 animation-delay ：

animation-delay:.2s;

但為了兩個(gè)關(guān)鍵幀組能更好的同步，不用算來算去，我們也以這樣做：

@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

先用透明度隱藏它，在40%才開始，在移動(dòng)的過程再逐漸顯示，讓過程更平滑。

前面還說到，中間還要用字幕推iPhone一下，怎么做？

模擬碰撞

純CSS3是做不了的，除非全程用JS進(jìn)行，或者用Box2D進(jìn)行碰撞判斷。但我們這里只是一個(gè)簡(jiǎn)單的走過場(chǎng)動(dòng)畫，不需要人機(jī)交互，也不會(huì)變化移動(dòng)的距離，所以，我們用一個(gè)變戲法，兩個(gè)動(dòng)畫一起并行，在關(guān)鍵節(jié)點(diǎn)埋關(guān)鍵幀，即：字幕移動(dòng)到iPhone位置時(shí)，iPhone才開始移動(dòng)。

兩個(gè)關(guān)鍵幀組結(jié)合起來就是：

@keyframes iphone-front{
    0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;}
    20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;}
    30% {transform:rotate(-5deg);}
    38% {transform:rotate(0deg);}
    60% {transform: translate3d(0,0,0);  opacity: 1;}
    90% {transform: translate3d(-340px,0,0); }
    100% {transform: translate3d(-340px,0,0);}
}
@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    60% { transform: translate3d(225px,0,0); opacity: 1; }
    80% { transform: translate3d(0,0,0); opacity: 1; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

/*以下選擇器略去了非動(dòng)畫屬性設(shè)置，例如寬高等，我們就當(dāng)他們默認(rèn)就是正確的值吧*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}

可以看出，這里沒有使用delay屬性，是為了更直觀的設(shè)置并行動(dòng)畫，大家都在60%的位置碰頭，都使用了ease-out緩出。

為什么iphone-front的100%幀處要重復(fù)90%的內(nèi)容？因?yàn)槲覀冇昧?animation-fill-mode 屬性，值為forwards，即停在最后一幀，如果100%沒有寫，就會(huì)退回到最初狀態(tài)了。

3. 黑色iPhone跟隨出現(xiàn)

黑色iPhone的動(dòng)畫更簡(jiǎn)單，只是一個(gè)漸現(xiàn)加移動(dòng)，同樣也是另外一個(gè)并行動(dòng)畫，不過這次可以用delay了，先預(yù)估一下大概出現(xiàn)的時(shí)間，可以得到從0.5s開始：

@keyframes iphone-back{
    0% { transform: translate3d(97px,0,0); opacity: 0;}
    40%{ opacity: 0; }
    50%{ transform: translate3d(0,0,0); opacity: 1;}
    100% {opacity: 1; }
}
.iphone-back-ani{
    animation: iphone-back 1.8s ease-out .5s forwards;
}

這里不需要最后一幀重復(fù)寫代碼了，因?yàn)樗緛砭褪?0,0,0)，不會(huì)產(chǎn)生任何變化。

為何用translate3d(x,y,z);而不用translateX(x)？因?yàn)樵缜坝腥苏J(rèn)為這個(gè)效率會(huì)更高，特別在移動(dòng)端性能更優(yōu)。

查看手冊(cè)：transform

4. 大標(biāo)題背景波浪

這個(gè)不涉及transfrom，讓前景與背景重疊在一起，背景圖片在y軸不間斷移動(dòng)，無限循環(huán)，無緩動(dòng)；關(guān)鍵的是這個(gè)背景圖必須上下能無縫連接：

@keyframes title{
    0% { background-position: 0 0;}
    100% { background-position: 0 -76px;}
}

.title-bg{
    width: 301px; 
    height: 61px; 
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: url(title_text_bg.png) repeat-y;
    animation: title 1.2s linear;
    animation-iteration-count:infinite;
}
.title-front{
    width: 301px; 
    height: 61px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background: url(title_text_front.png) no-repeat;
}

這是最簡(jiǎn)單的做法，適合大多數(shù)情況。也有另外一些更高級(jí)的，例如使用mask，關(guān)于mask，有興趣請(qǐng)看 《CSS Masking》 。

其它效果

結(jié)語

手寫動(dòng)畫，雖然比較費(fèi)時(shí)，但能讓你了解現(xiàn)實(shí)原理。如果需要可視化制作，推薦一個(gè)在線工具給大家： cssanimate ，相比其它生成器，優(yōu)點(diǎn)是可以設(shè)置多個(gè)關(guān)鍵幀，而且可以通過鼠標(biāo)拖動(dòng)直接操作，推薦！

到此這篇關(guān)于使用CSS3制作版頭動(dòng)畫效果的文章就介紹到這了,更多相關(guān)css3版頭動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論