Comments (12)
Yeah this is tricky :\ Presumably we want to use Core Animation to do the interpolation. It's not terribly clear to me how we can treat the animation as a function of state while still allowing Core Animation to do its thing.
from few.swift.
When Few brings in new elements, removes elements, or updates elements it simply adds, removes or updates them. This could be done as a transition, similar to a React transition group or the UICollectionViewLayout protocol where the layout asks for starting and ending properties from a source. Perhaps the Few way could be to add an optional returned struct from render (or perhaps wrapping the returned elements as React does) that describes the transition, including any desired animation. Things to specify about a transition could include specifying the start frame for an added element. Instead of just adding an element at it's final computed layout frame, another layout could be specified that describes a start frame. Then the added element could be animated to it's final layout using other properties in this same struct. The struct could be keyed by element key plus a string. Like key1.start
or key1.animationDuration
.
from few.swift.
So thinking about this a little more, Few doesn't have an abstracted layout object on each element, instead the flexbox attributes are directly on the element. This isn't the most ideal since layout could be abstracted a bit to support times when custom layouts are needed. However, support for this needs to be added directly in css-layout since it manages all measurement and layout of children and I think @vjeux has mentioned he wants to do this. But at any rate, if there was an external layout it would be an ideal place to be consulted for any transition properties for an element.
from few.swift.
You can provide an arbitrary C measure function to css nodes to do layout. This should give you the same power as sizeThatFits (but someone needs to actually test it).
from few.swift.
I just want to mention that while this would be a nice to have, position: absolute with top, left, width, height solves most of the use cases if you can workaround to find the size of your parent. So it hasn't been critically needed in any of our apps yet.
from few.swift.
There is this idea that might appeal to you @joshaber with an FRP based approach: https://github.com/chenglou/react-state-stream.
from few.swift.
I definitely like the conceptual purity to that. π
A couple immediate thoughts:
- It's hard to see how that would fit with allowing Core Animation to do the interpolation.
- I wonder if it would end up making life harder on users. They'd need to reify all state involved in their animations. That might be more correct as it is view state, but maybe more awkward to use?
from few.swift.
Itβs a really convoluted approach. I am not sure even why I sent it along. :)
from few.swift.
Oh no, I think it's definitely interesting. Especially in the sense that it's true to the "views as functions of their state" description.
from few.swift.
I'm really interested in being involved in this discussion. We're open sourcing ComponentKit shortly β we should compare implementations after that.
from few.swift.
(:metal: Can't wait to see ComponentKit!)
from few.swift.
Really interested to see how the thinking around animation evolves. My first two gut reactions are to have multiple animation APIs:
- A simple approach where you can attach an animator object to a view that describes things such as animationDuration and animationCurve. Perhaps animations are triggered by adding the animator object and when the animation completes it requests the animator object gets removed.
- An advanced approach that could take advantage of libraries like AsyncDisplayKit and that invokes updateState every animation tick. That way more complex Facebook-Paper-like gesture/animation relationships can be handled.
from few.swift.
Related Issues (20)
- why both in the main thread HOT 3
- Is this dead? HOT 2
- Upgrade Swift version?
- .gitignore
- Render from the topmost dirty component downward HOT 1
- [RFC] Use ComponentSpec as api for defining components HOT 5
- Nesting and flexbox HOT 5
- Multi-line labels HOT 1
- Publicly get a layout Node for an element?
- Fix iOS TableView HOT 1
- How to have overlapping elements? HOT 5
- Installation documentation? HOT 3
- Use flexbox terminology HOT 1
- Input does not seem to follow "stretch" rule HOT 5
- Re-think in light of protocol extensions HOT 3
- Add instructions in README on how to edit demo HOT 4
- Add `didRealize` hook to Component HOT 1
- iOS: table view selection doesn't really work HOT 5
- AsyncDisplayKit HOT 2
- Carthage install issue on Xcode 7.1? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from few.swift.