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()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 11,070评论 2 2
  • 在dribble上看到过许多精彩的交互动效,一直在寻找一款比较好的动效制作软件。试过pixate,但是很快就放弃了...
    huangxiaohao阅读 3,106评论 0 1
  • 《感恩》 简书中初识却无私的帮助我的叔叔阿姨、哥哥姐姐,让我感到无比温暖,真的不知如何表达感激之情,仅以此篇聊表心...
    光诗燃梦阅读 4,253评论 66 63
  • 我决定把学习的过程写下来,目的和[告诉所有人你决定减肥了!]一样,希望可以督促自己,学习不是一件孤独的事情。 参考...
    崽orz阅读 5,393评论 2 5
  • 晚上看到梅花的图片,甚觉美丽,有种孤傲的感觉,便拿起笔画了起来。 单独的一支有些孤单,便画了一朵梅花陪伴它。 很想...
    滴水沁心阅读 3,728评论 3 5