今天是情人節(jié)，我沒有女朋友。但是，有了Framer這個神器我可以假裝自己不單身啊！

實不相瞞，從九零年開始我就和我的影子在一起了，如今已同甘共苦九千多天。

我和我的影子

我編不下去了。這是我在大家約會的時間用Framer制作的一個小動效，它可以不斷地計時，上面的一顆心也會隨著時間流逝而翻頁。不管單身與否，F(xiàn)ramer還是要學(xué)的，我們一起看看如何實現(xiàn)這個效果吧。

這個效果的實現(xiàn)分為兩部分，一個是上面的“心”翻頁效果，一個是下面的計時效果。先看一下“心”翻頁效果如何實現(xiàn)。

心

我們只需要使用三個半心——兩個在下面固定不動，另外一個在上面翻頁。我給下面的兩個半心起名叫左心房和右心房。

左右心房

再新建一個圖層，起名為flipHeart，它的代碼如下：

翻頁的心

看著flipHeart這個名字，我想起一部電影《flipped》，中文名叫《怦然心動》，講了一個美好的初戀故事?；氐秸?，flipHeart的代碼中有個originX屬性，它的意思是把x軸的旋轉(zhuǎn)中心移到該元素的最左側(cè)，和ps里的旋轉(zhuǎn)中心類似。

類比ps

flipHeart的動畫過程：

圍繞左邊緣線翻轉(zhuǎn)180度到左邊，立即回到右邊重復(fù)上一步。如此往復(fù)循環(huán)，就會一直不斷地翻下去。但是為了達(dá)到更好的效果，我們還要控制它在翻轉(zhuǎn)過程中的明暗變化。所以，我們將其拆分為三個過程：0-0.4s內(nèi)翻轉(zhuǎn)90度到垂直于屏幕所在平面，亮度由暗變亮；0.4s-0.8s內(nèi)翻轉(zhuǎn)到最左邊，亮度由亮變暗；0.9s的時候回歸到右邊（此過程不帶動畫）。你可能會有疑問，為什么不是前0.5s內(nèi)翻到中間，后0.5s翻到左邊，在1s這一瞬間立即回歸原位呢？這是因為如果翻轉(zhuǎn)到了左邊立即回歸原位，中間沒有時間間隙，它就會閃一下不是很自然。

對應(yīng)的，我們給flipHeart添加兩個狀態(tài)，分別是翻轉(zhuǎn)到中間和翻轉(zhuǎn)到右邊的狀態(tài)：

flipHeart狀態(tài)

加上初始狀態(tài)，現(xiàn)在它一共有三個狀態(tài)。上面代碼中的brightness是圖層的亮度屬性，我們讓它翻轉(zhuǎn)到中間時變亮（140），翻轉(zhuǎn)到左邊時又變暗（93）。

動畫屬性設(shè)置如下：

動畫屬性

每次動畫時間是0.4s，動畫曲線設(shè)為勻速運(yùn)動可以讓真?zhèn)€翻頁過程更統(tǒng)一，當(dāng)然你也可以嘗試不同曲線做出不同感覺。

下面開始寫它的狀態(tài)轉(zhuǎn)換，先寫翻頁一次的代碼：

flipHeart翻轉(zhuǎn)一次的代碼

這段代碼的意思就是，在0s的時候轉(zhuǎn)換到middle狀態(tài)，0.4s后到了middle狀態(tài)，此時再轉(zhuǎn)換到over狀態(tài)，0.9s之后立即轉(zhuǎn)到default狀態(tài)，就是初始狀態(tài)。

但是我們需要它不停翻頁，所以需要一個計時器Utils.interval每隔1s執(zhí)行一次。我們把它裝進(jìn)一個函數(shù)，每次執(zhí)行這個函數(shù)就行啦。需要注意的是在計時之前先執(zhí)行一下翻頁，因為計時器默認(rèn)的第一次執(zhí)行是在這個時間間隔之后。

加上計時器

現(xiàn)在我們看看第二部分的效果如何實現(xiàn)。

第二部分

這個比較復(fù)雜，需要一定的js基礎(chǔ)。大概原理就是，每隔1s計算一下既定時間（情侶開始在一起的時間）和當(dāng)前時間之間的秒數(shù)差，除以3600*24就是剩余的天數(shù)，除以60的余數(shù)就是剩余的秒數(shù)，其它的計算方式看代碼：

計算代碼

我們把它放進(jìn)上面那個計時器里面，讓它不停地改動showLove圖層的文字內(nèi)容，就出現(xiàn)效果啦。

怎么樣？現(xiàn)在你看我是不是不單身了呢？

因為不用約會，我用剩余的時間把它做成了一個網(wǎng)頁小應(yīng)用，沒有Framer的同學(xué)也可以戳這里玩。

點(diǎn)擊這里獲取源代碼文件。