Framer. js makes the product prototype more realistic

Framer. js makes the product prototype more realistic

 

If you overwrite the Framer framework code exported by Framer Studio to your own Framer framework, You can implement it. After all, Framer is an open-source framework and can be used as any Hack. if you do not know, you can connect to the code I modified before checking:

After you try it, you will find that the file framer. generated. js plays a role.

For deviceType, you can pass in the following variables:

Window. Framer. Defaults. DeviceView = {"deviceScale":-1, "orientation": 0, "contentScale": 1, "deviceType": g_device | "iphone-5s-silver "};

The following describes how high fidelity the 24PI prototype generated by Framer. js is.

Framer. js supports CoffeeScript and javascript. Don't think it is inefficient to write code. In fact, if you are proficient in js, the interaction prototype above can be completed in less than 10 minutes.

This prototype requires three background images.

LayerIndex = new Layer ({width: 650, height: 1100, image :". /images/24piIndex.png "}) layerInnerA = new Layer ({width: 650, height: 1100, image :". /images/24piInnerA.png "}) layerInnerB = new Layer ({width: 650, height: 1100, image :". /images/24piInnerB.png "})

To start highlighting the first background image, the next two images are directly toBack.

LayerInnerA. sendToBack () layerInnerB. sendToBack ()

At the beginning, you need to click the sphere in the middle to enter the second-level page. Therefore, you need to add a mask to the sphere.

LayerTouch = new Layer ({x: 0, y: 0, width: 300, height: 300, opacity: 0}) layerTouch. center ()

Here, opacity is set to 0 to hide it on the sphere.

LayerTouch. on Events. Click,-> layerIndex. animate properties: opacity: 0 layerInnerA. animate properties: opacity: 1 curve: "liner" layerTurnA. bringToFront () layerTurnB. bringToFront ()

This section is the code that triggers the mask layer. When you click it, the homepage is hidden and the second-level interface is toFront.

A strategy is required for loop switching on the second-level interface. Check the buttons on the left side (the same applies to the right side ).

TurnA = truetime = 0.25layerTurnA.on Events. Click,-> if turnA is true #... turnA = false else #... turnA = true

In the above Code, it is a general switching framework, and the ellipsis part is the logic code.

The turnA variable is used to switch the second-level page cyclically.

It is more efficient than prototyping software such as Axure. of course, the last sentence should be: Do not use tools to use them, but use efficiency and Goal as the criteria for selecting tools.

To sum up, Framer. js is close to 100% in product prototype restoration.