Comments (4)
Is it a part of the motions themselves, the code that is performing calculations on
prior
tweens?
Yes. Allowing stateful things like momentum to be handled at the level of the Motions but not the Transitions is one of the big wins with our architecture.
A motion doesn't necessarily need to choose to implement momentum the way I've done it in Move, but that's one pretty good way. In general, you get access to any prior motions, and you can decide what state to propagate from them.
In the case of Move, we are adding the prior tween into our new tween, and adjusting our new tween so that by the time it finishes it will cancel out the remaining motion from the old tween.
from ember-animated.
Gotcha. Makes sense.
Trying to implement my own momentumless, cancellable Move motion, to be used with something like a collapsible panel. I think you don't want momentum in this case, as it feels a bit unnatural. I'm going for something like what you see in Materialize's collapse.
I looked at the packaged opacity
motion and see that it uses this.prior.tween.currentValue
to calculate what percentage complete the previous tween is when it is cancelled, so it can use proportionalDuration
for the new animation.
Is there a more general concept/utility/property that exposes a tween's percentage completed, that custom Motions can use to properly account for cancelled animations? I poked around Tween and Curve and found some properties like _spaceProgress
and _timeProgress
but believe those are private.
(Am I thinking about this right? Is there a reason proportionateDuration should basically always be derived from priorTween.currentValue
? My confusion could also be that my reference point is D3 where I believe this concept is abstracted away from you. For example if you look at this chart and click the radio buttons quickly, I think the proportionate duration is automatically used, even though the code only ever specifies 750 after the call to .transition()
. I believe D3 calculates that/sets the starting value for the new tween after interruption for you.)
from ember-animated.
I worked something together:
if (this.prior) {
let { initialValue, finalValue, currentValue } = this.prior.xTween;
let percentageComplete = currentValue / Math.abs(finalValue - initialValue);
duration = percentageComplete * duration;
}
Seems to work - but now I need to figure out how to share this with <AnimatedContainer>
.
from ember-animated.
Keep in mind that you can put whatever properties you want on your own Motion, and then access them when one of your Motion instances is interrupting another.
I also think it would be OK to expose spaceProgress and timeProgress as public API.
This:
let { initialValue, finalValue, currentValue } = this.prior.xTween;
let percentageComplete = currentValue / Math.abs(finalValue - initialValue);
is only approximately true, although that is probably good enough for your purpose.
from ember-animated.
Related Issues (20)
- [DOCS] Initial homepage for ember-animated has too much whitespace between lines HOT 1
- Embroider Compatibility: animated-container's dynamic Tag breaks build HOT 3
- Information on testing ember-animated in docs HOT 2
- Why do we need `assert-never` in `dependencies`? HOT 2
- Ember Global deprecation warning due to old version of ember-cli-babel in ember-animated HOT 2
- Consider public export of TransitionContext type HOT 1
- Attempted to resolve -element, which was expected to be a helper, but nothing was found HOT 5
- Embroider: ember-animated is trying to import from rsvp but that is not one of its explicit dependencies HOT 1
- 1.x breaks animated-outlet HOT 10
- TypeError: yield* (intermediate value)(intermediate value) is not iterable after removing IE11 from transpilation targets HOT 1
- `startTranslatedBy` and `endTranslatedBy` modify the initial and final bounds width/height
- AnimatedOrphans' documentation looks broken HOT 2
- Memory leak in emberAnimatedSingleton HOT 6
- Incompatibility with ember-element-helper v0.6.1 and Embroider optimized HOT 8
- Types are not resolveable with sufficiently new enough TypeScript
- Error after upgrade from `1.0.4` to `1.1.0` HOT 3
- Glint ember-animated/template-registry not found HOT 2
- v1.1.3 is missing type declarations HOT 4
- Documentation code examples rendering wrong
- App broken after upgrade from 2.0.0 to 2.0.1 HOT 1
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 ember-animated.