Framer动效11—单身计时器

教程地址Framer教程 | 今天怎样让自己看起来不单身？

我的实现效果

从上一次失恋开始~

Framer.Device.screen.backgroundColor="#faf"

rightHouse=new Layer

x: Align.center(100)

y: Align.center

height: 362

image: "images/heart-right.png"

leftHouse = new Layer

x: Align.center(-100)

y: Align.center()

height: 362

image: "images/heart-left.png"

flipHeart=new Layer

x: Align.center(100)

y: Align.center()

height: 362

originX: 0

image: "images/heart-right.png"

flipHeart.states.add

middle:

rotationY:-90

brightness: 140

opacity: 0.5

over:

rotationY:-180

brightness: 93

flipHeart.states.animationOptions=

time:0.4

curve: "linear"

showLoveNames=new Layer

backgroundColor: "#faf"

x:164

y: 1301

width: 1208

height: 160

html: "我和影子一共在一起"

style:

textAlign:"center"

fontSize:"80px"

lineHeight:"160px"

showLove=new Layer

backgroundColor: "#faf"

x: 164

y: 1461

width: 1208

height: 160

html: "love"

style:

textAlign:"center"

fontSize:"100px"

lineHeight:"160px"

start=new Date(2015,3,11)

startSecond=start.getTime()/1000

handle =() ->

flipHeart.states.switch("middle")

Utils.delay 0.4,->

flipHeart.states.switch("over")

Utils.delay 0.9,->

flipHeart.states.switchInstant("default")

now =new Date()

nowSecond=now.getTime()/1000

diffDay=parseInt((nowSecond-startSecond)/3600/24)

diffHour=parseInt((nowSecond-startSecond)/3600%24)

diffMintue=parseInt((nowSecond-startSecond)/60%60)

diffSecond=parseInt((nowSecond-startSecond)%60)

showLove.html=diffDay+"天"+diffHour+"小时"+diffMintue+"分钟"+diffSecond+"秒"

handle()

Utils.interval 1,->

handle()