Framer交互实践:勇敢的心

实现方法来自:Framer教程

效果:

在原来的动画效果下,修改了两个小地方:

1. 关于状态跳转的延时,状态1--0.4s--状态2--0.5s--状态3--0.1s--状态1,原文用了在初始时间上延时0.9s实现状态2到状态3的跳转,一开始没有看到 Utils.delay 0.9这一句顶格写,也就是我理解为了在状态2后延时0.9s才转移到状态3。这里修改了一下,直接在下方延时0.5s,更便于理解;

2. 原文计算了所有的天数,我把出生到现在的年、月、日也附带上了:

源码:点我

第一次学写Framer, 还要多多加油  ヘ|・∀・|ノ*~

推荐阅读更多精彩内容