美文网首页
Protopie教程(一)先导篇

Protopie教程(一)先导篇

作者: 菜菜的移动城堡 | 来源:发表于2018-12-25 13:23 被阅读0次

Protopie是什么?

无代码原型工具,轻松组合即可制作交互动效,摆脱代码束缚体验感应式交互。

官网了解一下:http://www.protopie.cn/features/

总结出以下几点protopie的优势:

1、自带容器滚页、滑页,操作简便;各种范围和手势的关联作用,好用得不行;

2、交互手势丰富,支持3D touch、倾斜等传感触发;关联、条件设置等超级好用,笔芯;

3、变量、表达式和函数解决各种数据问题,你值得拥有;

4、自带电脑预览窗口,移动端有对应预览app,实时查看可通过扫二维码、连接设备IP地址、usb端口三种方式连接,还可以保存成离线状态文件;

后续的教程中会陆续涉及到以上几点,今天先简单介绍下载和界面分布。

一、Protopie工具下载

小伙伴们可以到上面提到的官网直接下载protopie试用版,链接在此http://www.protopie.cn/download/

一般试用为7天,注册后加10天试用时间,过了试用期需要购买正版软件(支持正版),我的是在淘宝上荔枝数码买的中文版,299元(不是广告谢谢),国际版跟中文版一样,但是价格是2倍,我也不知道为啥,😂

另外,官网偶尔会做做活动,已然错过了半价时间,哭戚戚。。

二、界面简介

1、元素选择

可添加图片、视频、矩形、圆形、文本、输入文本、容器

2、尺寸/场景切换

支持ios、安卓、平板及自定义尺寸;可切换和管理不同的场景

选择设备


切换场景

3、作品演示(触发除外)

预览窗口、设备连接、播放(连接到手机后)、云端(显示最新一次上传结果)、上传至云端(直接上传本次文档)

云端和上传都是建立在有账号的基础上哦~

4、图层区

显示本场景下的所有图层的名称、顺序、包含关系,直接双击名称可修改,位置可拖动进行调整。

各图层均可进行锁定/解锁和显示/隐藏操作。

图层下有变量设置区域,可添加两种变量,一是适用于所有场景,而是仅适用于当前场景,变量如何使用,后面还会有章节详细描述。

变量创建

5、屏幕展示区

仅在屏幕区域内的内容能被看到,无论是预览窗口还是手机app。

6、添加交互+触发区

Protopie的核心功能区域包含添加触发动作、动作形式、动画时间轴,每一个操作对应的属性在图层属性区进行编辑。触发动作丰富,如下:

添加触发

另外单个动作下可选择不同的动作形式,灵活运用效果非常强大。

7、图层属性区

显示每个图层属性,包括有位置、大小、锚点、旋转、透明度、圆角、填充色(不可设置描边)、文本大小、位置、默认文本等,容器有选择是否可滚页、滑页、是否剪切子层内容等功能。

以上,了解了界面后,我们开始拿实际项目做一下吧~

相关文章

  • Protopie教程(一)先导篇

    Protopie是什么? 无代码原型工具,轻松组合即可制作交互动效,摆脱代码束缚体验感应式交互。官网了解一下:ht...

  • 先导篇

    今天晚上是蒂斯中学的周年庆晚会,据说在这天晚上会出现百年难得一见的血红色月亮。然而在这个充满着欢闹声的野外里,...

  • 【交互原型设计工具】ProtoPie for Mac 2.3.1

    文章来源于:风云社区 ProtoPie for Mac 2.3.1 ProtoPie是一款Mac上优秀的交互原型设...

  • Protopie进阶教程--动态时钟(上)

    前言 Protopie简介 目前市面上有非常多可做交互型动效(可实际操作交互的效果)的软件,常见的有: ○ Pri...

  • Protopie进阶教程--动态时钟(中)

    导读秒表——常用的测时工具,从零开始进行计时。本案例中具体实现的秒表,用户点开始后即开始计时,在秒表运行的时候可以...

  • Protopie进阶教程--动态时钟(下)

    导读计时器——用户可设定时间段,点击开始后时间倒数,直到结束。本案例中用户可以设定24小时以内的任意时间值进行倒计...

  • Protopie实战教程:checkbox多选框

    checkbox多选框和radio一样在任何Web和APP应用中都非常常见,且形式更多样,我们所要实现的效果如下:...

  • Protopie教程(三)滚动视差效果

    上节我们做了banner的滑页功能及页码函数关联,小伙伴们有木有好好练习呀 本节主要说一说跟手滑动的图片滚动视差效...

  • 临摹-先导篇

  • 他山之石-先导篇

    开博至今,博主写的大多是个人经验及心得感悟,而前来咨询的同学背景则是五花八门,个人情况与求职意向更是千差万别。很多...

网友评论

      本文标题:Protopie教程(一)先导篇

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