使用Framer为iOS和Android创建原型：基础

最新推荐文章于 2024-09-17 23:15:58 发布

cunjie3951

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量382

点赞数

文章标签： python java javascript js html ViewUI

介绍

如今，您无需使用Adobe Photoshop或Gimp之类的图像编辑软件即可为移动应用创建用户界面模型。符合Google的Material Design语言的应用通常仅由简单的几何形状，纯色，图标和文本组成。仅使用代码即可轻松创建此类应用程序的用户界面原型。

在这个由两部分组成的系列文章中，您将学习Framer的基础知识， Framer是一个开放源代码Javascript框架，可让您以编程方式创建互动和逼真的原型，并为iOS和Android应用提供漂亮的动画。

先决条件

要遵循本教程，您将需要：

Framer框架的最新版本
Google Chrome或任何其他基于WebKit的浏览器
Python 2.7或更高版本
文字编辑器
基本了解HTML，CSS和Javascript

1.初始设置

步骤1：建立HTML网页

因为Framer原型不过是用HTML，CSS和Javascript编写的普通网页，所以我们从创建空白HTML页面开始。我将这个页面称为index.html 。

<!doctype html>

要在此页面上使用Framer的API，您应该添加一个script标记，该标记指向您下载的framer.js文件。

步骤2：建立HTTP伺服器

由于Framer利用协议相对URL加载各种资源，因此您不能简单地双击创建的文件以在浏览器中打开它。这样做会导致网络错误。相反，您应该通过HTTP服务器访问它。

为了快速创建能够为您的网页提供服务的HTTP服务器，您可以使用Python的SimpleHTTPServer模块。

打开终端，导航到包含您创建的网页的目录，然后执行以下命令。

python -m SimpleHTTPServer 8000

这将启动默认情况下在端口8000上运行的服务器。现在，您可以通过访问http：// localhost：8000 /打开Google Chrome浏览器并查看您的网页。

步骤3：绘制装置

为了使您的原型在桌面浏览器上看起来逼真，您应该在移动设备的框架内显示其所有元素。利用Framer，您可以绘制各种流行的移动设备，例如iPhone，Nexus手机和平板电脑，iPad，Apple Watch等。对于本教程，我将使用粉红色的iPhone 5c。

要绘制设备，您首先应该创建DeviceComponent类的实例并调用其setupContext方法。然后，您可以将其deviceType更改为您选择的设备。将另一个script标签添加到您先前创建HTML页面中，并向其中添加以下代码：

var device = new Framer.DeviceComponent();

device.setupContext();
device.deviceType = "iphone-5c-pink";

刷新网页时，您应该在浏览器窗口中看到以下内容：

如果需要，还可以通过在deviceType字符串的末尾添加-hand来呈现握住设备的手。如果设备看起来太大或太小，可以使用setDeviceScale方法更改其大小。

// Display a hand with the device
device.deviceType = "iphone-5c-pink-hand";

// Change the size
device.setDeviceScale(0.3);

这样就完成了初始设置。结果应如下所示：

2.工程图框，文本和图像

Framer原型中的几乎每个元素都将是Layer类的实例。 Layer与HTML div元素非常相似，可用于绘制矩形，图像和文本。

要创建Layer您必须调用其构造函数并将其传递给JSON对象，该对象定义Layer各种属性。创建Layer ，通常需要指定其尺寸（ width和height ）和位置（ x和y ）。您还可以使用centerX和centerY方法将其水平和垂直居中。这是有关如何创建Layer的示例。

// Draw a white square

var whiteSquare = new Layer(
    {
      backgroundColor: "#FFFFFF",
      width: 400,
      height: 400,
      y: 20
    }
);

// Center horizontally
whiteSquare.centerX();

要显示图像，您必须创建一个Layer其image属性指向要显示的图像文件。

// Draw an image

var pic = new Layer(
    {
        image: "painting.jpg",
        width: 400,
        height: 400,
        y: 440
    }
);

pic.centerX();

要显示文本（或HTML），可以使用html属性。您还可以使用其style属性将CSS样式添加到Layer 。

// Write text

var text = new Layer(
    {
        width: Screen.width,
        height: 100,
        y: 860,
        html: "This is a prototype",
        style: {
            fontSize: "50px",
            textAlign: "center",
            color: "#f1f2f3",
            paddingTop: "18px"
        }
    }
);

有了我们在此步骤中创建的三个Layer对象，原型将如下所示：

3.添加事件

您可以使用on方法将事件处理程序附加到Layer 。 on方法非常类似于Javascript的addEventListener方法。它以事件的名称为第一个参数，以函数为第二个参数。

将click处理程序添加到上一步中创建的text层的方法如下：

text.on("click", function(){
    text.html = "I was clicked";
});

在本教程的后面，您将看到更多的事件处理程序。

4.添加动画

Framer凭借其先进的动画效果在竞争中脱颖而出。使用Framer，您可以使用animate方法来为Layer对象的几乎每个属性animate 。 animate方法将指定应设置动画的属性的JSON对象作为输入。

JSON对象还可以包含动画的各种配置详细信息，例如其持续时间和行为。

作为示例，让我向您展示如何创建动画， whiteSquare是通过更改其borderRadius将whiteSquare变成一个圆形。

// Animate borderRadius

whiteSquare.animate({
    properties: {
        borderRadius: whiteSquare.width/2
    },

    time: 2, // duration is two seconds
    curve: "ease-in-out" // apply easing
});

这是另一个示例，显示了如何在单击whiteSquare的阴影时为其设置动画。

// Animate Shadow

whiteSquare.on("click", function(){

	// Set the shadow color first
    whiteSquare.shadowColor = "#555555";

    whiteSquare.animate({
        "properties": {            
            shadowBlur: 40,
            shadowSpread: 10,
        }
    });
});

请注意，只有那些值为数字的属性才可以设置动画。由于shadowColor不是数字，因此应在调用animate之前进行animate 。

5.使用状态

如果您使用的是Framer，则可能正在尝试创建具有很多动画的高度交互的原型。在Layer上多次调用animate方法可能会很乏味。相反，您可以将状态列表与Layer相关联，并仅在需要时在状态之间切换。

每个Layer都有一个states属性，该属性是LayerStates类的实例。要将新状态添加到Layer ，请在states属性上调用add方法。在下面的代码片段中，我们向pic对象添加了两个新状态。

// Add two states

pic.states.add({
    "myState1" : {
        borderRadius: 100
    },

    "myState2": {
        borderRadius: 200
    }
});

添加状态不会立即导致视觉变化。但是，当Layer从一种状态切换到另一种状态时，您将能够看到动画。要更改Layer的states ，请在Layer对象的states属性上调用switch方法。以下代码段向您展示了单击pic时如何更改其状态。

// Change state when clicked

pic.on("click", function() {
    // Switch to myState2
    pic.states.switch("myState2");
});

要遍历Layer的状态，可以调用其states对象的next方法。

pic.states.next();

6.改变背景

要将背景颜色或图像添加到原型中，请创建BackgroundLayer对象。 BackgroundLayer是一个Layer其尺寸等于设备屏幕的尺寸。这是添加灰色BackgroundLayer ：

var bg = new BackgroundLayer({
    backgroundColor: "#BDBDBD"
});

因为Framer原型只是一个普通HTML页面，所以您也可以使用CSS对其进行样式设置。例如，如果您对设备周围的白色颜色感到不满意，则可以通过对网页的body标签应用新样式来更改它。

进行了这些更改之后，动画完成后，原型将如下所示：

7.处理拖动操作

要使Layer可拖动，您要做的就是将其draggable.enabled属性设置为true 。

// Allow dragging

pic.draggable.enabled = true;

如果Layer是可拖动的，则可以向其添加事件侦听器，以响应各种与拖动相关的事件，例如dragend和dragmove 。例如，这是一个dragend事件处理程序，可将pic返回其原始位置：

// Handle dragend

pic.on("dragend", function(){
    pic.animate({
        "properties": {
            x: Screen.width/2 - pic.width/2, // Place at Center
            y: 440 // Original Y
        }
    });
});