New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new Animated API to animation docs. #1899

Merged
merged 1 commit into from Jul 9, 2015

Conversation

Projects
None yet
6 participants
@sahrens
Contributor

sahrens commented Jul 7, 2015

We should wait to merge this until the new API is available.

Let me know if you have any feedback, either on the docs themselves or the actual API :)

value is extracted and used to set scale. When the component mounts, a spring
animation is started on `bounceValue` which will update all of it's dependent
mappings on each frame as the spring animates (in this case, just the scale).
This is done in an optimized why that is faster than calling setState and

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

"in an optimized way why" => "in an optimized way" or "in an optimized way, which is why"

re-rendering, and with future optimizations will be able to be done without
invoking JavaScript at all since the entire configuration is declarative and can
be serialized to native which can handle the animation on its own after it's
started.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

sentence is quite long, maybe break it up into two, and reword slightly:

... faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to provide further optimizations in the future by serializing the animation configuration and passing it to native and allowing the native side to handle the animation on its own, without calling back to JavaScript over the bridge.

The three animation types can be used to create almost any animation curve you
want because each can be customized:
* `spring`: Simple single-spring physics model that matches Origami.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Origami

  • probably not everyone is familiar with what this is

This comment has been minimized.

@cyprusglobe

cyprusglobe Jul 7, 2015

"why" => "way"

invoking JavaScript at all since the entire configuration is declarative and can
be serialized to native which can handle the animation on its own after it's
started.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Core API

(or something like that)

with `{finished: true}`, but if the animation is done because `stop` was called
on it before it could finish (e.g. because it was interrupted by a gesture or
another animation), then it will receive `{finished: false}`.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Co-ordinating multiple animations

(or something like that)

By default, if one animation is stopped or interrupted, then all other
animations in the group are also stopped. Parallel has a `stopTogether` option
that can be set to `false` to disable this.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Interpolating values

(or something like that)

outputRange: [300, 0, 1, 0, 0],
});
```

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Might be worth spacing out the interpolations to make them more readable:

value.interpolate({
  inputRange:   [-300, -100, 0, 100, 101],
  outputRange:  [ 300,    0, 1,   0,   0],
});

And it would be helpful to include a table with some values that demonstrate the interpolations:

Input Output
-300 300
-150 ?
-75 ?
0 1
50 0?
100.5 0?

This comment has been minimized.

@brentvatne

brentvatne Jul 8, 2015

Collaborator

Also probably useful here to talk about extrapolate options - this will be a problem that people will run into really quickly I think. Especially extrapolate: 'clamp'

});
```
Animated values can also track other values. Just set the `toValue` of an

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Title for this part maybe:

Tracking dynamic values
swapped out. For example, in the code snippet above, `leader` and `follower`
could both be of type `ValueXY` and the x and y values will track as you would
expect.

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Input Events

{dx: pan.x} // extract dx from gestureState
]);
```

This comment has been minimized.

@brentvatne

brentvatne Jul 7, 2015

Collaborator

Responding to the current animation value

@brentvatne

This comment has been minimized.

Collaborator

brentvatne commented Jul 7, 2015

This is amazing - 👏 👏 for @sahrens

}
```
`bounceValue` is initialized to 1 as part of `state` in the constructor, and

This comment has been minimized.

@hasdavidc

hasdavidc Jul 7, 2015

should be 1.5 per example?

`bounceValue` is initialized to 1 as part of `state` in the constructor, and
mapped to the scale transform on the image. Behind the scenes, the numeric
value is extracted and used to set scale. When the component mounts, a spring
animation is started on `bounceValue` which will update all of it's dependent

This comment has been minimized.

@hasdavidc

hasdavidc Jul 7, 2015

its instead of it's

to date with the current best-practices.
Fluid, meaningful animations are essential to the mobile user experience. Like
everything in React Native, Animation APIs for React Native are currently under
development, but have started to coalesce around two complimentary systems:

This comment has been minimized.

@hasdavidc

hasdavidc Jul 7, 2015

complementary

sahrens added a commit that referenced this pull request Jul 9, 2015

Merge pull request #1899 from sahrens/AnimatedDocs
Add new Animated API to animation docs.

@sahrens sahrens merged commit 8a5fa6c into facebook:master Jul 9, 2015

1 check was pending

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details

@sahrens sahrens deleted the sahrens:AnimatedDocs branch Jul 9, 2015

@paramaggarwal

This comment has been minimized.

Contributor

paramaggarwal commented Jul 10, 2015

Awesome work @sahrens.

@brentvatne

This comment has been minimized.

Collaborator

brentvatne commented Jul 10, 2015

@paramaggarwal

This comment has been minimized.

Contributor

paramaggarwal commented Jul 10, 2015

@brentvatne Ya, I noticed later and edited my comment. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment