Comments (6)
Hi @rohan20! I took a look, and I think this is related to needing to make sure you key properties that you have changed in one animation in any animation you plan on playing after it.
Note how in Placeholder you key the rotation of this third (in your hierarchy) rectangle:
In FlutterToHummingbird you key other properties for that shape, but not rotation.
That means that if you play Placeholder, and then you play FlutterToHummingbird, the last rotation value applied to this Rectangle shape in Placeholder will live on and hold throughout FlutterToHummingbird. This is powerful because it allows mixing animations on top of each other, but if you intend for the properties to be reset to their setup values, you need to manually do it in the following animation. For example, in this case you'd probably just key the setup rotation of that rectangle at the start of FlutterToHummingbird.
We have plans for making this easier to detect using a system that allows you to preview mixing animations together.
from flare-flutter.
Fixed! Thank you! I've learnt a lot of things over the course of trying to get this animation right. Works exactly the same on my Flutter project now 😄
from flare-flutter.
This was a good catch. We were allocating the deform vertex buffer from the keyframe values instead of the original source. So the vertex buffer would always default to the last keyed one.
This should be fixed now and the package has been updated. Please give it a try!
P.S. if you're going to swap between these two animations at runtime, you'll probably want to make sure you set a key for the vertices of your rectangle which you animate in FlutterToHummingbird at the start of Placeholder. Flare doesn't automatically reset keyed values at runtime, so the last applied value from an animation will live on. This is a little misleading in the Flare editor, as it does do this for you when switching editing animation. It resets all the values to their setup values, but at runtime we spare the cycles and leave the artist/developer in control of this.
If you intend to only play Placeholder once and then switch to FlutterToHummingbird, then you don't need to key the path in Placeholder.
from flare-flutter.
Thanks, @luigi-rosso. I understand the post-script and it made real sense. Even though I have upgraded the dependency [1.0.7] and added vertices keyframes for the disappearing rectangle, it somehow still persists the state of the previous animation. Could you please have a look at the project and check where I am wrong?
from flare-flutter.
Sure! Would you mind sharing the source of your example project? It would be nice if we can work off of the same exact codebase. Let me know if not, I can setup a small example that I can share with you.
from flare-flutter.
Sure, here it is: https://github.com/rohan20/hummingbird-animation/
from flare-flutter.
Related Issues (20)
- Migrate to null safety HOT 8
- Add debug mode HOT 1
- Migration to Null-Safety HOT 3
- Request for Clarification: Flare-Flutter vs Rive Flutter Runtime Use Cases HOT 4
- LateInitializationError HOT 8
- Null Safety for flare_dart HOT 3
- Placeholder widget while animation is loading
- 3.0.0 antialiasing no longer working HOT 13
- IK Constraints not working HOT 4
- Difference between flare-flutter and rive-flutter HOT 4
- FlutterActorImage not visible FlareActor
- Clear Memory after finish an animation HOT 2
- Can't load FlareActor.bundle on Android HOT 2
- Unhandled Exception: Exception: LateInitializationError: Field '_paint@235459774' has not been initialized HOT 2
- LateInitializationError: Field '_paint@xxxxxx' has not been initialized HOT 2
- LateInitializationError: Field '_setupAABB@43245341' has not been initialized HOT 1
- Flutter 2.10 & 3.0 throw warnings during compilation HOT 3
- Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null. HOT 4
- update HOT 1
- Flutter3 Error HOT 2
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 flare-flutter.