I am facing a strange behavior in UIView animation. I am developing an iPad application which is using some UIView animations.
The duration of all animation is set to 0.5. Initially on launching the application all animations are working fine. But after some continuous use no animation is happening, all UIView changes are happening quickly, just like the duration is not set in animation.
I am not sure why this is happening. Has anyone else faced this kind of issue?
Following is one of the animation I am using. Like this I am using a lot of animations but after some time none of the animation is happening but all the codes inside the animation block is working fine
[UIView animateWithDuration:0.5 animations:^{
[tempLabel setFont:titleFont.font];
[tempLabel setTransform: CGAffineTransformMakeRotation((-90 * M_PI / 180))];
tempLabel.frame = CGRectMake(2,0,23,30);
}];
From the UIView class reference, the frame property:
Changes to this property can be animated. However, if the transform property contains a non-identity transform, the value of the frame property is undefined and should not be modified. In that case, you can reposition the view using the center property and adjust the size using the bounds property instead.
Don't animate the frame when you've also set a transform. Use bounds and center instead.
The problem you have seems that you are transforming the control every time, when you apply a transformation for the first time, there is no transformation on control, but next you have a transform, in this case the next transformation may not work as you want.. You have few options to solve this as follows, I haven't tried the code it might work
tempLabel.transform = CGAffineTransformIdentity;
Put the above code before applying any transformation this will reset any transformation applied and your new transformation will be freshly applied or, you can do
tempLabel.transform = CGAffineTransformConcat(tempLabel.transform, YOUR TRANSFORM);
The above will append to your last transformation..
Hope it helps.
Thanks.
Related
I'm implementing a basic speedometer using an image and rotating it. However, when I set the initial rotation (at something like 240 degrees, converted to radians) It rotates the image and makes it much smaller than it otherwise would be. Some values make the image disappear entirely. (like M_PI_4)
the slider goes from 0-360 for testing.
the following code is called on viewDidLoad, and when the slider value is changed.
-(void) updatePointer
{
double progress = testSlider.value;
progress += pointerStart
CGAffineTransform rotate = CGAffineTransformMakeRotation((progress*M_PI)/180);
[pointerImageView setTransform:rotate];
}
EDIT: Probably important to note that once it gets set the first time, the scale remains the same. So, if I were to set pointerStart to 240, it would shrink, but moving the slider wouldn't change the scale (and it would rotate it as you'd suspect) Replacing "progress" with 240 in the transformation does the same thing. (shrinks it.)
I was able to resolve the issue for anybody who stumbles across this question. Apparently the image is not fully loaded/measured when viewDidLoad is called, so the matrix transforms that cgAffineTransform does actually altered the size of the image. Moving the update code to viewDidAppear fixed the problem.
Take the transform state of the view which you want to rotate and then apply the rotation transform to it.
CGAffineTransform trans = pointerImageView.transform;
pointerImageView.transform = CGAffineTransformRotate(trans, 240);
Hi I have a CAKeyFrameAnimation scale, that makes an object fade down from full size (1) to near nothing (0.01)
Then this is called:
- (void)animationDidStop:(CAKeyframeAnimation *)anim finished:(BOOL)flag
{
[self setHidden:YES];
}
It seems to hide the object, but not before making it re-appear again as full sized for a split second, which ruins the fade to small/nothing effect :P
How do I stop the animation from going back to frame 1 for the "animationDidStop" is called? Thanks!
I believe you need to set the fillMode property of your animations to kCAFillModeForwards. That should freeze the animations at their end time.
Another suggestion (and honestly, this is what I'd usually do) is just set the properties of the layer itself to their final position after you've set up the animation. That way when the animation is removed, the layer will still have the final properties as part of its model.
You can set .scale object property instead of CAKeyframeAnimation.
You can disable animations and set target scale after creating CAKeyframeAnimation.
You can set scale (0.1) in animationDidStop method (do not sure if it will work)
The point is to set target properties of the object. It jumps to them after finishing the animation.
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.
Hi so this is my situation up to now. I've added a UIImageView to Interface Builder and set it to a .png image of a needle (Needle.png), I've also connected it to the corresponding IBOutlet in Xcode.
In my viewDidLoad: method I set the anchor point,
- (void)viewDidLoad {
[super viewDidLoad];
[needle.layer setAnchorPoint:CGPointMake( 0.5, 1 )];
}
And I've also created a button in Interface Builder and connected it to an IBAction in Xcode, this button performs an animation block,
- (IBAction)animate {
[UIView beginAnimations:#"rotate" context:nil];
[UIView setAnimationDuration:1.0];
self.needle.transform = CGAffineTransformMakeRotation(10 * M_PI / 180);
[UIView commitAnimations];
}
So when I press the animate button my needle image rotates by 10° counter-clockwise, so thats a start. But what I really want to do it to have the needle constantly rotating itself to the correct angle based off a constantly changing value.
For example if I have a decibel value that gives me the current decibel level in the room, I'd like that needle to reflect that value (i.e. 10° == 10dB), and since this value is constantly changing I'd want my needle to rotate clockwise or counter-clockwise accordingly.
Does anyone know how I could do that? I'd also appreciate it if someone could post some source code to help me out.
But what I really want to do it to
have the needle constantly rotating
itself to the correct angle based off
a constantly changing value.
Change the rotation value when the "constantly changing value" changes.
What is the stimulus to the change of this value? Place the code to change the rotation there.
If the value is a KVO - you could use that mechanism to change the rotation when the KVO changes.
Also - sounds like you may want to do the change in an animation block, to make the needle movements more fluid. Say for example the value only changes once a second - make the change in an animation block that makes it change over the course of a second. They movement of the needle will be less "jerky" that way.
Be forewarned that if you are doing animation, set the setAnimationBeginsFromCurrentState - so if you change values (and re-animate) halfway through an existing animation, it will "do the right thing".
For an animation effect perfectly suited to an animation group approach as shown in Brad Larson's answer here, I need the animation to proceed according to inputs. Specifically touch and position of detected touches. It is easy to handle touchesMoved: and to set the position of the elements for every touch but it just isn't smooth like the core animation approach.
Imagine a marble in a grooved track. I want to push the marble along to any position at any speed in one direction or the other. The animation has to do something like that, moving a visual element along a path in response to touches. CAKeyframeAnimation has the path bit exactly but seems to always want to base the transition from frame to frame on time elapsed, not on any other factor, and in one direction.
31 January update - Thanks all for the responses so far however none is really solving the problem. I have a circular menu that is dragged to select an option. All of it needs to move together and I have worked around it by using an view that has a rotational transform applied and the inverse rotational transform applied to its subviews so the icons all rotate with appropriate ferris wheel orientation. It really looks better when the icons are animated along a slightly ovoid path though... the marble description is an attempt to make clear what I'm trying to do. Better perhaps to imagine magnets oriented to repel all travelling in a groove - move one and its neighbours move too but not necessarily in the direction that the dragged magnet moves as the path curves.
Right now the problem is one of following a simple path created with one circle but I'd really like to know how to animate objects along an arbitrary path, position controlled purely by touch with no calculations involving velocity or direction.
You may be able to use the hierarchical nature of timelines in layer trees to achieve what you’re looking for. Objects implementing CAMediaTiming, which include both CAAnimation and CALayer, inherit a timespace from their parent, which they can modify (via scaling, shifting and repeating) and propagate to their children. By setting the speed property of a layer to 0.0 and adjusting the timeOffset property manually, you can decouple that layer (and all of its sublayers) from the usual notion of time.
What you’d do in your case is define the animations for all your menu items to animate their position along your desired CGPath from time t0 to t1, with the appropriate timeOffset on each animation to keep your items appropriately spaced. Note that a beginTime of 0.0 on an animation is usually interpreted as starting from the time the animation was added to its layer, so if you want t0 to be 0.0, you'll probably have to set it to a tiny epsilon > 0.0.
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
animation.beginTime = 1e-100;
animation.duration = 1.0;
animation.fillMode = kCAFillModeBoth;
animation.removedOnCompletion = NO;
animation.path = path;
animation.calculationMode = kCAAnimationPaced;
animation.timeOffset = timeOffset;
You’d then set the speed property to 0.0 on a parent layer (containing only these menu items) and update its timeOffset to values between t0 and t1 in response to your touch events.
This approach has two potential caveats. Because you’ve taken over the nature of time on this layer subtree, you probably won’t be able to animate other properties at the same time. Additionally, if you want coasting behavior for a fast flick, you’ll probably need to animate time forward on your own.
If you are targeting iOS 4.0 or greater then you can use the new block based class methods to start animatable changes to view objects. So from your touch event you can initiate an animatable change to properties on the view:
[UIView animateWithDuration:1.0 animations:^{
yourView.alpha = 0.0; // fade out yourView over 1 second
}];
N.B. This could just as easily be a change to another property on the view, like its location. You can animate the following properties on the view this way:
#property frame
#property bounds
#property center
#property transform
#property alpha
#property backgroundColor
#property contentStretch
If you are targetting earlier versions of iOS you will need to use UIView beginAnimations and commitAnimations methods to create an animation block:
[UIView beginAnimations:nil context:context];
[UIView setAnimationDuration:1.0];
yourView.alpha = 0.0;
[UIView commitAnimations];
This stuff works really well and once you start using it, you will have to be careful you don't get addicted. ;)
Update for comment:
You can bind the position of the marble to the location of the touch event. Once you get the touchesEnded event you can then animate the location of the marble using an animation block.
velocity = distance/time. You can try by giving delay according to touches moved and time. You can calculate time between touchesBegan and touchesEnded methods.
I'm not entirely certain I understand exactly what you want to do but... Why not just draw the marble wherever the user's finger is? No animation required.
If you want to keep the marble moving after the user lets go, you need to maintain a concept of momentum and use that to animate the marble slowing down. You could use either CoreAnimation for that or a timer.
I would make a velocity calculation in touches moved, and add it to a local variable that a block can mutate via a timer.
in other words, in touches moved make a velocity calculation bearing in mind the direction of a previous velocity. In touches ended, fire a block that translates the 'marble' decaying the velocity as you disire. If the user moves the marble again, modify the local variable, this will in turn speed up the animation of the marble or slow it down/change direction depending on on the direction of the touch.