Fast track to the sample app repo.
There are millions of iOS and Android applications out there. In this ecosystem, it’s not an easy task to create an application that stands out and grabs customers’ attention. The app should be clever, fast, and attractive.
One of the ways to improve the attractiveness of your application is by adding animations. We know that it’s hard to achieve fluid and native-looking animations in hybrid apps. Often this results in hybrid developers telling designers “no” to more involved animations. That is why NativeScript already includes an easy and convenient cross-platform API exposing native animations. However, I’m very excited to tell you about something new that is cooking:
This feature is in an experimental state and is not part of the production-ready distribution of NativeScript. We have prepared a special build for you which you can use. Please send us any feedback!
Currently, in 1.6 version of NativeScript, you can use the raw NativeScript APIs to create animations:
view.animate({
translate: { x: 100, y: 100},
scale: { x: 1.5, y: 1.5 },
backgroundColor: new color.Color("#00A0FF"),
opacity: 0.5,
duration: 1200
});
Which, is a heck of a lot cleaner than the code you would have to write using native iOS and Android code:
// iOS: Objective C
[UIView animateWithDuration:1.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
CGAffineTransform transform = CGAffineTransformTranslate(view.transform, 100, 100);
transform = CGAffineTransformScale(transform, 1.5, 1.5);
view.transform = transform;
view.backgroundColor = [UIColor colorWithRed:0.0 green:0.6 blue:1.0 alpha:1.];
view.alpha = 0.5;
}
completion:^(BOOL finished) {
}];
// Java: Android
ObjectAnimator translateX = ObjectAnimator.ofFloat(myView, "translateX", 100f);
ObjectAnimator translateY = ObjectAnimator.ofFloat(myView, "translatrY", 100f);
ObjectAnimator scaleX = ObjectAnimator.ofFloat(myView, "scaleX", 100f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(myView, "scaleY", 100f);
ObjectAnimator alpha = ObjectAnimator.ofFloat(myView, "alpha", 0.5f);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
AnimatorSet animSet = new AnimatorSet();
animSet.playTogether(translateX, translateY, scaleX, scaleY, colorAnimation, alpha);
translateX.setDuration(1200);
translateY.setDuration(1200);
//…
animSet.start();
.animated {
animation-name: animation;
animation-duration: 1.2s;
}
@keyframes animation {
to {
transform: translate(100, 100) scale(1.5, 1.5);
background-color: #00A0FF;
opacity: 0.5;
}
}
Using the animation is simple, just assign the className property of the native object that will be animated:
view.className = "animated";
Here’s what that looks like:
More complex animations canbe constructed by using css keyframes:
@keyframes animation {
from { transform: none; }
20% { transform: rotate(45); }
50% { transform: rotate(50) scale(1.2, 1.2) translate(50, 0); }
100% { transform: rotate(0) scale(1.5, 1.5) translate(100, 0); }
}
@import: "~/css/animate.css"
.animation {
animation-name: wobble;
animation-duration: 3s;
}
You can check all of these CSS based animations on the website of animate-css https://daneden.github.io/animate.css/ and play for a while.
The good thing about being open source is that you can track our progress. I prepared a custom build and updated our animations demo application accordingly. Just follow those steps: