我们只做互联网+的高阶培训 拥有好作品才会拥有好工作 咨询热线:13810428182
中文 | English

Framer JS教程:基础案例解析

承辉学院2017-09-26

    Framer Studio是一款很有趣的工具,它是针对于移动端利用CoffeeScript来进行代码编写的一款软件。


    最近我正好打算开始对这款软件进行学习,所以可以做一些学习笔记分享给大家。我基本上是先看说明文档,然后再看官方案例,最后开始看大神的教程。这就是我的学习办法,如果大家有兴趣的话,可以关注我的微信。


    需要准备的工具:Mac一台,V61版本Framer Studio(我还没弄到破解版用的限时版),有道词典打开FS,你们就会进入标准的工作界面:


    左面是代码窗口,右侧是我们看到的模拟器


    接下来我们开始码代码,首先我们新建一个背景色

1.png

    接下来,我们开始设定一个图层,并设定他们高宽属性

2.png

    大家可以看到通过这种设定我们已经调整出来一个方形,并且居于整个视图的左上角,因为左上角为默认的(0,0)点,如果我们想要将其至于中心,该如何做呢?


    继续写


    x:Align.center

    y:Align.center


    这两句的意思是,让物体的中心点,居于视图的中心,x、y分别居中对齐

3.png

    当然,因为效果需要,所以最后我们需要做一些调整,继续写

4.png

    经过一番调整,我们就写完了第一个白色方块

    继续写另一个,这个我就快点说了

5.png

    接下来我要做的一件事情可能会略微有些难懂,我先跟大家简述一下原理,然后再继续写代码


    大家知道,刚才我写的LsyerA,LayerB实际上他们目前已经具备一种状态了。


    所以我要继续给他们添加第二种状态,就是所谓的Add stases


    我们开始写

6.png

    实际上,我们目前已经给两个形状都添加了变化值属性,现在缺乏一行代码让他们动起来

7.png

    OK,继续开始写代码,我们让LayerA、B每隔两秒执行一次

8.png

    当然,这样做没有什么层次,所以我们可以将LayerB的代码重新写一下,让它有延迟

9.png

    这样,我们的最终效果就制作完毕了。

1506311393473810.gif

211570822636196840.jpg

承辉教务01
承辉教务02