Created
June 6, 2014 22:21
-
-
Save aadsm/1f7379f2595f1baeadff to your computer and use it in GitHub Desktop.
EmberJS animate-boxes
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
| p { | |
| font: 12px/16px Arial; | |
| margin: 10px 10px 15px; | |
| } | |
| button { | |
| font: bold 14px/14px Arial; | |
| margin-left: 10px; | |
| } | |
| #grid { | |
| margin: 10px; | |
| } | |
| .box-view { | |
| width: 20px; height: 20px; | |
| float: left; | |
| position: relative; | |
| margin: 8px; | |
| } | |
| .box { | |
| border-radius: 100px; | |
| width: 20px; height: 10px; | |
| padding: 5px 0; | |
| color: #fff; | |
| font: 10px/10px Arial; | |
| text-align: center; | |
| position: absolute; | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title></title> | |
| <link rel="stylesheet" href="index.css" /> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://underscorejs.org/underscore-min.js"></script> | |
| <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.5.1/ember.prod.js"></script> | |
| </head> | |
| <body> | |
| <button onclick="runEmber()">Animate with Ember</button> | |
| <div id="grid"></div> | |
| <script type="text/x-handlebars" id="handlebars-template" data-template-name="box"> | |
| <div class="box" {{bindAttr id="model.number" style="model.style"}}> | |
| {{ model.content }} | |
| </div> | |
| </script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
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
| // Change N to change the number of drawn circles. | |
| var N = 300; | |
| App = Ember.Application.create(); | |
| // The Ember implementation: | |
| (function(){ | |
| var Box = Ember.Object.extend({ | |
| top: 0, | |
| left: 0, | |
| content: 0, | |
| count: 0, | |
| tick: function() { | |
| var count = this.get('count') + 1; | |
| this.set('count', count); | |
| this.set('top', Math.sin(count / 10) * 10); | |
| this.set('left', Math.cos(count / 10) * 10); | |
| this.set('color', count % 255); | |
| this.set('content', count % 100); | |
| }, | |
| style: function() { | |
| return 'top: ' + this.get('top') + 'px; left: ' + this.get('left') +'px; background: rgb(0,0,' + this.get('color') + ');'; | |
| }.property('top', 'left', 'color') | |
| }); | |
| var BoxController = Ember.ObjectController.extend({ | |
| }); | |
| var BoxView = Ember.View.extend({ | |
| classNames: ['box-view'], | |
| templateName: 'box' | |
| }); | |
| var boxes; | |
| var emberInit = function() { | |
| boxes = _.map(_.range(N), function(i) { | |
| var box = Box.create(); | |
| var controller = BoxController.create({content: box}); | |
| var view = BoxView.create({controller: controller}); | |
| view.appendTo('#grid'); | |
| box.set('number', i); | |
| return box; | |
| }); | |
| }; | |
| var emberAnimate = function() { | |
| for (var i = 0, l = boxes.length; i < l; i++) { | |
| boxes[i].tick(); | |
| } | |
| window.timeout = _.defer(emberAnimate); | |
| }; | |
| window.runEmber = function() { | |
| emberInit(); | |
| emberAnimate(); | |
| }; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment