I am drawing svg vector image on canvas. There was fetched all elements from svg file seperatly in List. It allows me to draw and animate each element of the picture how needed.
The question is: How can I add blowing animation for all blue elements (something similar on hair animation like this)?
I heard something about animating besier curve, but I could not find anything about it.
Thanks in advance for your help.
Related
I am trying to draw something like this http://www.laviny.sk/themes/hzs/images/pocasie/r/r2.png using android XML shape. It is one big triangle (45° on bottom) and one smaller triangle on top of it. I am planing on using it on image like this http://www.laviny.sk/themes/hzs/images/pocasie/r/r0.png. I know that I could use simple png image of this but I want to set its color programatically so thats why I am trying to use android shape.
Is this too complex to be drawn by shape? If not can you please try to guide me a bit because I really dont know how should I approach this problem.
Thanks in forward
Layer-list should be able to do that. The other way is to extend ImageView and draw what you like on a canvas within the onDraw method.
easy now.
What I want eventually:
I want to have 2 bitmaps overlayed on a view. Same bitmaps with the one above have higher brightness than the below one.
Now when the user strokes(with touch event (like paint brush)) on the upper bitmap, I want those parts of the upper bitmap to go invisible.
For those who are familiar with adobe photoshop perhaps this will make more sense:
I want to draw a mask on an image being display so that only the unmasked parts remain visible. But the mask can be drawn from a brush with variable hardness/size.
How do I achieve this functionality? Direct me in in the line where I should research or give sample code.
Also, is it possible to draw strokes on an imageview with a brush which has variable hardness? I know that I can drawPath and drawArc on a canvas, but I do not know how to achieve the different brush strokes/styles.
Please pardon me if I haven't phrased my question right, or wasn't able to find similar duplicates.
You can use FrameLayout to overlay one image over other in Android and for Custom Masking search FingerPaint on google.
I think the best way is to do your own off-screen compositing, then render the composited image using an ImageView or perhaps a subclass with custom interaction. See this sample code for an example of how to do such compositing using the Porter-Duff transfer modes.
The task is following:
To draw parts of some bitmap only behind a path (user draws path using his finger). It must look like the user draws this bitmap by his finger. It is similar to task: erasing some picture by finger, but the approach should be different.
I know it is possible with OpenGL, but at first i am looking for more light option with standard android canvas and view drawing.
I have seen the example FingerPaint in APIDemos (please, do not refer me to it).
I am interested in somebody's real experience of implementing this task, or any other info, links or code, which can help.
Thanks.
You say to not refer you to FingerPaint, but have you considered that this sample may indeed hold the answer?
You could adapt it to two views on top of each other... your hidden image underneath and the fingerpaint view acting as a mask on top. You "paint" with the colour 0x00000000, i.e. total transparency, thereby revealing the image in the view underneath.
What I'm trying to do is have a background image, for sake of simplicity, lets say it's a picture of the front of a house. Then, I want to have a red ball move from window to window.
**I want to have a background picture, and a picture on top of it.
**I then want to be able to tell the top picture EXACTLY where to go.
How can I do this?
I'm just beginning to learn about animations in Android, and have not yet run across any way to do this.
There are two routes to animation in android: Canvas and OpenGL ES.
I would recommend OpenGL for anything requiring smoothness and speed, like a moving ball.
You should create a view using the helper class GLSurfaceView
http://android-developers.blogspot.com/2009/04/introducing-glsurfaceview.html, and implement a Renderer.
I assume you have the images saved in your res/drawable folders, in a format like png and the ball file contains an alpha channel.
You can see many tutorials online, but basically you need to load your background image and your ball resource at onSurfaceCreated and store it in a texture using GLUtils.texImage2D.
In the onDrawFrame method, you should set up a 2D projection such as glOrtho2D, then draw the background.
Then just before you draw the ball texture, you can use the glTranslate(x,y,0) function to move the ball over the house. Use an alpha blend for the ball:
glBlendFunc(GL_SRC_ALPHA, GL_SRC_ONE_MINUS_ALPHA);
glEnable(GL_BLEND);
Unfortunately writing in OpenGL isn't as straightforward as you might hope. Everything is done with 3D coordinates, despite the fact you want only a 2D image. But hopefully this gives you enough info to google for good exmaples, which are abundant!
I need a graphical needle gauge (like a speedometer etc) for my app but such a UI widget is not part of the SDK so I probably have to create it myself.
My idea is to have the background with the tickmarks and coloured fields (green, yellow, red) as one bitmap and the needle as another bitmap drawn on top of the background, but rotated in the appropriate angle.
In my book, Professional Android 2 Application Development, there is a somewhat similar example with a compass rose, although that one is drawn using line graphics, not pre-fabricated images like I will have to use to get the desired look.
However, in the compass example the whole canvas is rotated before drawing the tick marks. I cannot use this approach as it will also rotate the gauge background. So I need to somehow rotate the needle image (which should be transparent) before superimposing it. But I don't know how to do accomplish this.
Can anyone lead me in the right direction on how to proceed with the needle gauge? Also, if there is a better way to build the meter than sketched above, please let me know.
You can divide your guage into different layers. One for background, one for tick marks. Layer for tick marks can be rotated to draw marks and when turned back and combined with 'background' layer.
You can see the following example with layer technique described above: http://mindtherobot.com/blog/534/android-ui-making-an-analog-rotary-knob/
P.S. This is not my blog, i've just found this technique there.