SamsaraJS实现动画布局的一个Reactive功能库
来自： https://github.com/dmvaldman/samsara
SamsaraJS实现动画布局的一个Reactive功能库。它提供了一种语言实现DOM元素随着时间的推移进行定位，定向和改变尺寸的动画。 Everything in SamsaraJS — from the user input to the rendering pipeline — is a stream. Building a user interface becomes the art of composing streams.
SamsaraJS was created to solve performance on the mobile web. Under the hood, animations are hardware accelerated and batched by a single request animation frame loop. Building responsive user interfaces is made possible with physics-based transitions, rich support for gestures, and a stream architecture that makes coordinating complex animations simple.
SamsaraJS doesn't have any opinions about content, only presentation. It moves rectangles around the screen — what you do inside those rectangles is up to you. It doesn’t include any support for routing, server syncing, templating or data-binding; there are plenty of other great frameworks for that. If we don’t play nicely with your tools, let us know and we will do our best to improve. Integrations with MVC frameworks like Backbone and React are on the roadmap.
tl;drIf you've ever wanted the opacity of a nav bar to respond to the displacement of a hamburger menu which responds to a user's swipe gesture, then you might want to clone this repo.
Getting Started
| Resources | |
|---|---|
| Guide | samsaraJS.org/docs |
| API docs | samsaraJS.org/reference_docs |
| Questions | SamsaraJS Google Group |
Examples
| Example | Demo (fullscreen) | Description |
|---|---|---|
| Logo | demo • docs | The SamsaraJS logo |
| Cube | demo • docs | 3D spinning cube with animated size |
| ParallaxCats | demo • docs | Scrollview of cat images that parallax with the scroll |
| Carousel | demo • docs | A paginated scrollview converted into a slideshow with previous/next buttons |
| SideMenu | demo • docs | A navigation UI with an exposed side drawer |
| Safari Tabs | demo • docs | A scrollview imitating the mobile Safari tab viewer |
Installation
SamsaraJS requires a small CSS file located at dist/samsara.css or samsara/samsara.css . For all of the installation methods below, you will also need to include this CSS file for SamsaraJS to work properly.
Git
Clone this repo
git clone git@github.com:dmvaldman/samsara.git
You'll find AMD modules in the samsara directory, CommonJS bundles in the dist directory, examples in the examples directory and reference documentation in the docs directory.
NPM
Install the CommonJS build of Samsara with
npm install samsarajs
This will provide a bundled Samsara object. Note there is a case-difference: path keys are capitalized for CommonJS but lowercase for AMD.
var Surface = require('samsara/dom/Surface'); // AMD var Surface = require('samsarajs').DOM.Surface; // CommonJS The samsara.css file will also be included in node_modules/samsarajs/dist/samsara.css .
Window Object
Copy dist/samsara.js and include it as a source file. Samsara will then be accessible through window.Samsara . This is particularly useful for sharing on sites like jsFiddle, CodePen, etc.
Talks
JSConf EU 2015 Berlin, Germany
Roadmap
- Node removal and recycling (surface.remove(), node.remove(), view.remove())
- More Tests
- Backbone.js, React.js, Vue.js integrations
- Improved Scrollview
- 3D Camera
- Migrate to es6
- More layouts