Framer动效制作01

在dribble上看到过许多精彩的交互动效,一直在寻找一款比较好的动效制作软件。试过pixate,但是很快就放弃了,觉得这个软件支持的有限,而且逻辑上就是把握不好。

找到Framer,正好我有一定的前端知识,想想设计师在啪啪啪的敲代码,就觉得好帅气,所以就决定来学习这款软件。其实,用到的前段知识真的不多,看的懂代码就好啦。

这个系列我会持续更新下去,希望早日可以做出帅气的动效 :)


Framer动效制作01_第1张图片

贴出代码

Screen.backgroundColor="#877dd4"

layerA=new Layer

         width: 150

         height: 150

         x:Align.center(-98)

         y:Align.center()

         backgroundColor: "#fff"

         borderRadius: 6

layerB=new Layer

         width: 150

         height: 150

         x:Align.center(90)

         y:Align.center

         backgroundColor: "#fff"

         borderRadius: 75 

         layerA.states.add

         rotated:

         rotationX:180

layerA.states.add

         rotated:

               rotationX:180

layerB.states.add

          rotated:

              borderRadius:6

              rotation: 90

Utils.interval 2,->

layerA.states.next()

Utils.interval 3,->

layerB.states.next()


Framer动效制作01_第2张图片

你可能感兴趣的:(Framer动效制作01)