Thunkable / App inventor Cool Effect tutorial: Rebound Spring Animations for your buttons!
How to make the "rebound" effect from Facebook in Thunkable / AppInventor
Hello friends I am here with a new Thunkable tutorial that also works for app inventor.
What is "REBOUND"? Rebound is a java library that models spring dynamics. Rebound spring models can be used to create animations that feel natural by introducing real world physics to your application. Probably you have seen this effect in Facebook because Rebound is an open-source spring dynamics animation library for Android made for them!
Anyway I will show you how to replicate this effect in your thunkable buttons , you can use it for other components as well.
PLEASE if you found it useful share it and like it :D
Rebound is not a general purpose physics library; however, spring dynamics can be used to drive a wide variety of animations. The simplicity of Rebound makes it easy to integrate and use as a building block for creating more complex components like pagers, toggles, and scrollers. .
More about Rebound (check at the end of the description):
From MIT's App Inventor and YCombinator's W2016 batch, Thunkable allows anyone to build powerful native apps. With Thunkable, it's simple to design, and simple to code-- simply drag and drop to create fast, native, reliable apps.
Thunkable makes building Android apps easy for everyone.
Una de las opciones más sencillas para crear aplicaciones nativas para Android, sin aprender programación, es sin duda MIT App Inventor. Ahora llega Thunkable, basada en la primera, que de igual forma es una excelente solución para los que dan sus primeros pasos en el desarrollo de aplicaciones para Android.
Crear apps con Thunkable es realmente sencillo, sólo tenemos que configurar su apariencia, incorporar los distintos elementos de la interfaz y programar las acciones y eventos en un editor de bloques, sólo hay que arrastrar y soltar.
Be my patron:
/ azaotltutorials
Like my Facebook Page: / azaotl
MIT App Inventor is an innovative beginner's introduction to programming and app creation that transforms the complex language of text-based coding into visual, drag-and-drop building blocks.
A simple example of using rebound is presented at facebook.github.io/rebound. In this example, a mouse or touch down on the photo sets a spring value to 1 and releasing sets the spring value back to 0. The graph to the right shows the curve of the updates to the spring value as it seeks the end state of 0 or 1. The photo is scaled based on a mapping of the 0 to 1 states of the spring. One important thing to notice here is that the existing momentum and position of the spring are accounted for when the end state of the spring moves between 0 and 1. This allows code that controls Rebound animations to be more declarative. With a time-based animation, the programmer needs to create the animation, determine what the duration of it should be, start the animation, and potentially cancel and re-create another animation if the user interrupts the ongoing animation with a touch. With Rebound, you merely change the target end state and/or friction and tension configuration of the spring and let the physics engine do the work of determining how the spring will get from where it is now to the new target state. Along the way, any listeners attached to the spring will ensure that the UI is updated to represent the current state of the physics model.
Understanding spring forces
Most of the physics animations our designers have created can be modeled using simple spring forces. A spring force is defined by Hooke's law, which states:
"…The force F needed to extend or compress a spring by some distance X is proportional to that distance.
That is, F = kx
where k is a constant factor characteristic of the spring, its stiffness."
Spring forces based on Hooke's law combined with a damping or friction force can be integrated to determine the net force acting on an object in a physics system, which according to Newton's second law can be used to determine acceleration. Integrating these forces over time can be used to solve for an equilibrium point where the spring returns to its resting position. Modifications to the tension and friction of the spring can yield different types of animation curves. For example, low friction and high tension will create an animation that moves rapidly and oscillates many times before coming to a rest or equilibrium. Low tension and high friction will create an animation that moves slowly and does not oscillate when coming to a rest.