Basics Creating Prototypes for iOS and Android With Framer

View: 433    Dowload: 0   Comment: 0   Post by: hanhga   Category: iPhone OS   Fields: Other

0 point/3 review File has been tested

In this two-part series, you are going to learn the basics of Framer, an open source Javascript framework that lets you programmatically create interactive and realistic prototypes with beautiful animations for iOS and Android apps.

To follow this tutorial, you will need:

  • the latest build of the Framer framework
  • Google Chrome or any other WebKit-based browser
  • Python 2.7 or higher
  • a text editor
  • a basic understanding of HTML, CSS, and Javascript

Because a Framer prototype is nothing but an ordinary web page written in HTML, CSS, and Javascript, let’s start by creating a blank HTML page. I am going to call this page index.html.

<!doctype html>

To make use of Framer’s API on this page, you should add a script tag that points to the framer.js file you downloaded.

<script src="framer.js"></script>

As Framer makes use of protocol-relative URLs to load various resources, you can’t simply double-click the file you created to open it in a browser. Doing so will lead to network errors. Instead, you should access it through an HTTP server.

To quickly create an HTTP server that is capable of serving your web page, you can use Python’s SimpleHTTPServer module.

Open a terminal, navigate to the directory that contains the web page you created, and execute the following command.

python -m SimpleHTTPServer 8000

This will start a server that runs on port 8000 by default. You can now open Google Chrome and view your web page by visiting http://localhost:8000/.

To make your prototype feel realistic on a desktop browser, you should display all its elements inside the frame of a mobile device. Framer lets you draw a variety of popular mobile devices, such iPhones, Nexus phones and tablets, iPads, Apple Watches, and more. For this tutorial, I will be using a pink iPhone 5c.

To draw a device, you should first create an instance of the DeviceComponent class and call its setupContext method. You can then change its deviceType to the device of your choosing. Add another script tag to the HTML page you created earlier and add the following code to it:

var device = new Framer.DeviceComponent();
device.deviceType = "iphone-5c-pink";

This completes the initial setup. The result should looks like this:

iPhone with hand

Almost every element in your Framer prototype will be an instance of the Layerclass. A Layer is very similar to an HTML div element and can be used to draw rectangles, images, and text.

To create a Layer you have to call its constructor and pass it a JSON object that defines various properties of the Layer. While creating a Layer, you usually specify its dimensions (width and height) and position (x and y). You can also use the centerX and centerY methods to center it horizontally and vertically. Here’s an example of how to create a Layer.

// Draw a white square
var whiteSquare = new Layer(
      backgroundColor: "#FFFFFF",
      width: 400,
      height: 400,
      y: 20
// Center horizontally

To display an image, you have to create a Layer whose image property points to the image file you want to display.

// Draw an image
var pic = new Layer(
        image: "painting.jpg",
        width: 400,
        height: 400,
        y: 440

To display text (or HTML), you can use the html property. You can also add CSS styling to a Layer using its style property.

// 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"

With the three Layer objects we created in this step, the prototype would look like this:

Three layers

You can attach event handlers to a Layer using the on method. The on method is much like Javascript’s addEventListener method. It takes the name of an event as its first parameter and a function as its second parameter.

Here’s how you add a click handler to the text layer we created in the previous step:

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

You will see more event handlers later in this tutorial.

Framer stands out from its competition thanks to its advanced animation effects. With Framer, you can animate nearly every property of your Layer objects using theanimate method. The animate method takes as input a JSON object that specifies the properties that should be animated.

The JSON object can also include various configuration details of the animation, such as its duration and behavior.

As an example, let me show you how to create an animation that turns whiteSquareinto a circle by changing its borderRadius.

// Animate borderRadius
    properties: {
        borderRadius: whiteSquare.width/2
    time: 2, // duration is two seconds
    curve: "ease-in-out" // apply easing

Here’s another example that shows how to animate the shadow of whiteSquarewhen it is clicked.

// Animate Shadow
whiteSquare.on("click", function(){
    // Set the shadow color first
    whiteSquare.shadowColor = "#555555";
        "properties": {            
            shadowBlur: 40,
            shadowSpread: 10,

Note that only those properties whose values are numbers can be animated. AsshadowColor is not a number, it should be set before calling animate.

If you are using Framer, it is likely that you are trying to create a highly interactive prototype with lots of animations. Calling the animate method multiple times on aLayer can get tedious. Instead, you can associate a list of states with a Layer and just switch between the states when needed.

Every Layer has a states property that is an instance of the LayerStates class. To add new states to a Layer, you call the add method on the states property. In the following code snippet, we add two new states to the pic object.

// Add two states
    "myState1" : {
        borderRadius: 100
    "myState2": {
        borderRadius: 200

Adding a state doesn’t result in an immediate visual change. However, when aLayer switches from one state to another, you will be able to see the animation. To change the state of a Layer, you call the switch method on the states property of the Layer object. The following code snippet shows you how to change the state of pic when it is clicked.

// Change state when clicked
pic.on("click", function() {
    // Switch to myState2

To cycle through the states of a Layer, you can call the next method of its statesobject.;

To add a background color or image to your prototype, you create aBackgroundLayer object. A BackgroundLayer is a Layer whose dimensions are equal to the dimensions of the device’s screen. Here’s how you add a greyBackgroundLayer:

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

Because the Framer prototype is just an ordinary HTML page, you can also use CSS to style it. For example, if you aren’t happy with the white color surrounding the device, you can change it by applying a new style to the web page’s body tag.

<style type="text/css">
        background: #C5CAE9

With these changes, the prototype will look like this when the animations are finished:

Final state

To make a Layer draggable, all you have to do is set its draggable.enabledproperty to true.

// Allow dragging
pic.draggable.enabled = true;

If a Layer is draggable, you are able to add event listeners to it that respond to various dragging related events, such as dragend and dragmove. For example, here’s a dragend event handler that returns pic to its original position:

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


Basics Creating Prototypes for iOS and Android With Framer

Basics Creating Prototypes for iOS and Android With Framer Posted on 18-01-2016  In this two-part series, you are going to learn the basics of Framer, an open source Javascript framework 5/10 433


To comment you must be logged in members.

Files with category

File suggestion for you
File top downloads - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. Develope by Vinagon .Ltd