NativeScript: Animation Techniques

This course shows you when you are using NativeScript how to add animations to your applications using conventional framework based techniques, as well as unconventional tips and tricks.
Course info
Rating
(14)
Level
Intermediate
Updated
Feb 6, 2017
Duration
2h 30m
Table of contents
Description
Course info
Rating
(14)
Level
Intermediate
Updated
Feb 6, 2017
Duration
2h 30m
Description

Learn how an app, built using NativeScript that is already in the Apple and Google App stores, can be enhanced by applying newly learned animation techniques using both code animation and CSS animation. In this course, NativeScript: Animation Techniques, you'll dive deeper into ways you can leverage the power of your environment to get beautiful animations with documented methods. First, you'll learn how to write plain JavaScript property animation code without frameworks. Next, you'll learn creating animation from sprite images using pure JavaScript. Then, you'll learn leveraging code-based animation classes and function that get shipped with NativeScript and Angular 2. Finally, you'll dive deep into the basics of CSS animation and applying them to your sample application and tapping into the raw power of Native platforms. By the end of this course, you'll know more about NativeScript with Angular and how to build beautiful animations for your mobile applications.

About the author
About the author

Alex Ziskind loves tinkering with the latest web and mobile technologies and gets giddy over the possibilities that the cloud brings to those fields.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome to Pluralsight. My name is Alex Ziskind. I've been a web developer for a long time and have been using NativeScript to create native mobile applications with web technologies. I'm really excited to share with you techniques your NativeScript and Angular 2 applications really shine by adding animations to them. Today, animations are a critical part of any application but especially mobile ones. Animations not only draw the user towards changes in your application user interface but also add a lot of fun and polish to your mobile applications. In today's world of flat design, using animations is especially important to make your apps really stand out from the crowd. In this course in addition to the documented instructions you'll find on the NativeScript and Angular websites, we're going to dive deeper into ways you can leverage the power of your environment to get beautiful animations with documented methods, as well as some less-known techniques. Some of the major topics that we will cover include writing plain JavaScript property animation code without frameworks, creating animation from sprite images using pure JavaScript, leveraging code-based animation classes and functions that get shipped with NativeScript and Angular 2, deep diving into the basics of CSS animation and applying them to our sample application, and, finally, tapping into the raw power of native platforms to perform incredible animation gymnastics. I hope you'll join me on this journey to learn more about NativeScript with Angular and how to build beautiful animations for your mobile applications.

Course Introduction
You may have come to use the NativeScript framework because you're a web developer or perhaps you're a native developer who knows the iOS platform or the Android platform but not both. Whatever your reasons are, NativeScript is a great choice to develop your native mobile apps with JavaScript. And now you want to polish your skills by adding polish to your applications with the use of animations. Welcome to NativeScript Animation Techniques from Pluralsight. My name is Alex Ziskind, and in this course I will show you some techniques you can use in your NativeScript Angular applications to spice things up a bit and get things moving. Without smooth and performant animations, your app will seem slightly outdated and not as enticing to use. So including animations in mobile applications has become a standard that users have come to expect and a core skill that ad developers need to learn. Motion is a key aspect in the design of modern applications, web or mobile. Great user interfaces use smooth transitions to flow between states with engaging animations that focus the user's attention where it's needed. Not only do well-designed animations make applications more fun to use, but if done right, they can make the application easier to use.

Applying Imperative Animations
In this module, you will learn about using imperative animations with NativeScript, otherwise known as animations that you describe in your JavaScript code. How is this different than JavaScript animation techniques I showed you in the previous module? These are cross-platform standardized animations provided by the NativeScript framework and are, therefore, optimized to work with the native platform that they will be running on. If you can use animations provided by the NativeScript framework to get the job done, I suggest using them first before you roll your own. Here's what we'll cover. First, we'll see how to use the concepts we learned in the previous module to animate a sprite image. This will show you how different it is using pure JavaScript animations compared to using framework animations, and it's also a very useful technique that's commonly used in the web development world. Then we will cover NativeScript's simple yet powerful API for animating almost any native UI element in your application by getting ahold of a view in code and then using the view's animate function. We'll also discuss how to configure animations using the animation definition, and we'll see how to control even more aspects of your animations using the animation class and animation chaining. Since we're trying to mimic the real world, we will look at controlling the timing of the animation using animation curves. And, finally, we'll see an example of using Angular animations in our RPS conference application. There's a lot to cover in this module, so let's get started.

Applying Declarative Animations
In this module, we will look at applying declarative animations through the use of CSS. If you need a refresher on how to use CSS or what properties are supported in NativeScript in general, please take a look at the UI basic section in my beginning NativeScript course right here on Pluralsight. In the last module, we saw that using JavaScript animations gives us a lot of power. But somebody wise once said, With great power comes great responsibility. Sometimes CSS is a better option for animations. And in this module, we'll see why. Here's what we'll be doing in this module. We look at the benefits of using CSS animations and also its downside. We'll learn about the types of CSS animations available, and we'll see how to define CSS animations in NativeScript. Finally, we'll look at using third-party libraries, and we'll apply all these to our conference app.

Calling Native Animation APIs
NativeScript animations get you so far. However, there are times when you need just a little bit more from your native animation performance. It's these times that we need something else. This is why NativeScript's ability to call native APIs directly is also going to help us with animations here. In this short but code-intensive module, we will be using NativeScript's ability to marshal data types while communicating with the underlying platform, iOS in our case. Marshalling is the conversion of JavaScript objects to Objective-C in iOS and Java in Android. I want to show you accessing native APIs, so I will only show you iOS. But you can extend the examples to Android in your own practice.

Course Summary
NativeScript is an incredible technology to develop native mobile applications, and its animation abstractions are even more impressive, especially for web developers looking to bring their animation skills to native mobile platforms. Since the NativeScript framework is constantly being developed and improved, I highly recommend that you keep an eye on the documentation pages, specifically anything related to animation as I'm sure more features will be added. If you take a look at the docs. nativescript. org site, this is where all the NativeScript documentation lives. You have the NativeScript Core option, which is just NativeScript without Angular. And under the User interface section, there's an Animations page. And this also takes you through declarative and imperative versions with examples. If you want the Angular version, you can go to the NativeScript with Angular documentation section. And here also under the User interface, you have an Animations page. So this provides you with Angular documentation for animations. You will likely be visiting the documentation pages of NativeScript quite a bit when developing NativeScript applications.