NOTE: You can use this animation effect by itself, or you can get the nativescript-effects plugin, which not only has this effect built in, but has a bunch of other convenient effects
NativeScript Spring Animation
A NativeScript plugin that adds the Spring effect to animations. The iOS curves that are supported include Linear, EaseIn, EaseOut and EaseInOut, but no Spring. Currently this module supports only iOS, but since Android animation curves include a 'spring-type' of animation, a similar effect already exists.
$ tns plugin add nativescript-animation-spring
This command automatically installs the necessary files, as well as stores nativescript-animation-spring as a dependency in your project's
To use the animation spring module you must first
require() it. After you
require() the module you have access to its APIs.
var animationSpringModule = require("nativescript-animation-spring");
View.animate() method as you normally would just as described in the NativeScript Docs in the
Animation Section. In order to get the Spring effect, there are several options that need to be specified besides the standard ones like transform and scale:
- duration: decimal (in ms)
- delay: decimal (in ms)
- dampingRatio: float
- velocity: float
- options: object (UIViewAnimationOptions)
- curve: string (to use the spring animation, curve must be set to "spring")
The full set of options is documented on the Apple developer site. Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).
curve: "spring" //<---set this to "spring" to use the spring animation
Whether you include this plugin or not, calling the animate function above will work as the extra parameters will be ignored by the NativeScript animate function.