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

今天是情人节，我没有女朋友。但是，有了Framer这个神器我可以假装自己不单身啊！

实不相瞒，从九零年开始我就和我的影子在一起了，如今已同甘共苦九千多天。

我和我的影子

我编不下去了。这是我在大家约会的时间用Framer制作的一个小动效，它可以不断地计时，上面的一颗心也会随着时间流逝而翻页。不管单身与否，Framer还是要学的，我们一起看看如何实现这个效果吧。

这个效果的实现分为两部分，一个是上面的“心”翻页效果，一个是下面的计时效果。先看一下“心”翻页效果如何实现。

心

我们只需要使用三个半心——两个在下面固定不动，另外一个在上面翻页。我给下面的两个半心起名叫左心房和右心房。

左右心房

再新建一个图层，起名为flipHeart，它的代码如下：

翻页的心

看着flipHeart这个名字，我想起一部电影《flipped》，中文名叫《怦然心动》，讲了一个美好的初恋故事。回到正文，flipHeart的代码中有个originX属性，它的意思是把x轴的旋转中心移到该元素的最左侧，和ps里的旋转中心类似。

类比ps

flipHeart的动画过程：

围绕左边缘线翻转180度到左边，立即回到右边重复上一步。如此往复循环，就会一直不断地翻下去。但是为了达到更好的效果，我们还要控制它在翻转过程中的明暗变化。所以，我们将其拆分为三个过程：0-0.4s内翻转90度到垂直于屏幕所在平面，亮度由暗变亮；0.4s-0.8s内翻转到最左边，亮度由亮变暗；0.9s的时候回归到右边（此过程不带动画）。你可能会有疑问，为什么不是前0.5s内翻到中间，后0.5s翻到左边，在1s这一瞬间立即回归原位呢？这是因为如果翻转到了左边立即回归原位，中间没有时间间隙，它就会闪一下不是很自然。

对应的，我们给flipHeart添加两个状态，分别是翻转到中间和翻转到右边的状态：

flipHeart状态

加上初始状态，现在它一共有三个状态。上面代码中的brightness是图层的亮度属性，我们让它翻转到中间时变亮（140），翻转到左边时又变暗（93）。

动画属性设置如下：

动画属性

每次动画时间是0.4s，动画曲线设为匀速运动可以让真个翻页过程更统一，当然你也可以尝试不同曲线做出不同感觉。

下面开始写它的状态转换，先写翻页一次的代码：

flipHeart翻转一次的代码

这段代码的意思就是，在0s的时候转换到middle状态，0.4s后到了middle状态，此时再转换到over状态，0.9s之后立即转到default状态，就是初始状态。

但是我们需要它不停翻页，所以需要一个计时器Utils.interval每隔1s执行一次。我们把它装进一个函数，每次执行这个函数就行啦。需要注意的是在计时之前先执行一下翻页，因为计时器默认的第一次执行是在这个时间间隔之后。

加上计时器

现在我们看看第二部分的效果如何实现。

第二部分

这个比较复杂，需要一定的js基础。大概原理就是，每隔1s计算一下既定时间（情侣开始在一起的时间）和当前时间之间的秒数差，除以3600*24就是剩余的天数，除以60的余数就是剩余的秒数，其它的计算方式看代码：

计算代码

我们把它放进上面那个计时器里面，让它不停地改动showLove图层的文字内容，就出现效果啦。

怎么样？现在你看我是不是不单身了呢？

因为不用约会，我用剩余的时间把它做成了一个网页小应用，没有Framer的同学也可以戳这里玩。

点击这里获取源代码文件。