第一个作品

学习一门编程语言避免不了写 hello world ,两个页面间跳转就是学习 Principle 的"hello world"。

创建 prd 工程

打开 Principle 默认就已经创建了一个工程,名称为“Untitled.prd”。

创建画板

创建工程时,默认创建了一个空白画板(Artboard),这就相当于我们的手机屏幕。我们可以在这个可见的屏幕内摆放任何部件。

这次我们想要实现的是两个页面间的切换,为了区分两个页面,可以设置两个不同的背景颜色。单击画板,在左侧属性区找到纯色填充,点击后任意选择一个颜色。

接着我们需要新建第二个页面,点击左上方新建一个画板,或直接用键盘快捷键A,或右键单击第一个画板选择"Duplicate"创建与画板1一模一样的新画板。然后任意更换画板2的背景颜色。

页面跳转

现在两个页面都有了,我们需要想办法做跳转动作。点击画板1,发现右侧中间多出一个「闪电」标志,点击后会弹出菜单。我们本次先制作最基本的点击跳转,所以点击并按住第一个选项“Tap”前面的空心圆,这时会从圆圈伸出一个箭头,继续拖动箭头到画板2上。

这时会发现,两个画板的顶部有一个箭头,从画板1指向画板2,名称是“Artboard 1 Tap”,即「点击画板1」。点击箭头变绿,下方会弹出动画面板 ,可以看到动画持续时间和开始结束时间。

这时如果点击右侧的预览窗,可以看到已经可以实现页面的跳转,并且有颜色的渐变效果。下面我们点击画板2右侧的闪电按钮,按照上述步骤创建一个从画板2到画板1的动画点击事件,这样一来,通过点击就可以在两个页面之间循环跳转了。

到此为止,我们完成了第一个作品。