美文网首页
Framer动效制作01

Framer动效制作01

作者: huangxiaohao | 来源:发表于2016-07-20 16:45 被阅读56次

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

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

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

贴出代码

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

    在dribble上看到过许多精彩的交互动效,一直在寻找一款比较好的动效制作软件。试过pixate,但是很快就放弃了...

  • Framer动效15

    今天照着framer官网的视频做了一个Facebook的Group的动效。 我们首先来看动效的几个点: Group...

  • Framer 动效15

    传送门 http://www.jianshu.com/p/dabd180b3620

  • Framer动效06

    # Import file "动效05" (sizes and positions are scaled 1:2)...

  • Framer动效03

    Screen.backgroundColor="#2dd7aa" scroll=new ScrollCompone...

  • Framer动效04

    Screen.backgroundColor="#7ddd11" page=new PageComponent x...

  • Framer动效02

    程序如下: Screen.backgroundColor="#28AFFA" constraints=new La...

  • Framer动效05

    Screen.backgroundColor="#877dd7" LayerA=new Layer width: ...

  • Framer动效07

    自己动手做的第一个动效,没有再跟着教程啦 这个动效是在安卓手机上刷知乎遇到的 很简单的material desig...

  • Framer动效09

    Screen.backgroundColor="fff" layerA=new Layer width:20 he...

网友评论

      本文标题:Framer动效制作01

      本文链接:https://www.haomeiwen.com/subject/uabvjttx.html