美文网首页
Framer动效07

Framer动效07

作者: huangxiaohao | 来源:发表于2016-07-22 10:18 被阅读46次

自己动手做的第一个动效,没有再跟着教程啦

这个动效是在安卓手机上刷知乎遇到的

很简单的material design的动效,撸一发

01 先在sketch里画出三个圆圈

就这样的,打开着sketch,导入到framer。

贴出所有代码

sketch = Framer.Importer.load("imported/动效07@2x")

sketch.anniu.opacity=0

sketch.anniu.states.add

on:

opacity:1

defaults:

opacity:0

sketch.anniu.states.animationOptions=curve: "spring(300,30,0)"

sketch.bot.states.add

on:

rotation:-45

defaults:

rotation:90

sketch.bot.states.animationOptions=curve: "spring(300,30,0)"

sketch.bot.on Events.Click, ->

sketch.bot.states.next()

sketch.anniu.states.next()

运行之后,效果是这个样子的

加油~

相关文章

  • Framer动效07

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

  • 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动效09

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

  • framer动效12

    #设置屏幕颜色 Screen.backgroundColor="white" #新建layerA层级 layerA...

网友评论

      本文标题:Framer动效07

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