Category: iOS

Famou.us – Javascript Library for iOS Animations

Famo.us is a free, open source JavaScript framework for creating smooth, complex UIs for any screen.

Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.

Choosing a development platform is more than just a technical decision—it’s a career decision. Whether you’re a seasoned developer expanding your skills, a designer looking to bring your ideas to life, or just learning to code, we’re building Famo.us for you.

Getting started is easy. Famo.us University will teach you to code in Famo.us with lessons, live code examples, and real app projects. And the Famo.us community is always here when you need help.

source

Apple and Responsive Design

Apple has always had a funny relationship with responsive design. They’ve only sparingly used media queries to make minor visual tweaks on important pages, like their current homepage.

With iOS 6, and the subsequent release of the taller iPhone 5, Apple introduced something called Auto Layout—a relationship-based layout engine. Unlike the iPad, which required a separate build, apps for the taller iPhone were the same build with layout adjustments applied. Auto Layout was Apple’s first true foray into responsive design within native applications since, much like the web, different layout rules were applied to the same base code.

Last week, Apple introduced iOS 8, and with it, something they’re calling Adaptive UI. The main feature of Adaptive UI is the ability to specify layout rules based on Size Classes, which are really just breakpoints set by Apple.

Developers can now use a single View Controller (or page, in our world) with various layout rules applied across Size Classes (or breakpoints) to accommodate devices of all sizes. While there are only two Size Classes right now, compact and regular, Apple has left a lot of room to add more, or to even let developers set breakpoints themselves in the future.

It may be adaptive in name, and hard-coded breakpoints may seem like adaptive thinking, but the groundwork has been laid for responsive design within native iOS applications. It’s been interesting to watch Apple’s path from static, to adaptive, to responsive, and it’ll be even more interesting to watch third-party developers take advantage of the workflow benefits of responsive design that we’ve become accustomed to.

source

Turn Marvel Prototypes Into iOS And Android Apps In Less Than 10 Minutes Using Appcelerator

For Marvel Pro users only. Also run locally.

About two months ago we launched a feature for Pro users that allowed them to download their prototype as a zip file. The zip file contains the HTML, CSS and JS source files that Marvel uses to build your prototype.

This allows you to host, alter, mix up and play with your prototype on your local machine or server. It’s also really useful if you happen to be presenting and you’re not sure if you’ll land yourself in a situation that has a sketchy internet connection.

There is one other advantage to our downloadable prototype in that it’s fully compatible with HTML based app building platforms like Titanium, Phonegap, Cordova. The following tutorial video gives you an overview on how to run the integration with Titanium.

marvelapp-download-zip

source

The Future of Javascript Animation with Famo.us

After much anticipation, hype and controversy, Famo.us is finally being released today for limited public consumption. When I first saw the Famo.us webpage in late 2012, I was intrigued by what I thought was impossible to do on the web. Suspending disbelief for a moment, I began to wonder what code would look like if the animation magic I was seeing were suddenly possible to write in JavaScript.

Ultimately, developing in Famo.us is straightforward; however the concepts do differ from standard web development. In this primer I’m going to go over why Famo.us is different, the basics of writing Famo.us apps, and a list of resources to help you become a guru.

These days, web browsers apply hardware acceleration to certain CSS properties. When rendering a typical webpage, you can gain the benefits of this acceleration if you trigger CSS based animations. The browser still has to work hard to recompute the layout of your page from a change to the DOM. In practice this means that if your app is making changes to the DOM that require the browser to re-layout your page, you’ll lose hardware acceleration and generally see inconsistent and slow performance.

Famo.us is built around a neat idea: by directly using the CSS matrix3d transform in combination with the window.requestAnimationFrame function, you can describe the complete layout and animation of your app in a way that’s hardware accelerated with consistent performance.

Surfaces

The basic building blocks of a Famo.us application are Surfaces. Surfaces are simply divs that contain HTML. They make up your app at the most granular level and often do not contain sophisticated layout or content that you want to animate within the surface. A typical app is built out of many surfaces containing mostly text or images and targeted with basic visual CSS.

The Scene Graph contains your app’s surfaces along with Transforms. Transforms are used to position surfaces and thereby layout the UI of your app. They are also used to describe animation.

source