FramerTeachExamples, 教或者学习成帧器的简单例子

分享于 

3分钟阅读

GitHub

  繁體 雙語
Simple examples to teach or learn Framer
  • 源代码名称:FramerTeachExamples
  • 源代码网址:http://www.github.com/motif/FramerTeachExamples
  • FramerTeachExamples源代码文档
  • FramerTeachExamples源代码下载
  • Git URL:
    git://www.github.com/motif/FramerTeachExamples.git
    Git Clone代码到本地:
    git clone http://www.github.com/motif/FramerTeachExamples
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/motif/FramerTeachExamples
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    成帧器范例- 学习和教学

    一组简单的例子,你可以通过初学者来完成。 它们都强调了一个特定的。通用的交互或者工作流。 对于更多中间用户,你可以尝试改进和扩展这些。

    包含示例

    1聊天视图 iMessage

    iMessage iOS应用的Prototype,从草图导入设计。 包含一堆滚动聊天消息,一个加载指示器和一个可以点击的听写 icon。

    封面: ScrollComponent,动画,点击事件,Utils.Delay

    http://share.framerjs.com/beip72l48igj/

    2聊天视图

    Facebook Messenger应用的Prototype,带有从草图导入的设计。 点击拇指 icon 以将Facebook的icon 作为新消息插入。 icon的大小取决于你的tap的持续时间。

    收费费用:ScrollComponent。动画。图像层。动画源。触摸事件。"更改:缩放"事件和 Utils.Modulate。

    http://share.framerjs.com/dbvb7poiozux/

    3。图像详细信息

    可以滚动的一组导入图像的原型,它的中每一个都可以单击并将图像带到前面和中心。

    ScrollComponent,滚动。isMoving,单击事件,复制和销毁图层,ignoreEvents和循环。

    http://share.framerjs.com/5ovfx0bflifz/

    4.锁定屏幕

    仅使用Framer定义的imageLayers created创建的iOS锁屏的Prototype。 你可以向右滑动以显示键盘。 壁纸会褪色,模糊。

    PageComponent,imageLayers,snapToPage,"更改:x"事件和 Utils.modulate。

    http://share.framerjs.com/7y6wautoh90y/

    5页面指示器

    可以在其中滑动的一组图像的Prototype。 所有图像均从草图导入。 页面指示器可视化图像的当前数量和总量。

    Covers: PageComponent,添加页,PageIndex和"更改:currentpage"事件。

    http://share.framerjs.com/nrtboo3dnh0s/ ( 未包含在共享链接中的草图文件)

    6查看转换

    Facebook组应用程序的Prototype,带有可以滚动的提要。 单击"写入帖子"会显示一个新视图,你可以取消该视图以取消。

    Covers: ScrollComponent,动态属性,滚动事件,单击事件

    http://share.framerjs.com/cinw13nmd706/


      learn