From a50b4ea7b9ecc4c95a38b58f12a71b93ff3a3131 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Tue, 22 Sep 2015 11:57:08 -0700 Subject: [PATCH] Initial web implementation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: @​public This diff does a couple of things: - Move all the code in a src/ folder - Move bezier.js in the Animated folder - Rename Animated.js into AnimatedImplementation.js and adds two entry points: AnimatedReactNative.js and AnimatedWeb.js - Implement very dumb polyfills for flattenStyle, Set and InteractionManager - Import my work in progress demo.html file to make sure that the code is actually working. Everything is not working correctly: - It calls forceUpdate on every frame and doesn't use bindings because setNativeProps is not implemented - None of the style: {transform} are working because React web doesn't know about the array notation for transform - The demo need more work Reviewed By: @sahrens Differential Revision: D2464277 --- Libraries/Animated/examples/demo.html | 712 ++++++++++++++++++ Libraries/Animated/examples/style.css | 81 ++ Libraries/Animated/package.json | 13 - Libraries/Animated/release/gulpfile.js | 160 ++++ Libraries/Animated/release/package.json | 34 + Libraries/Animated/src/Animated.js | 24 + .../AnimatedImplementation.js} | 18 +- Libraries/Animated/src/AnimatedWeb.js | 20 + Libraries/Animated/{ => src}/Easing.js | 0 Libraries/Animated/{ => src}/Interpolation.js | 0 Libraries/Animated/{ => src}/SpringConfig.js | 0 .../{ => src}/__tests__/Animated-test.js | 0 .../{ => src}/__tests__/Easing-test.js | 0 .../{ => src}/__tests__/Interpolation-test.js | 0 .../{Animation => Animated/src}/bezier.js | 0 .../src/polyfills/InteractionManager.js | 15 + Libraries/Animated/src/polyfills/Set.js | 26 + .../Animated/src/polyfills/flattenStyle.js | 12 + 18 files changed, 1085 insertions(+), 30 deletions(-) create mode 100644 Libraries/Animated/examples/demo.html create mode 100644 Libraries/Animated/examples/style.css delete mode 100644 Libraries/Animated/package.json create mode 100644 Libraries/Animated/release/gulpfile.js create mode 100644 Libraries/Animated/release/package.json create mode 100644 Libraries/Animated/src/Animated.js rename Libraries/Animated/{Animated.js => src/AnimatedImplementation.js} (99%) create mode 100644 Libraries/Animated/src/AnimatedWeb.js rename Libraries/Animated/{ => src}/Easing.js (100%) rename Libraries/Animated/{ => src}/Interpolation.js (100%) rename Libraries/Animated/{ => src}/SpringConfig.js (100%) rename Libraries/Animated/{ => src}/__tests__/Animated-test.js (100%) rename Libraries/Animated/{ => src}/__tests__/Easing-test.js (100%) rename Libraries/Animated/{ => src}/__tests__/Interpolation-test.js (100%) rename Libraries/{Animation => Animated/src}/bezier.js (100%) create mode 100644 Libraries/Animated/src/polyfills/InteractionManager.js create mode 100644 Libraries/Animated/src/polyfills/Set.js create mode 100644 Libraries/Animated/src/polyfills/flattenStyle.js diff --git a/Libraries/Animated/examples/demo.html b/Libraries/Animated/examples/demo.html new file mode 100644 index 00000000000000..bc4c85e1f46219 --- /dev/null +++ b/Libraries/Animated/examples/demo.html @@ -0,0 +1,712 @@ + + + + + + Animated + + + + + + + + + + + +
+ +

Animated

+

Animations have for a long time been a weak point of the React ecosystem. The Animated library aims at solving this problem. It embraces the declarative aspect of React and obtains performance by using raw DOM manipulation behind the scenes instead of the usual diff.

+ +

Animated.Value

+ +

The basic building block of this library is Animated.Value. This is a variable that's going to drive the animation. You use it like a normal value in style attribute. Only animated components such as Animated.div will understand it.

+ + + +

setValue

+ +

As you can see, the value is being used inside of render() as you would expect. However, you don't call setState() in order to update the value. Instead, you can call setValue() directly on the value itself. We are using a form of data binding.

+ +

The Animated.div component when rendered tracks which animated values it received. This way, whenever that value changes, we don't need to re-render the entire component, we can directly update the specific style attribute that changed.

+ + + +

Animated.timing

+ +

Now that we understand how the system works, let's play with some animations! The hello world of animations is to move the element somewhere else. To do that, we're going to animate the value from the current value 0 to the value 400.

+ +

On every frame (via requestAnimationFrame), the timing animation is going to figure out the new value based on the current time, update the animated value which in turn is going to update the corresponding DOM node.

+ + + +

Interrupt Animations

+ +

As a developer, the mental model is that most animations are fire and forget. When the user presses the button, you want it to shrink to 80% and when she releases, you want it to go back to 100%.

+ +

There are multiple challenges to implement this correctly. You need to stop the current animation, grab the current value and restart an animation from there. As this is pretty tedious to do manually, Animated will do that automatically for you.

+ + + +

Animated.spring

+ +

Unfortunately, the timing animation doesn't feel good. The main reason is that no matter how far you are in the animation, it will trigger a new one with always the same duration.

+ +

The commonly used solution for this problem is to use the equation of a real-world spring. Imagine that you attach a spring to the target value, stretch it to the current value and let it go. The spring movement is going to be the same as the update.

+ +

It turns out that this model is useful in a very wide range of animations. I highly recommend you to always start with a spring animation instead of a timing animation. It will make your interface feels much better.

+ + + +

interpolate

+ +

It is very common to animate multiple attributes during the same animation. The usual way to implement it is to start a separate animation for each of the attribute. The downside is that you now have to manage a different state per attribute which is not ideal.

+ +

With Animated, you can use a single state variable and render it in multiple attributes. When the value is updated, all the places will reflect the change.

+ +

In the following example, we're going to model the animation with a variable where 1 means fully visible and 0 means fully hidden. We can pass it directly to the scale attribute as the ranges match. But for the rotation, we need to convert [0 ; 1] range to [260deg ; 0deg]. This is where interpolate() comes handy.

+ + + +

stopAnimation

+ +

The reason why we can get away with not calling render() and instead modify the DOM directly on updates is because the animated values are opaque. In render, you cannot know the current value, which prevents you from being able to modify the structure of the DOM.

+ +

Animated can offload the animation to a different thread (CoreAnimation, CSS transitions, main thread...) and we don't have a good way to know the real value. If you try to query the value then modify it, you are going to be out of sync and the result will look terrible.

+ +

There's however one exception: when you want to stop the current animation. You need to know where it stopped in order to continue from there. We cannot know the value synchronously so we give it via a callback in stopAnimation. It will not suffer from beign out of sync since the animation is no longer running.

+ + + + +

Gesture-based Animations

+ +

Most animations libraries only deal with time-based animations. But, as we move to mobile, a lot of animations are also gesture driven. Even more problematic, they often switch between both modes: once the gesture is over, you start a time-based animation using the same interpolations.

+ +

Animated has been designed with this use case in mind. The key aspect is that there are three distinct and separate concepts: inputs, value, output. The same value can be updated either from a time-based animation or a gesture-based one. Because we use this intermediate representation for the animation, we can keep the same rendering as output.

+ +

HorizontalPan

+ +

The code needed to drag elements around is very messy with the DOM APIs. On mousedown, you need to register a mousemove listener on window otherwise you may drop touches if you move too fast. removeEventListener takes the same arguments as addEventListener instead of an id like clearTimeout. It's also really easy to forget to remove a listener and have a leak. And finally, you need to store the current position and value at the beginning and update only compared to it.

+ +

We introduce a little helper called HorizontalPan which handles all this annoying code for us. It takes an Animated.Value as first argument and returns the event handlers required for it to work. We just have to bind this value to the left attribute and we're good to go.

+ + + +

Animated.decay

+ +

One of the big breakthrough of the iPhone is the fact that when you release the finger while scrolling, it will not abruptly stop but instead keep going for some time.

+ +

In order to implement this effect, we are using a second real-world simulation: an object moving on an icy surface. All it needs is two values: the current velocity and a deceleration coefficient. It is implemented by Animated.decay.

+ + + +

Animation Chaining

+ +

The target for an animation is usually a number but sometimes it is convenient to use another value as a target. This way, the first value will track the second. Using a spring animation, we can get a nice trailing effect.

+ + + +

addListener

+ +

As I said earlier, if you track a spring

+ + + + +

Animated.sequence

+ +

It is very common to animate

+ + + + + + + + + + + + + +
+ + diff --git a/Libraries/Animated/examples/style.css b/Libraries/Animated/examples/style.css new file mode 100644 index 00000000000000..bef24f990c6ed5 --- /dev/null +++ b/Libraries/Animated/examples/style.css @@ -0,0 +1,81 @@ +html, h1, h2 { + font-family: 'Roboto', sans-serif; + font-weight: 300; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.circle { + margin: 2px; + width: 50px; + height: 50px; + position: absolute; + display: inline-block; + box-shadow: 0px 1px 2px #999; + text-shadow: 0px 1px 2px #999; + background-image: url(pic1.jpg); + background-size: cover; + line-height: 80px; + vertical-align: bottom; + text-align: center; + color: white; + font-size: 10px; +} + +.circle:nth-child(2) { + background-image: url(pic2.jpg); +} + +.circle:nth-child(3) { + background-image: url(pic3.jpg); +} + +div.code { + box-shadow: 0px 1px 2px #999; + width: 600px; + padding: 5px; + position: relative; + margin: 0 auto; + margin-bottom: 40px; +} + +div.code .reset { + float: right; +} + +div.code pre { + padding: 2px; +} + +hr { + border: none; + border-bottom: 1px solid #D9D9D9; + margin: 0; +} + +button { + vertical-align: top; +} + +.example > span { + color: #333; + font-size: 13px; +} + +.example { + position: relative; + height: 60px; +} + +.code pre { + margin: 0; + font-size: 11px; + line-height: 1; +} + +.highlight { + background: rgb(228, 254, 253); +} diff --git a/Libraries/Animated/package.json b/Libraries/Animated/package.json deleted file mode 100644 index 35cc7ccac9e2a0..00000000000000 --- a/Libraries/Animated/package.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "name": "react-animated", - "description": "Animated provides powerful mechanisms for animating your React views", - "version": "0.1.0", - "keywords": [ - "react", - "animated", - "animation" - ], - "license": "BSD-3-Clause", - "main": "Animated.js", - "readmeFilename": "README.md" -} diff --git a/Libraries/Animated/release/gulpfile.js b/Libraries/Animated/release/gulpfile.js new file mode 100644 index 00000000000000..058ee299125d1c --- /dev/null +++ b/Libraries/Animated/release/gulpfile.js @@ -0,0 +1,160 @@ +/** + * Copyright 2013-2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +var babel = require('gulp-babel'); +var babelPluginDEV = require('fbjs-scripts/babel/dev-expression'); +var babelPluginModules = require('fbjs-scripts/babel/rewrite-modules'); +var del = require('del'); +var derequire = require('gulp-derequire'); +var flatten = require('gulp-flatten'); +var gulp = require('gulp'); +var gulpUtil = require('gulp-util'); +var header = require('gulp-header'); +var objectAssign = require('object-assign'); +var runSequence = require('run-sequence'); +var webpackStream = require('webpack-stream'); + +var DEVELOPMENT_HEADER = [ + '/**', + ' * Animated v<%= version %>', + ' */' +].join('\n') + '\n'; +var PRODUCTION_HEADER = [ + '/**', + ' * Animated v<%= version %>', + ' *', + ' * Copyright 2013-2015, Facebook, Inc.', + ' * All rights reserved.', + ' *', + ' * This source code is licensed under the BSD-style license found in the', + ' * LICENSE file in the root directory of this source tree. An additional grant', + ' * of patent rights can be found in the PATENTS file in the same directory.', + ' *', + ' */' +].join('\n') + '\n'; + +var babelOpts = { + nonStandard: true, + loose: [ + 'es6.classes' + ], + stage: 1, + plugins: [babelPluginDEV, babelPluginModules], + _moduleMap: objectAssign({}, require('fbjs/module-map'), { + 'React': 'react', + }) +}; + +var buildDist = function(opts) { + var webpackOpts = { + debug: opts.debug, + externals: { + 'react': 'React', + }, + module: { + loaders: [ + {test: /\.js$/, loader: 'babel'} + ], + }, + output: { + filename: opts.output, + library: 'Animated' + }, + plugins: [ + new webpackStream.webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify( + opts.debug ? 'development' : 'production' + ), + }), + new webpackStream.webpack.optimize.OccurenceOrderPlugin(), + new webpackStream.webpack.optimize.DedupePlugin() + ] + }; + if (!opts.debug) { + webpackOpts.plugins.push( + new webpackStream.webpack.optimize.UglifyJsPlugin({ + compress: { + hoist_vars: true, + screw_ie8: true, + warnings: false + } + }) + ); + } + return webpackStream(webpackOpts, null, function(err, stats) { + if (err) { + throw new gulpUtil.PluginError('webpack', err); + } + if (stats.compilation.errors.length) { + throw new gulpUtil.PluginError('webpack', stats.toString()); + } + }); +}; + +var paths = { + dist: 'dist', + entry: 'lib/AnimatedWeb.js', + lib: 'lib', + src: [ + '*src/**/*.js', + '!src/**/__tests__/**/*.js', + '!src/**/__mocks__/**/*.js' + ], +}; + +gulp.task('clean', function(cb) { + del([paths.dist, paths.lib], cb); +}); + +gulp.task('modules', function() { + return gulp + .src(paths.src, {cwd: '../'}) + .pipe(babel(babelOpts)) + .pipe(flatten()) + .pipe(gulp.dest(paths.lib)); +}); + +gulp.task('dist', ['modules'], function () { + var distOpts = { + debug: true, + output: 'animated.js' + }; + return gulp + .src(paths.entry) + .pipe(buildDist(distOpts)) + .pipe(derequire()) + .pipe(header(DEVELOPMENT_HEADER, { + version: process.env.npm_package_version + })) + .pipe(gulp.dest(paths.dist)); +}); + +gulp.task('dist:min', ['modules'], function () { + var distOpts = { + debug: false, + output: 'animated.min.js' + }; + return gulp + .src(paths.entry) + .pipe(buildDist(distOpts)) + .pipe(header(PRODUCTION_HEADER, { + version: process.env.npm_package_version + })) + .pipe(gulp.dest(paths.dist)); +}); + +gulp.task('watch', function() { + gulp.watch(paths.src, ['modules']); +}); + +gulp.task('default', function(cb) { + runSequence('clean', 'modules', ['dist', 'dist:min'], cb); +}); diff --git a/Libraries/Animated/release/package.json b/Libraries/Animated/release/package.json new file mode 100644 index 00000000000000..33654f7eae10e2 --- /dev/null +++ b/Libraries/Animated/release/package.json @@ -0,0 +1,34 @@ +{ + "name": "react-animated", + "description": "Animated provides powerful mechanisms for animating your React views", + "version": "0.1.0", + "keywords": [ + "react", + "animated", + "animation" + ], + "license": "BSD-3-Clause", + "main": "Animated.js", + "dependencies": { + "fbjs": "^0.2.1" + }, + "scripts": { + "build": "gulp" + }, + "devDependencies": { + "babel-core": "^5.8.25", + "babel-loader": "^5.3.2", + "del": "^1.2.0", + "fbjs-scripts": "^0.2.0", + "gulp": "^3.9.0", + "gulp-babel": "^5.1.0", + "gulp-derequire": "^2.1.0", + "gulp-flatten": "^0.1.0", + "gulp-header": "^1.2.2", + "gulp-util": "^3.0.6", + "object-assign": "^3.0.0", + "run-sequence": "^1.1.2", + "webpack": "1.11.0", + "webpack-stream": "^2.1.0" + } +} diff --git a/Libraries/Animated/src/Animated.js b/Libraries/Animated/src/Animated.js new file mode 100644 index 00000000000000..bce17d3272ae6e --- /dev/null +++ b/Libraries/Animated/src/Animated.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule Animated + * @flow + */ +'use strict'; + +var AnimatedImplementation = require('AnimatedImplementation'); +var Image = require('Image'); +var Text = require('Text'); +var View = require('View'); + +module.exports = { + ...AnimatedImplementation, + View: AnimatedImplementation.createAnimatedComponent(View), + Text: AnimatedImplementation.createAnimatedComponent(Text), + Image: AnimatedImplementation.createAnimatedComponent(Image), +}; diff --git a/Libraries/Animated/Animated.js b/Libraries/Animated/src/AnimatedImplementation.js similarity index 99% rename from Libraries/Animated/Animated.js rename to Libraries/Animated/src/AnimatedImplementation.js index b4d814eff6421e..94e5fd918b9ef9 100644 --- a/Libraries/Animated/Animated.js +++ b/Libraries/Animated/src/AnimatedImplementation.js @@ -6,20 +6,17 @@ * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. * - * @providesModule Animated + * @providesModule AnimatedImplementation * @flow */ 'use strict'; var Easing = require('Easing'); -var Image = require('Image'); var InteractionManager = require('InteractionManager'); var Interpolation = require('Interpolation'); var React = require('React'); var Set = require('Set'); var SpringConfig = require('SpringConfig'); -var Text = require('Text'); -var View = require('View'); var invariant = require('invariant'); var flattenStyle = require('flattenStyle'); @@ -1477,19 +1474,6 @@ module.exports = { */ ValueXY: AnimatedValueXY, - /** - * An animatable View component. - */ - View: createAnimatedComponent(View), - /** - * An animatable Text component. - */ - Text: createAnimatedComponent(Text), - /** - * An animatable Image component. - */ - Image: createAnimatedComponent(Image), - /** * Animates a value from an initial velocity to zero based on a decay * coefficient. diff --git a/Libraries/Animated/src/AnimatedWeb.js b/Libraries/Animated/src/AnimatedWeb.js new file mode 100644 index 00000000000000..5de3f151b90c47 --- /dev/null +++ b/Libraries/Animated/src/AnimatedWeb.js @@ -0,0 +1,20 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @flow + */ +'use strict'; + +var AnimatedImplementation = require('AnimatedImplementation'); + +module.exports = { + ...AnimatedImplementation, + div: AnimatedImplementation.createAnimatedComponent('div'), + span: AnimatedImplementation.createAnimatedComponent('span'), + img: AnimatedImplementation.createAnimatedComponent('img'), +}; diff --git a/Libraries/Animated/Easing.js b/Libraries/Animated/src/Easing.js similarity index 100% rename from Libraries/Animated/Easing.js rename to Libraries/Animated/src/Easing.js diff --git a/Libraries/Animated/Interpolation.js b/Libraries/Animated/src/Interpolation.js similarity index 100% rename from Libraries/Animated/Interpolation.js rename to Libraries/Animated/src/Interpolation.js diff --git a/Libraries/Animated/SpringConfig.js b/Libraries/Animated/src/SpringConfig.js similarity index 100% rename from Libraries/Animated/SpringConfig.js rename to Libraries/Animated/src/SpringConfig.js diff --git a/Libraries/Animated/__tests__/Animated-test.js b/Libraries/Animated/src/__tests__/Animated-test.js similarity index 100% rename from Libraries/Animated/__tests__/Animated-test.js rename to Libraries/Animated/src/__tests__/Animated-test.js diff --git a/Libraries/Animated/__tests__/Easing-test.js b/Libraries/Animated/src/__tests__/Easing-test.js similarity index 100% rename from Libraries/Animated/__tests__/Easing-test.js rename to Libraries/Animated/src/__tests__/Easing-test.js diff --git a/Libraries/Animated/__tests__/Interpolation-test.js b/Libraries/Animated/src/__tests__/Interpolation-test.js similarity index 100% rename from Libraries/Animated/__tests__/Interpolation-test.js rename to Libraries/Animated/src/__tests__/Interpolation-test.js diff --git a/Libraries/Animation/bezier.js b/Libraries/Animated/src/bezier.js similarity index 100% rename from Libraries/Animation/bezier.js rename to Libraries/Animated/src/bezier.js diff --git a/Libraries/Animated/src/polyfills/InteractionManager.js b/Libraries/Animated/src/polyfills/InteractionManager.js new file mode 100644 index 00000000000000..db45ede6426fd0 --- /dev/null +++ b/Libraries/Animated/src/polyfills/InteractionManager.js @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +module.exports = { + createInteractionHandle: function() {}, + clearInteractionHandle: function() {} +}; diff --git a/Libraries/Animated/src/polyfills/Set.js b/Libraries/Animated/src/polyfills/Set.js new file mode 100644 index 00000000000000..988f0b3f13ff21 --- /dev/null +++ b/Libraries/Animated/src/polyfills/Set.js @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +'use strict'; + +function SetPolyfill() { + this._cache = []; +} + +SetPolyfill.prototype.add = function(e) { + if (this._cache.indexOf(e) === -1) { + this._cache.push(e); + } +}; + +SetPolyfill.prototype.forEach = function(cb) { + this._cache.forEach(cb); +}; + +module.exports = SetPolyfill; diff --git a/Libraries/Animated/src/polyfills/flattenStyle.js b/Libraries/Animated/src/polyfills/flattenStyle.js new file mode 100644 index 00000000000000..42a68020c6539c --- /dev/null +++ b/Libraries/Animated/src/polyfills/flattenStyle.js @@ -0,0 +1,12 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; +module.exports = function(style) { + return style; +};