Skip to content
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

Refactor: Animations and values #193

Merged
merged 103 commits into from
Mar 4, 2022
Merged

Refactor: Animations and values #193

merged 103 commits into from
Mar 4, 2022

Conversation

chrfalch
Copy link
Contributor

@chrfalch chrfalch commented Feb 11, 2022

This pull request replaces the previous animation system with a new one based on the concept of values as the state of Skia Views.

A value is a container for any value with subscription and notifications built in. There are three types of values - a regular container value, a derived (calculated value, depending on other values) and a timestamp value (updated with number of milliseconds elapsed since started).

These values are implemented in C++ and should be performant:

  • A value holds a javascript value and can notify subscribers about changes to its value
  • A derived value is the same as a value, but it calculates a new value based on one or more other values
  • A clock value is the same as a value, but it updates its value with the number of milliseconds ellapsed since it was started.
  • A clock value can be started and stopped
  • A SkiaView can repaint itself when dependant values change.

A new animation system is built upon this, where the SkiaDrawView repaints when a dependant value is changed. The dependencies are set in the Canvas object as an effect traversing all children and child properties.

I've also refactored the repaint algorithm in the SkiaDrawView now - so it always hooks into the display link / choreographer and checks if there are any repaint requests on every notification. This makes for a smoother repaint and also avoid repainting more often than the display refresh allows.

This PR also fixes the velocity in the useTouchHandler which is now returned with the correct sign and uses points pr. second, not pixels pr. second

Fixes #195
Fixes #201
Implements #87

- Need to rewrite the view repaint code
Now the view starts a draw loop callback independant of wether it is in continous or default mode.

In the callback it checks for redrawRequests and redraws if there are any or if the drawing mode is continous.
- Implemented values API
- Implemented simple animation API on top of values API
- Refactored all samples
@chrfalch chrfalch requested a review from wcandillon February 11, 2022 09:56
The JsiSkContourMeasureIter::next might return null and then we should just shortcut and return undefined to javascript instead of creating an object wrapping an empty object.

Also refactored base class of JsiSkContourMeasure to be a SkSp wrapper

Refactored use of malloc to RAII as well.
@wcandillon
Copy link
Contributor

This is awesome, there are no other way to say it. It was quite fun to implement the imperative version of the bouncing function.
Here are some small comments on top of #218

  • Should ValueApi to be ValuesFactory?
  • The doc example in derivedValue seems to imply that derived values are actually not read-only? This was probably a mistake?
  • Is it necessary to export the start() and stop() method in ClockValue (on the JS side)?
  • Should current be named value in AnimationState?
  • Should we introduce to values? AnimatedValue, or SkiaValue, or JSIValue? No strong opinion just wondering.

@chrfalch chrfalch merged commit 22ca990 into main Mar 4, 2022
@wcandillon wcandillon deleted the feature/animated-values branch March 14, 2022 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useTouchHandler is reversed and uses pixels pr. second useLoop doesn't yoyo properly
3 participants