Last active
August 29, 2015 14:02
-
-
Save rsperberg/3f5f9bdfa3c98af0bb7d to your computer and use it in GitHub Desktop.
Spinning famo.us logo flickering atop a background
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
define(function(require, exports, module) { | |
'use strict'; | |
// import dependencies | |
var Engine = require('famous/core/Engine'); | |
var Modifier = require('famous/core/Modifier'); | |
var Transform = require('famous/core/Transform'); | |
var Surface = require('famous/core/Surface'); | |
var ImageSurface = require('famous/surfaces/ImageSurface'); | |
var View = require('famous/core/View'); | |
var StateModifier = require('famous/modifiers/StateModifier'); | |
var RenderController = require('famous/views/RenderController'); | |
// create the main context | |
var mainContext = Engine.createContext(); | |
var logo = new ImageSurface({ | |
size: [200, 200], | |
content: 'http://learnfamo.us/assets/images/famous_logo.png', | |
classes: ['backfaceVisibility'] | |
}); | |
var initialTime = Date.now(); | |
var centerSpinModifier = new Modifier({ | |
origin: [0.5, 0.5], | |
transform : function() { | |
return Transform.rotateY(.002 * (Date.now() - initialTime)); | |
} | |
}); | |
// creates an iPhone 5-type frame | |
var viewSize = [320, 568]; | |
var view = new View(); | |
var centerTopModifier = new StateModifier({ | |
origin: [0.5, 0.5] | |
}); | |
mainContext.add(centerTopModifier).add(view); | |
var sizeModifier = new StateModifier({ | |
size: viewSize | |
}); | |
// creating a reference node in the view | |
var sizeNode = view.add(sizeModifier); | |
var background = new Surface({ | |
properties: { | |
fontSize: '1.5em', | |
lineHeight: '50px', | |
textAlign: 'center', | |
borderWidth: '3px', | |
borderStyle: 'solid', | |
backgroundColor: '#f9fffe', | |
borderColor: '#fa5caf' | |
} | |
}); | |
var backModifier = new StateModifier({ | |
// positions the background behind the logo surface | |
transform: Transform.translate.behind | |
}); | |
sizeNode.add(backModifier).add(background); | |
// add modifier and logo to a view, which RenderController can work with | |
var logoView = new View(); | |
logoView.add(centerSpinModifier).add(logo); | |
var renderController = new RenderController(); | |
renderController.show(logoView, {duration: 0, curve: 'linear'}); | |
mainContext.add(renderController); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment