I know the code to make an image grow in size is:
imageView.transform = CGAffineTransformMakeScale(5f, 5f);
But what can I add to this to make that effect take several seconds?
The intended effect is for it to appear as though the app user is slowing getting close to or zooming in on a painting on a wall, so I want to start with the image at a small size and then have it slowly get larger over the course of, maybe, 3 seconds.
Just wrap it in an animation block like so:
[UIView animateWithDuration:3.0 ///< or however many seconds you want
animations:^{
imageView.transform = CGAffineTransformMakeScale(5f, 5f);
}];
Related
I have animated an image to drop straight from the top of the screen to the bottom and I want to be able to determine the time it takes for the image to reach a certain point on the screen. Normally, this would be easy to do by multiplying the y-coordinate of the point you want by the duration of the animation, and then dividing it by the total amount of 'pixels' your image moves from start to finish. However, objective-c animations start off slowly, accelerate, and then decelerate before stopping--which means I cannot use this method to calculate the time it takes. So is there any way I can determining time it takes a downward-moving animation to reach a spot?
Edit: With animations, supposedly there's no way of determining the point of an object at any point during the animation--the only information available, which you provide, is the beginning point and end point
If you are using animateWithDuration:delay:options:animations:completion: you can set the options parameter to UIViewAnimationOptionCurveLinear. The default has a funky curve but UIViewAnimationOptionCurveLinear is just what it sounds like; linear. No speed ups, no speed downs. Also, yes, there is a way to access the location of the animated view. You access its presentation layer (the layer used to present animations) and use its frame's position.
EDIT: Here's an example of block based animation that computes the distance from a view to the destination using the Pythagorean theorem and animates the view to the destination with a linear curve.
UIView* view = [[UIView alloc] init];
CGPoint destination = CGPointZero;
[UIView animateWithDuration: sqrt(pow(view.frame.origin.x - destination.x, 2) + pow(view.frame.origin.y - destination.y, 2)) / pixelsPerSecondVelocity
delay: 0
options: UIViewAnimationOptionCurveLinear
animations:^(void) {
view.frame = CGRectMake(destination.x,destination.y,view.frame.size.width,view.frame.size.height);
}
completion:^(BOOL finished) {
// nothing
}];
If you are targeting below iOS 4 you can just add the code below after the begin but before the commit.
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
Just wondering how easy to do something like this in Iphone.
will Like to how to make the needle move
Thanks for reading and comments
You should be able to put the needle in an UIImageView. Every view now has an associated transformation, this is basically a matrix, which decides how original points are mapped to the screen. There are quite simple ways to do a simple manipulation of this:
UILabel *lblTest = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
lblTest.text = #"Testing";
[view addSubview:lblTest];
lblTest.transform = CGAffineTransformMakeRotation(M_PI / 4.0);
will result in the label being rotated by 45 degrees (which is a quarter of PI in radians; you can convert degrees to radians by multiplying by M_PI and dividing by 180.0). Using this you already have the methods at hand to animate the needle whenever a new data point comes in.
Note that this can also be animated:
[UIView animateWithDuration:5.0 animations:^{
lblTest.transform = CGAffineTransformMakeRotation(M_PI_4);
}];
This would slowly rotate the view to 45 degrees over the course of 5 seconds. There are some tutorials out there for animations, e.g. How to use UIView animation tutorial. And the framework already allows for some advanced things, e.g.:
[UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationCurveEaseInOut|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^{
lblTest.transform = CGAffineTransformMakeRotation(M_PI_4);
} completion:^(BOOL finished) {
}];
Will "smooth" beginning and end of the rotation, automatically reverse back and repeat this over and over. This results in the label "wiggeling" back and forth after waiting for 1 second.
You can use this to introduce some smooth effects when jumping between values. If you for example sample data only every 250ms, you might use that time to introduce some animation.
Very easy if you know what you're doing - apply A-weighting filter, RMS, apply time weighting filter, convert to dB. The major problem is calibrating the microphone.
However, if you haven't done audio processing with biquads before and you don't know anything about it, it's probably not that easy.
It depends how much experience you have in objc :)
But representing analog value with a gauge like this
is not too complicated.
This link for example should get you started...
Is there an easy way to have animation overshoot its target and then come back?
So let's say I would like to scale a circle from 50% to 110% then back to 100%, creating an almost cartoony effect.
I think Flash or some jQuery plugin has something like this built-in as an easing option. Does iOS have anything similar or does it need to be done manually?
You don't have to do it manually. You can do it almost automatically with UIView animation methods.
You can set your target size to 110%, and set the animation to reverse and "repeat". You set the repeat count to 0.58 in this case. That is, do half of a full out and back cycle, then 1/6 of that more.
That's not quite all there is to it. If you just do that, after the animation completes, it would snap back to 110%. So you need to set it back to 100% to keep it at the target position.
Like this:
// make it 50% size initially; maybe you already did that
circleView.transform = CGAffineTransformMakeScale(0.5,0.5);
[UIView animateWithDuration:1.0 / 0.58 // actual duration 1.0s
animations:^{
[UIView setAnimationRepeatCount:0.58];
[UIView setAnimationRepeatAutoreverses:YES];
circleView.transform = CGAffineTransformMakeScale(1.1,1.1);
}
completion:^(BOOL finished){
circleView.transform = CGAffineTransformIdentity;
}
]
You'll have to do it manually. Take a look at CAKeyframeAnimation. You can specify different values to use at different points in the animation. Easing is supported by setting the timingFunctions property. The hardest part will be figuring out the right values to get the effect you want.
It's just two animations -- start the second one in a block when the first is complete. The easing options have to do with how they accelerate/decelerate into the animation.
Here's the basic idea
http://objcolumnist.com/2010/09/19/core-animation-using-blocks/
In your code, you would want to start the next animation in the finish block.
How can i scale an image every second by using an integer??
I want to do something like this:
I'l have a time which will decrese 0,025 from an integer that i will use to scale my image.
I will also have another timer which would scale the image.
I want the second timer to do something like that:
MyImage.image.size.width * MyInteger
MyImage.image.size.hight * MyInteger
How can i make the scaling animation run smooth like the CGTransform Animations?
I think it's far easier to figure out the duration and the target scale factors than your suggested way. Try this instead:
[UIView animateWithDuration:1.0
animations:^{
turnDeviceView.transform =
myImageView.transform =
CGAffineTransformMakeScale(0.2, 0.2);
}];
You can even trigger this animation every second, as long as you set the duration less than a second. You can subtract a value from the scale factors to get in the progression you need.
I'm using UIView animation blocks to animate CALayer properties (backgroundColor in this case) on multiple layers on the display at once.
All layers are opaque, and I'm animating everything in one block, essentially like this
[UIView beginAnimations:#"outer" context:nil];
float duration = .25;
float offset = 0.0;
for( NSArray *viewsInPass in viewQueue ) {
for( UIView *innerView in viewInPass ) {
[UIView beginAnimations:#"inner" context:nil];
[UIView setAnimationDelay:offset];
[UIView setAnimationDuration:duration];
[innerView.layer setBackgroundColor:[newColor CGColog]];
[UIView commitAnimations];
}
offset += duration;
}
[UIView commitAnimations];
Once this has 4-5 concurrent layers animating their background color it get very choppy and the device essentially starts missing its render rate entirely and just freezes to the end of the remaining animations. All views do not overlap and they are all opaque, and are generally about 20x20 pixels.
I was a little shocked at how non-performant this is, especially after reading so many gratifying things about Quartz 2D etc. I feel like I must be missing something fundamental here!
Help!
Opaqueness in the views is the single biggest performance impact - if you can keep them from overlapping and entirely opaque through the whole rendering process (i.e. no transparency anywhere in that view sequence, including the background), you'll get slightly better perf.
I managed to get a single large animation up at ~30 fps (i.e. whole screen), but ran into memory limitations (original iPhone/iPod) that ultimately killed me beyond that. If you want more than about what you're getting there, you'll need go into OpenGL land - either through a gaming framework or directly. The overhead of the objective-C calls in that loop to enable changing the offset at the same time that you're cycling through images will ultimately kill you.
Edit: [removed]
Since you have each animation start as the previous one ends, you could start each in an NSTimer or the delegate didFinish callback instead of queueing all the animations at once. That would put less demand on the animation system.
You should try to make sure that no views are queued with different colors at the same time.
It turns out the issue is that all you need to add some sort of epsilon between the offsets you start with. You end up with n*2 animating at the tail of each pass and the start of the next just for an instant. For some reason this makes the animation system barf even if it's just a processing slice they share.
Making it be
offset += duration * 1.05;
resolved the jerkiness between passes that clogged up the animations.