I need to perform a sequence of animation on an imageview.
1) Rotation
2)Translation after applying rotation.
But whenever I translate my imageview after applying rotation.My imageview is reset to orignal position then it translates .
I can't use an AnimationSet as i'm applying an animation in following way.
I'm rotating imageview on ACTION_MOVE
and
translating on ACTION_UP.
Plz help me out
CODE Snippet:
public boolean onTouch(View v, MotionEvent event)
{
if(event.getAction()==MotionEvent.ACTION_MOVE)
{
finX=event.getX();
finY=event.getY();
moved=true;
metrics= player.determineAngle(finX, finY);
//required angle is metrics[0]
Rotate3dAnimation rotate=new Rotate3dAnimation(metrics[0], metrics[0], weapon.getBackground().getMinimumWidth()/2, weapon.getBackground().getMinimumHeight()/2, 0f, false);
rotate.setDuration(50);
weapon.startAnimation(rotate);
rotate.setFillAfter(true);
}
else if(event.getAction()==MotionEvent.ACTION_UP){
rebound=new TranslateAnimation(0, 5, 0, 5);
reboundI=new OvershootInterpolator(10f);
rebound.setInterpolator(reboundI);
rebound.setDuration(500);
weapon.startAnimation(rebound);
}
}
return true;
}
}
I can get the transformation done by rotation ,but there is no method to initialize another animation with that transformation.Or is there any other way to achieve these 2 animations successfully.
Thanks in advance
You must be save your image after completing your RotateAnimation using onAnimationEnd() method.
Related
the rect should be alpha=0.1 once the circle touches the rect . but if statement not working . it becomes 0.1 opacity without hitting
/* js
var circle = new lib.mycircle();
stage.addChild(circle);
var rect = new lib.myrect();
stage.addChild(rect);
rect.x=200;
rect.y=300;
circle.addEventListener('mousedown', downF);
function downF(e) {
stage.addEventListener('stagemousemove', moveF);
stage.addEventListener('stagemouseup', upF);
};
function upF(e) {
stage.removeAllEventListeners();
}
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
}
if(circle.hitTest(rect))
{
rect.alpha = 0.1;
}
stage.update();
*/
The way you have used hitTest is incorrect. The hitTest method does not check object to object. It takes an x and y coordinate, and determines if that point in its own coordinate system has a filled pixel.
I modified your example to make it more correct, though it doesn't actually do what you are expecting:
circle.addEventListener('pressmove', moveF);
function moveF(e) {
circle.x = stage.mouseX;
circle.y = stage.mouseY;
if (rect.hitTest(circle.x, circle.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
stage.update();
}
Key points:
Reintroduced the pressmove. It works fine.
Moved the circle update above the hitTest check. Otherwise you are checking where it was last time
Moved the stage update to last. It should be the last thing you update. Note however that you can remove it completely, because you have a Ticker listener on the stage in your HTML file, which constantly updates the stage.
Added the else statement to turn the alpha back to 1 if the hitTest fails.
Then, the most important point is that I changed the hitTest to be on the rectangle instead. This essentially says: "Is there a filled pixel at the supplied x and y position inside the rectangle?" Since the rectangle bounds are -49.4, -37.9, 99, 76, this will be true when the circle's coordinates are within those ranges - which is just when it is at the top left of the canvas. If you replace your code with mine, you can see this behaviour.
So, to get it working more like you want, you can do a few things.
Transform your coordinates. Use localToGlobal, or just cheat and use localToLocal. This takes [0,0] in the circle, and converts that coordinate to the rectangle's coordinate space.
Example:
var p = rect.localToLocal(0, 0, circle);
if (rect.hitTest(p.x, p.y)) {
rect.alpha = 0.1;
} else {
rect.alpha = 1;
}
Don't use hitTest. Use getObjectsUnderPoint, pass the circle's x/y coordinate, and check if the rectangle is in the returned list.
Hope that helps. As I mentioned in a comment above, you can not do full shape collision, just point collision (a single point on an object).
I'm trying to make an app using libgdx. When I first launch it on my desktop, my map print well. But if I resize the window, the map is no longer completely in the screen.
But if I change the size on the beginning, the map print well. So there might be an issue with my resizing function.
In my GameScreen class I've got :
public void resize(int width, int height)
{
renderer.setSize(width, height);
}
And my renderer got this :
public void setSize (int w, int h)
{
ppuX = (float)w / (float)world.getWidth();
ppuY = (float)h / (float)world.getHeight();
}
For example, if I reduce my window, the map is too small for the window. If I extend it, the map doesn't in it.
If you have a fixed viewport, which is the case most of the time. You don't need to do anything in your resize method. The camera will fill the window to draw everything even if you resize it at runtime.
I, myself, never put anything on resize.
How do i set zoom in and zoom out when click on imageview?I want my program to react when user click on imageview must get large to some extent and can move imageview on that screen and sometime it reduce the size along when it move on touch anywhere on the screen .when click again is go resume original size what do i do?
As far as I know there are two ways.
The first way:
Make a new folder in res called 'anim'. Than make a xml file inside, for example zoomin.xml. Afterwards put the following code inside.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="5"
android:fromYScale="1"
android:toYScale="5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true">
</scale>
Make another one for zoom out, but with reversed values.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="5"
android:toXScale="1"
android:fromYScale="5"
android:toYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:fillAfter="true">
</scale>
You can change the values according to your needs. I think that they are self-explanatory.
And now in your java code.
ImageView imageView = (imageView)findViewById(R.id.yourImageViewId);
Animation zoomin = AnimationUtils.loadAnimation(this, R.anim.zoomin);
Animation zoomout = AnimationUtils.loadAnimation(this, R.anim.zoomout);
imageView.setAnimation(zoomin);
imageView.setAnimation(zoomout);
Now you only need to keep track which is the current state. And for each state execute this lines of codes:
imageView.startAnimation(zoomin);
and
imageView.startAnimation(zoomout);
For example:
imageView.setOnClickListener(new OnClickListener(){
public void onClick(View v) {
if(!pressed) {
v.startAnimation(zoomin);
pressed = !pressed;
} else {
v.startAnimation(zoomout);
pressed = !pressed;
}
}
});
The other way is described here : http://developer.android.com/training/animation/zoom.html.
You can make this by following this guide easily
http://developer.android.com/training/animation/zoom.html
shortly you should use third imageview which is invisible when the user touches any imageview you want, you can display it by using animation in the imageview which is invisible.
I've been trying to display an image which has a transparent border as the background to a control.
Unfortunately, the transparent area creates a hole in the parent form as follows:
In the above image, the form has a red background which I'd hoped to see behind my control in the transparent areas.
The code I used is as follows:
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
if (this.Image != null)
{
Graphics g = Graphics.FromImage(this.Image);
ImageAttributes attr = new ImageAttributes();
//set the transparency based on the top left pixel
attr.SetColorKey((this.Image as Bitmap).GetPixel(0, 0), (this.Image as Bitmap).GetPixel(0, 0));
//draw the image using the image attributes.
Rectangle dstRect = new Rectangle(0, 0, this.Image.Width, this.Image.Height);
e.Graphics.DrawImage(this.Image, dstRect, 0, 0, this.Image.Width, this.Image.Height,
GraphicsUnit.Pixel, attr);
}
else
{
base.OnPaint(e);
}
}
protected override void OnPaintBackground(System.Windows.Forms.PaintEventArgs e)
{
//base.OnPaintBackground(e);
}
This class is inherited from a PictureBox because I needed a control which implements OnMouseMove and OnMouseUp Events.
I've been researching most of the day without success testing out different ideas but unfortunately most only work on the full framework and not .Net CF.
Any ideas would be much appreciated.
Ah the joys of CF transparency. I could go on and on about it (and have in my blog and the Project Resistance code I did ages ago).
The gist is this. The child control has to paint it's areas, but first it has to call back up to it's parent (the Form in your case) and tell it to redraw it's background image everywhere except in the child's clipping region and then draw itself on top of that. If that sounds a bit confusing it's because it is.
For example, if you look at Project Resistance, a View (which is just a Control) draws a resistor and bands. It lies in a Form that has an image background, and that background needs to "show through" the transparent areas of the resistor:
So in the drawing code of the resistor it does this:
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
try
{
RECT rect = new RECT(this.Bounds);
// draw the blank
Infrastructure.GraphicTools.DrawTransparentBitmap(e.Graphics, m_blankImage, Bounds,
new Rectangle(0, 0, m_blankImage.Width, m_blankImage.Height));
if (m_bandsImage != null)
{
// draw the bands
Infrastructure.GraphicTools.DrawTransparentBitmap(e.Graphics, m_bandsImage, Bounds,
new Rectangle(0, 0, m_bandsImage.Width, m_bandsImage.Height));
}
}
finally
{
}
if (!Controller.TouchMode)
{
// TODO: draw in the selection arrow
// Controller.SelectedBand
}
}
Which is simple enough. The key is that it calls to it's base OnPaint, which does this:
protected override void OnPaint(System.Windows.Forms.PaintEventArgs e)
{
// this assumes we're in a workspace, on MainForm (the whole Parent.Parent thing)
IBackgroundPaintProvider bgPaintProvider = Parent.Parent as IBackgroundPaintProvider;
if (bgPaintProvider != null)
{
Rectangle rcPaint = e.ClipRectangle;
// use the parent, since it's the workspace position in the Form we want,
// not our position in the workspace
rcPaint.Offset(Parent.Left, Parent.Top);
bgPaintProvider.PaintBackground(e.Graphics, e.ClipRectangle, rcPaint);
}
}
You can see it's calling PaintBackground of the containing Form (it's Parent.Parent in this case becuse the Control is actually in a container called a Workspace - you wouldn't need to walk up twice in your case). That draws in the background image in the area you're currently seeing as the "hole"
public void PaintBackground(Graphics g, Rectangle targetRect, Rectangle sourceRect)
{
g.DrawImage(m_bmBuffer, targetRect, sourceRect, GraphicsUnit.Pixel);
}
I am trying to draw an animation. To do so I have extended View and overridden the onDraw() method. What I would expect is that each time onDraw() is called the canvas would be in the state that I left it in and I could choose to clear it or just draw over parts of it (This is how it worked when I used a SurfaceView) but each time the canvas comes back already cleared. Is there a way that I can not have it cleared? Or maybe save the previous state into a Bitmap so I can just draw that Bitmap and then draw over top of it?
I'm not sure if there is a way or not. But for my custom views I either redraw everything each time onDraw() is called, or draw to a bitmap and then draw the bitmap to the canvas (like you suggested in your question).
Here is how i do it
class A extends View {
private Canvas canvas;
private Bitmap bitmap;
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
if (bitmap != null) {
bitmap .recycle();
}
canvas= new Canvas();
bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
}
public void destroy() {
if (bitmap != null) {
bitmap.recycle();
}
}
public void onDraw(Canvas c) {
//draw onto the canvas if needed (maybe only the parts of animation that changed)
canvas.drawRect(0,0,10,10,paint);
//draw the bitmap to the real canvas c
c.drawBitmap(bitmap,
new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()),
new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()), null);
}
}
you should have a look here to see the difference between basic view and surfaceView. A surfaceView has a dedicated layer for drawing, which I suppose keeps track of what you drew before. Now if you really want to do it on a basic View, you could try to put each item you draw in an array, like the exemple of itemized overlay for the mapview.
It should work pretty much the same way
Your expectations do not jib w/ reality :) The canvas will not be the way you left it, but it blank instead. You could create an ArrayList of objects to be drawn (canvas.drawCircle(), canvas.drawBitmap() etc.), then iterate though the ArrayList in the OnDraw(). I am new to graphics programming but I have used this on a small scale. Maybe there is a much better way.