 So hello everyone, welcome back. So now you have seen, I've explained you the canvas, drawing with canvas. And Pushpuk has explained you the view animation. Now I'm going to explain about property animation. So in short, property animation is a generic method of animation in Android. So as Pushpuk has explained about view animation, which can only be applied on views that are, for example, buttons or text views. Now the method that I'm going to discuss can be applied on any object. So here I'll briefly give a short comparison of both view animation and property animation. The first of all, view animation is specifically for views that I've said that are text views and buttons or image views or the views in general. However, the property animation can be applied on any object, including views. So views are also objects, so they can be applied on anything. The second difference is view animation can be applied only on few properties. For example, translation, rotation or the position, x and y position. However, since we are in property animation, we are dealing with any object, it can be applied on any property. So here I've marked, so I'll explain this in detail later. So what any property means? Again, in view animation, if you run the demo later, which should be uploaded by Pushpuk, only the drawing of views will be animated. For example, he has shown the demo in which a text view was getting translated. However, if you try to do a button instead of text view, then you'll notice that only the drawing of the button will get animated, not the actual button. So for example, all the event listeners will stay in its own position, so you can't touch on the button which is actually translated. So if the button gets translated, you have to touch on its original position, not the translated position. So in that way, you might get confused that only the drawing of views gets animated, not the actual views themselves. However, in property animation, this restriction has been eliminated. And the actual views can get translated or rotated or whatever effects you want to give to the views or any object. The next difference is actually a little disadvantage, you can say, of property animation that you might have to write more code than the view animation. However, there is a little hash that I'll explain later that actually we can write this, write our code very concisely so that we can animate with property animation with less code. So I'll explain that also later. And the last thing that I want to show is that view animation is a part of this package, android.view.animation. However, the property animation is a part of android.animation. So don't get confused between these two packages. So the android.animation package contains these classes. So in the earlier session, you saw that the animation is the class. However, in this, the animator is the root class. So and there is a lot of, there is the entire class hierarchy. So view animator, value animator is one of the child of the animator class. There is an animator set and there is also an object animator. So I'll explain some of them in details. First of all, what are the things that we want, that we can set, that we can specify inside the animator. The first is the duration and the start delay. So we specify the duration in number of milliseconds and the start delay also in number of milliseconds. Then we can specify the repeat count. That is how many times the entire animation is repeated and the reverse behaviors that we want to animate in reverse. For example, if we are translating from 0 to 500, then we can also specify that we can translate from 500 to back to 0. So that also we can specify. The next thing is time interpolation and type evaluator. So this is a little advanced technique. So you might not need it every time. But I'll explain them in detail because if you are going to develop some games or something more advanced beyond the basic translation and rotation, you will definitely need these things. If you understand this, they are the core of the animation system. And the last thing is animation listener. So that also I'll explain later. So let's start with the interpolation and evaluation. So there are two things, time interpolation and type evaluation. So this is the whole system which is set up by the animator, which we can see. So we initially specify the start and end values and duration. So once we set up these things, the animator, the Android system automatically computes the values between 0 and 1. So for example, 0 specifies the start of the animation and 1 specifies the one of the animation in timeline. So if we specify the duration as 10,000 milliseconds. So in the 0th, when the animation starts, the output value is 0. And when the animation ends, that is at 10,000 milliseconds, the output value is 1. This is uniformly interpolated over duration. So it is a uniform over this time duration, which we'll call a progress. So this is a time progress that is made by the Android system. Then it will internally call the time interpolator. So time interpolator gives a flexibility that, for example, if we want our animation to speed up during startup and slow down during ending, or we want our animation to do some other funky things, then this time interpolator is useful, because it tweaks the input time which was uniformly spread over the entire duration. We can tweak the time and we'll call this tweak time as a fraction. So it is not necessary between 0 and 1. So I'll explain it later, but it is a float value. So we can assume that as a normalized property animated value. And then since this previous value is a float value, normalized value, we want to convert them in our type. For example, we want to animate a color. We want to convert that float value to a color value. So we want to map that value to our wanted value. So the type evaluator will be useful. So then it will internally call a type evaluator, which will return our wanted value between the start and end values that we have specified of the required type. For example, color or any other object. So in time interpolator, let's see it in detail. There are some of the time interpolators built into the Android system. For example, there is a linear time interpolator, accelerate, decelerate, anticipate, and overshoot. There is a bounce time interpolator. There is a cycle. So for example, accelerate time interpolator will speed up your animation during the beginning and then slow down your animation during the ending. And decelerate will do the opposite. It will do on a constant rate till the end. And in the ending, it will go fast. Similarly, the anticipate and overshoot interpolators will do some other things that I'll explain. So also, if your requirements are not specified, this built-in interpolators, you can specify your own interpolators. For that, you will have to override the time interpolator and then override the get interpolation method of time interpolator. So the input value of this method is the current time progress that I've said, that uniformly distributed between 0 and 1. So it will be always between 0 and 1. So you can get at input parameter the progress of the entire duration. And then you want to tweak that progress to some other float values, which is not necessarily between 0 and 1. For example, in overshoot and anticipate time interpolators, they are out of this range 0 and 1. And there is a type evaluator which will convert your tweaked value, tweaked fraction into appropriate type. For example, color or alpha values or integer. And these values will take consideration of the start and end values. For example, you want to start from 500 and go up to 700. Then these values will be scaled appropriately by the type evaluator. So the built-in type evaluators are float int and argb. So argb is for color and float and integer type evaluator. But if you want to customize it, you can extend the type evaluator and override its evaluate method. So as an input, you can get a start value and value and a fraction that I have talked about earlier. And in evaluate, you just do a simple linear interpolation. And in this method, you do not tweak your input values in any way. You just do a simple linear interpolation by this linear interpolation formula. So this is because your values are already tweaked in the previous step, which is a time interpolation. So you need not take into consideration these things now again. So it is a simple thing. And also you want to convert your input type, input parameters into a required type. For example, your object, your own object. So here I'll give you an example of linear interpolation. So the first column shows the elapsed time. So we want to animate over the duration of 1,000 millisecond. The second column shows the duration, the progress, which is between 0 and 1, which is automatically generated by the animator, Android system, which will be taken as an input to our interpolation type. Interpolation, yes. So now we can tweak our values. So here in linear interpolation, we do not tweak the values at all because the input values are already linearly interpolated. Already uniformly spread over the entire duration. So we need not, we just return the input values as it is. So in the third column, we have returned the whatever values as it is. And in the last step, which is the type evaluator, we now scale our values to the input and to the start, start value and end value, which is, for example, here I have given the start value as 100 and end value as 300. We now need to scale our values according to the formula in previous step between these values. So our output will look like, I have shown it in a form of graph. So as the horizontal axis shows the current progress, which is generated by Android system, and vertical axis can be assumed as the fraction value after the time interpolation step or type evaluator step. So in type evaluator, these values are just scaled between 100 and 300. And however, the graph looks the same, even if the scale changes. Next, I'll show the graph for accelerate and decelerate interpolation. So here you can see that the graph looks a little different. That in the beginning, it just slows down. And in ending, it just slows down again. But in between, it speeds up. So for example, here in the third column, you can see in the first 0.2 progress, it just outputs 0.1, which is slowed down. However, in between, it speeds up. So I'll show a demo on-screen demo later. So this is the anticipate and overshoot thing. So in this, the interpolated fraction goes beyond the range of 0 and 1. For example, minus 0.112, it is negative. And here in the second last step, it is 1.112. So for example, if you want to animate a circle, so we have given a start and an values of 100 and 300. But in the starting, we want it to go a little bit behind 100. And in the ending, we want it to go a little bit behind after the 300 value. So we can specify it with the overshoot and anticipate operator. So the graph of it looks like similar to this. So now this is the small on-screen demo of that. That I want to show it using a shared desktop. So this is a small on-screen demo of this. So you can see the linear interpolation goes linearly during the entire duration. However, in the anticipate and decelerate, there is a small speed up in between the start and end values. And in anticipate and overshoot operator, the start values and end values are beyond its given range. For example, it goes a little bit behind. And then it goes a little bit after its specified values. So in this way, you can specify the interpolation. Now the final thing is animation listeners. Now animation class provides some set of listeners that I think Pushpak has already talked about. In this, we can specify an animation listener. And we override its four methods, which is on animation start, on repeat, cancel, and end. So they get fired when the animation actually starts or repeat it. And we can do whatever you want. For example, if you want to start another animation on end of the first animation, you can specify it in animation end. Or we want to specify animation cancel, for example. When the animation starts, we want to do something. So we can specify in this thing. The next thing I want to specify is value animator. The value animator is one of the concrete subclass of our main animator class. So here, as you have already seen this diagram earlier, now we won't talk about progress and fraction and the computed value. So we'll just say that we are magically getting the output value from the animator. Now we want to use that value somehow. So how we can use that value? So for example, the animator class is an abstract class. It does not provide any mechanism for that. So we must use an object of value animator. So in this, we can specify an update listener. So this update listener, update event will be fired whenever the value gets updated. So it is shown in this red box. So when a new value of our animation gets computed, it will, this event will be fired. And we will listen to this event and do whatever we want to do with this event. And we get the animated value inside this handler. So if you want to, for example, we get, we animate the value between 300 to 500. So we'll get the value at each step in the animation. And we can use this value to animate, for example, an object or any view or any shape or anything we want. Or we can use it in combination with the canvas itself. So once we get one feedback of one event, this events will get fired during the entire duration of the animation. So we'll get, we'll keep getting the updates during the entire duration of this animation. So this loop is repeated till the animation is running. So this is a small snippet of the animation that we have, update listener that we have specified. So here we have specified an update listener, add update with the add update listener method. And we create a new class of animator update listener. And we overwrite the on animation update, which is a method of animator update listener. And we get a float value as the animation dot get animated value. So we get the animated value. Or we can get this animated fraction, which was actually computed by the Android system as get animated fraction. So either way we can get some values and we can use that value later in any way we want. Next I want to show about object animator that I've talked earlier that we can use this value and use this value to our object. However, in most cases we want to animate some property of our object. For example, we have a button or we have something on our screen and we want to animate that thing. Then in using value animator, we do the things manually. For example, we get the value and then apply that value back to our object. However, using object animator, this things are done automatically. So for example, here O is our object. And we want to animate its property called PROP from zero to 250. So here the property, the Java does not have a concept of property. So in this, there are methods called getProp and setProp, for example, or anything, any getters and setters you have. So you write its name without the getters and setters in a camel case. So here you can specify the name of that property. So this property will get animated, will get the final values, resulting values during the entire duration of this animation once we start this animation. So I want to show you a small demo of that before I continue with next thing. So this thing, as soon as the view is shown that circle gets animated and gets its new value. So I have animated the x value of that circle. So this is done by using the object animator. You can get the code later and you can play around with that code. Now if you want to, for example, you don't want any interpolation, time interpolation, but you want to manually specify that at the 0th, initially my object will be at position 250. At time equal to some 250, my time equal to 250 milliseconds, my object will be at some other position. And you want to manually specify these things. They can be specified using key frames. So for example, here I have shown that at time equal to 0 milliseconds, the x value will be 0. At time equal to 10 milliseconds, the x value will be 6. At time equal to 20, x will be 20, for example, and so on. So this can be done by using key frame animation. So I will not show the details of this, but just for the information I have included this that you can play around with this later and key frame your animation. So there is also a small demo of it, a small application that we are currently developing. So for example, here I have shown a key frame animation. So here the red square is key framed during the entire duration. So the duration is 10 seconds. So the key frame values gets animated during the entire duration. The next thing is animator set. So for example, if you want to animate two things simultaneously or you want to specify, you want to choreograph your entire animations. For example, you want to start animation one and then later you want to start animation two and three simultaneously and then later, for example, four, five and six simultaneously, then you can specify with the animator set. So there are a set of methods called before, after, with. So you can say that animation one, dot before animation two, for example, and after animation three, for example. So I'll show the code. So here we can specify that we have two object animators. One animates the x property of my view and the other animates the y property of my view and from zero to 50 and the second one animates from zero to 100. However, we want both to start simultaneously. For example, we want both to animate at the same time. So we can say animator set x, y, dot play together. So it will start both the specified animations together and we can start the animations. So both the animations will be played together. However, as you can see, as I have specified earlier that the code is a little bit of a problem to some because it is not a concise. So you can specify your animations inside XML as the Pushpuck has explained earlier. However, in this, the directory is animator and inside the resource res directory, not the an im directory. So this specifies the property animation instead of view animation. The correspondence is if you want to specify animator set you specify a set tag inside your XML. For value animator, you specify animator and for object animator, you specify object animator. So I'll show a small snippet of that then. So here I will say it's set. This is the same example that I was shown earlier about using the animator set inside Java. So I have specified that these two animations should start together with the value 50. I have not specified value from so it will be taken zero as a default. So 50, the x property will be animated from zero to 50 and y will be animated from zero to 100 and they will be played together. If I specify here sequentially, then the first animation will be played first and the next will be played next. And we can reference the animation later in Java using animator inflator and load the animator as the Pushpak is explained earlier. We can load that animator animation to the memory. Using the current context, we can specify this as a current context if we are inside our activity or any context. And then we can reference that XML using this thing, using this code. And we need to manually set the target of our animation. So here I have specified view as our target. The next thing to write a concise code is to use a view property animator. View property animator is a new in Android API 12 which is Android 3.1. So it might not be available on the older platforms. So here the entire earlier example can be written in one line that my view.animate, this part returns a view property animator object. It has a method x, y, scale, et cetera. So for example, we have specified x. So it will go to zero, from zero to x equal to 50. And we have specified y. So it will go from zero to 100, simultaneously. So one constraint of view property animator is that it can only be applied on a single view, only a view, not every object and a single view. So if you want to simultaneously do things, we have to use the animator set that I have explained earlier. So I have almost completed the property animation. I'll show a demo of the view property animation inside Eclipse. So this was the first demo that I was shown. Here for example, we have used a value animator. We specify that we want to animate a float. So this is the type evaluator that we are already specifying using this method. However, we want to explicitly specify our own type evaluator. Then we can specify value animator.of object and specify the object of our type evaluator, our own type evaluator. And then specify the start and end values. This manually specify the duration. So here I have said 10 seconds. We set the interpolator. Here I have set the bounce interpolator. And I have set the update listener. So here also I have to specify the invalidate because at each update of value, we want to redraw our scene. So here inside update listener, I have invalidated my view and then started the animation. So you have seen the demo. I have shown you the demo. And the second code is about view property animation. So here you can see it is only a one line of code which does the same thing. Since we have applied our view on a, applied our animation on a single view and we have animated only a few properties. So this can be written with using a view property animation. So this code will be available to you later. And now Pushpuk will take over and explain you something about OpenGL inside Android. Thank you. Okay, so this is a very, very brief session on OpenGL ES. Basically OpenGL itself is a very vast topic that requires a lot of concepts from computer graphics and as earlier mentioned linear algebra. So I'll just talk about OpenGL very briefly. So whatever we saw up to now, all the methods of animation, view animation and property animation, they are all methods of 2D animation. But OpenGL is 3D. You can do 3D animation using OpenGL. So OpenGL is a technique is developed by a company called, it's a library which is developed by Cronus and the embedded systems version of OpenGL is called OpenGL ES, which works on Android. So as I mentioned knowledge of linear algebra and math is useful. We can draw 3D, you can basically draw in 3D in OpenGL. So most 3D games that we see in computers, like many games, they are drawn in OpenGL. Live wallpapers are also drawn in OpenGL. So everything in OpenGL is a scene. Whatever we see is actually a scene and everything that we see on the screen is an object. So I'll just show you a scene. So let's look at this. This is a scene in which everything that is that we see is an object which is placed at a coordinate system and everything that we see is relative to the camera. Camera is also an object in OpenGL which can be moved as you want and the objects are lit by using lighting. So this is a basic OpenGL scene. There are various things that we can do in OpenGL. For example, this is a cube drawn in OpenGL and it's been texture mapped with a bitmap image. So this is a cube that was drawn in OpenGL and then we took a bitmap image and we pasted it on the cube. So it looks like a checkered cube but it's actually a cube which is having a bitmap image pasted on it. So these kinds of things are not doable in 2D graphics like view animation, property animation. This is an example of lighting. This is a scene we see developed in OpenGL. Here we see the scene being lit. The light is placed somewhere here. This is another light here. So these are the effects that can be created by lighting. This is an example of shading. See, we see two cubes shaded in a very different manner. They are basically shaded by a different algorithm for shading. One is very realistic. The right one is very realistic. The left one is not so realistic. It's a bit vague. So these kinds of effects can be brought by using OpenGL and during shading in OpenGL. So in order to learn OpenGL Android, you would first have to learn what is OpenGL. There are a lot of tutorials available for learning OpenGL and then putting it on, putting in those OpenGL apps on Android it probably will not be that difficult. Once you understand how to use what is the basic structure in which those OpenGL programs can be ported on Android. So regarding this, there is a lot of documentation available on the developer website of Android. There are sample programs available as well. So you can go through them and learn how to use OpenGL on Android, but first learning OpenGL itself is very important. So this is a very short session and before I finish, I'll quickly show you a demo of a simple app developed in OpenGL. So this is a scene which is developed in OpenGL. So as I mentioned, these two things are objects. The pyramid and the queue are objects and they have a relative position with respect to the camera. And in this scene, the objects are getting rotated by a axis that is mentioned by without the program. This is a simple app in OpenGL. Okay, so that concludes a very short session on OpenGL.