I move a button with an animation, if I use it inside a UIVIewController all work perfectly, if I try to subclassing a UIView with this animation I can't see it, the button appear into the end point but I don't see it moving.
Where is the mistake?
This is my code:
- (void) moveButton:(UIButton *)button fromPoint:(CGPoint)startPoint toPoint:(CGPoint)endPoint {
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, NULL, startPoint.x, startPoint.y);
NSMutableArray *timings = [NSMutableArray array];
NSMutableArray *keytimes = [NSMutableArray array];
// Start
[timings addObject:[self getTiming:kCAMediaTimingFunctionEaseIn]];
[keytimes addObject:[NSNumber numberWithFloat:0.0]];
// Bounce
[timings addObject:[self getTiming:kCAMediaTimingFunctionEaseIn]];
[keytimes addObject:[NSNumber numberWithFloat:1.0]];
CAKeyframeAnimation * animation;
animation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
animation.duration = 2;
animation.path = thePath;
animation.timingFunctions = timings;
animation.keyTimes = keytimes;
[[button layer] addAnimation:animation forKey:nil];
[[button layer] setPosition:CGPointMake(endPoint.x,endPoint.y)];
}
Related
I have animated a UIBezier Path to go around a circle and change its stroke color whilst doing so. When it goes all the way around, I would like it go all the way around in the opposite direction.
Here is the code that makes it go forwards:
[CATransaction begin];
{
[CATransaction setAnimationDuration: 3.0];//Dynamic Duration
[CATransaction setCompletionBlock:^{
[tutorialCircle removeFromSuperlayer];
tutorialCircle.opacity = 0.0;
strokePart.opacity = 0.0;
[strokePart removeFromSuperlayer];
}];
const double portion = 1.0 / ((double)3);
for (NSUInteger i = 0; i < 3; i++)
{
strokePart = [[CAShapeLayer alloc] init];
strokePart.fillColor = [[UIColor clearColor] CGColor];
strokePart.frame = tutorialCircle.bounds;
strokePart.path = tutorialCircle.path;
strokePart.lineCap = tutorialCircle.lineCap;
strokePart.lineWidth = tutorialCircle.lineWidth;
if (i == 0) {
strokePart.strokeColor = [UIColor greenColor].CGColor;
}
else if (i == 1) {
strokePart.strokeColor = [UIColor orangeColor].CGColor;
}
else if (i == 2) {
strokePart.strokeColor = [UIColor redColor].CGColor;
}
strokePart.strokeStart = i * portion;
strokePart.strokeEnd = (i + 1) * portion;
[tutorialCircle addSublayer: strokePart];
animation = [CAKeyframeAnimation animationWithKeyPath: #"strokeEnd"];
NSArray* times = #[ #(0.0), // Note: This works because both the times and the stroke start/end are on scales of 0..1
#(strokePart.strokeStart),
#(strokePart.strokeEnd),
#(1.0) ];
NSArray* values = #[ #(strokePart.strokeStart),
#(strokePart.strokeStart),
#(strokePart.strokeEnd),
#(strokePart.strokeEnd) ];
animation.keyTimes = times;
animation.values = values;
animation.removedOnCompletion = YES;
animation.fillMode = kCAFillModeForwards;
[animation setDelegate:self];
[strokePart addAnimation: animation forKey: #"whatever"];
}
}
[CATransaction commit];
So in my animationDidStop delegate method for the first animation, I know I'd be calling the second animation to go backwards, however, I am struggling to create the animation for this to go backwards.
Have you tried?
animation.autoreverses = YES
I am trying to create a flip transition that contains a grid of CALayer cells that flip over and 'bounce' after they have done so. However, I am encountering a weird vertical flipping issue shown in this video. Without the 'bounce' animation at the end, the animation works as expected, so it's nothing to do with the image itself, or the splicing of the image into the individual cell layers before animating.
Animation Code (for each individual CALayer cell)
#interface transitionCell : CALayer
#property (nonatomic) UIImage* startImage;
#property (nonatomic) UIImage* endImage;
#property (nonatomic, readonly) BOOL animationDidFinish;
#property (nonatomic, readonly) BOOL isAnimating;
#property (nonatomic) CGFloat zRotateFactor;
#end
#implementation transitionCell
-(void) setStartImage:(UIImage *)startImage {
self.contents = (__bridge id)startImage.CGImage;
}
-(void) startAnimationWithDuration:(CGFloat)duration { // First half of rotation
_isAnimating = YES;
CABasicAnimation* yRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation.fromValue = #(0);
yRotation.toValue = #(M_PI*0.5);
CABasicAnimation* zRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
zRotation.fromValue = #(0);
zRotation.toValue = #(zRotateMax*_zRotateFactor); // zRotateMax is M_PI*0.2 & _zRotateFactor is a value between -1 and 1.
CAAnimationGroup* rotations = [CAAnimationGroup animation];
rotations.duration = duration*0.5;
rotations.delegate = self;
rotations.removedOnCompletion = NO;
rotations.fillMode = kCAFillModeForwards;
rotations.animations = #[yRotation, zRotation];
[self addAnimation:rotations forKey:#"startRotation"];
}
-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { // Second half of rotation
if (anim == [self animationForKey:#"startRotation"] && flag) {
self.contents = (__bridge id)_endImage.CGImage;
CABasicAnimation* yRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation.toValue = #(M_PI);
yRotation.fromValue = #(M_PI*0.5);
CABasicAnimation* zRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
zRotation.toValue = #(0);
zRotation.fromValue = #(zRotateMax*_zRotateFactor);
CAAnimationGroup* rotations = [CAAnimationGroup animation];
rotations.duration = anim.duration;
rotations.removedOnCompletion = NO;
rotations.fillMode = kCAFillModeForwards;
rotations.delegate = self;
rotations.animations = #[yRotation, zRotation];
[self addAnimation:rotations forKey:#"endRotate"];
} else if (anim == [self animationForKey:#"endRotate"] && flag) { // The 'Bounce' animation (the one causing the issues)
CABasicAnimation* yRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation.toValue = #(M_PI+(M_PI*0.2));
yRotation.fromValue = #(M_PI);
CABasicAnimation* zRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
zRotation.fromValue = #(0);
zRotation.toValue = #(-zRotateMax*_zRotateFactor*0.2);
CAAnimationGroup* rotations = [CAAnimationGroup animation];
rotations.duration = 0.2;
rotations.removedOnCompletion = NO;
rotations.fillMode = kCAFillModeForwards;
rotations.delegate = self;
rotations.autoreverses = YES;
rotations.animations = #[yRotation, zRotation];
[self addAnimation:rotations forKey:#"endRotate2"];
} else if (anim == [self animationForKey:#"endRotate2"] && flag) {
_animationDidFinish = YES;
}
}
#end
Initialisation Code (In the parent UIViewController)
-(instancetype) initWithStartImage:(UIImage*)startImage endImage:(UIImage*)endImage {
if (self = [super init]) {
CGFloat baseNodeHeight = screenWidth()/baseNumberNodesWidth;
numNodesHeight = roundf(screenHeight()/baseNodeHeight);
numNodesWidth = roundf(screenWidth()/baseNodeHeight);
moveUpdateFreq = moveBaseUpdateFreq/(numNodesWidth*numNodesHeight);
cellMoveUpdateFreq = cellMoveBaseUpdateFreq/(numNodesWidth*numNodesHeight);
CGFloat const nodeWidth = screenWidth()/numNodesWidth;
CGFloat const nodeHeight = screenHeight()/numNodesHeight;
transition = (transitionType)arc4random_uniform(transitionTypeCount);
cellArray = [NSMutableArray array];
for (int x = 0; x < numNodesWidth; x++) {
[cellArray addObject:[NSMutableArray array]];
for (int y = 0; y < numNodesHeight; y++) {
transitionCell* c = [transitionCell layer];
c.frame = (CGRect){{x*nodeWidth, y*nodeHeight}, {nodeWidth, nodeHeight}};
CGRect startSubRect = {{c.frame.origin.x, screenHeight()-c.frame.origin.y-c.frame.size.height}, c.frame.size};
CGRect endSubRect = {{c.frame.origin.x, c.frame.origin.y}, c.frame.size};
c.startImage = [startImage imageFromSubRect:startSubRect];
c.endImage = [[endImage flippedVerticalImage] imageFromSubRect:endSubRect];
c.zRotateFactor = -(((CGFloat)y-((CGFloat)numNodesHeight*0.5))/(CGFloat)numNodesHeight);
[self.view.layer addSublayer:c];
[cellArray[x] addObject:c];
}
}
}
return self;
}
Any ideas what I'm doing wrong?
Well, I can only assume this is a bug, but nonetheless I have found a quick fix. By adding a xRotation animation set to go from pi to pi on the 'bounce' animation, the problem is fixed. For example, in the bounce animation code:
// Bounce animation
CABasicAnimation* yRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
yRotation.toValue = #(M_PI+(M_PI*bounceFactor));
yRotation.fromValue = #(M_PI);
CABasicAnimation* zRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
zRotation.fromValue = #(0);
zRotation.toValue = #(-zRotateMax*_zRotateFactor*bounceFactor);
// New animation, set to do nothing on the x-axis
CABasicAnimation* xRotation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.x"];
xRotation.toValue = #(M_PI);
xRotation.fromValue = #(M_PI);
CAAnimationGroup* rotations = [CAAnimationGroup animation];
rotations.duration = 0.2;
rotations.removedOnCompletion = NO;
rotations.fillMode = kCAFillModeForwards;
rotations.delegate = self;
rotations.autoreverses = YES;
rotations.animations = #[yRotation, zRotation, xRotation];
[self addAnimation:rotations forKey:#"endRotate2"];
I implemented corePlot in xcode and I'm using the pie chart. I'm trying to create a 3d flip animation while the chart reloads. Here is the code:
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5];
scaleAnimation.duration = 1.0f;
scaleAnimation.removedOnCompletion = NO;
[self.pieChart addAnimation:scaleAnimation forKey:#"scale"];
[self.pieChart reloadData];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
animation.fromValue = [NSNumber numberWithFloat:0.5];
animation.toValue = [NSNumber numberWithFloat:1.0];
animation.duration = 1.0f;
[self.pieChart addAnimation:animation forKey:#"scale"];
I didn't get desirable effects. I think what's happening is, both animations are happening at once. (Though I'm not sure that is what's happening.)
Also, is it possible to add z-depth? If so, how?
Update
I tried the follwoing:
CABasicAnimation *currentAnition = (CABasicAnimation *)anim;
if (currentAnition == self.scaleAnimation {...}
And it didn't work.
CAAnimation is KVC compliant, so we can store whether you're starting or finishing for lookup in the delegate methods:
{
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
[scaleAnimation setValue:#(YES) forKey:#"scaleAnimation"];
// set the delegate
scaleAnimation.delegate = self;
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5];
scaleAnimation.duration = 1.0f;
scaleAnimation.removedOnCompletion = NO;
[self.pieChart addAnimation:scaleAnimation forKey:#"scale"];
[self.pieChart reloadData];
}
- (void)runSecondAnimation
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale.x"];
[animation setValue:#(YES) forKey:#"secondAnimation"];
animation.delegate = self;
animation.fromValue = [NSNumber numberWithFloat:0.5];
animation.toValue = [NSNumber numberWithFloat:1.0];
animation.duration = 1.0f;
[self.pieChart addAnimation:animation forKey:#"scale"];
}
/* Called when the animation either completes its active duration or
* is removed from the object it is attached to (i.e. the layer). 'flag'
* is true if the animation reached the end of its active duration
* without being removed. */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
BOOL scaleAnimation = [[anim valueForKey:#"scaleAnimation"] boolValue];
if (scaleAnimation) {
[self runSecondAnimation];
}
BOOL secondAnimation = [[anim valueForKey:#"secondAnimation"] boolValue];
if (secondAnimation) {
[self runThirdAnimation];
}
}
And remember you have also:
/* Called when the animation begins its active duration. */
- (void)animationDidStart:(CAAnimation *)anim;
I want to rotate image in circular animation. How can I do it in a simple way?
I know it is not difficult but I'm new to iOS.
Can anybody tell me right code ?
its my solution:
- (void)startAnimation
{
[UIView animateWithDuration:.4 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
[self.loadingRingImageView setTransform:CGAffineTransformRotate(self.loadingRingImageView.transform, M_SQRT2)];
} completion:^(BOOL finished) {
if (finished)
{
[self startAnimation];
}
}];
}
[[self.<imageviewinstance> layer] addAnimation:[self rotationAnimation] forKey:nil];
Add the animation as above and the below is the animation code.
- (CABasicAnimation *)rotationAnimation
{
CABasicAnimation *rotAnim = [CABasicAnimation animationWithKeyPath:#"position"];
[rotAnim setFromValue:[NSValue valueWithCGPoint:CGPointMake(100.0, 400.0)]];
rotAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(300.0, 150.0)];
// rotAnim.duration = 5.0;
rotAnim.autoreverses = YES;
// rotAnim.repeatCount = HUGE_VAL;
rotAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
return rotAnim;
}
if the above is not worked use this
- (CABasicAnimation *)rotationAnimation
{
CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:#"transform.rotation" ];
move.delegate = self;
[move setFromValue:[NSNumber numberWithFloat:0]];
[move setToValue:[NSNumber numberWithFloat:50]];
[move setDuration:10.0f];
move.autoreverses = YES;
}
the answer of question i was wondering is ->
UIImageView *imageViewForAnimation = [[UIImageView alloc] initWithImage:imageToAnimate];
imageViewForAnimation.alpha = 1.0f;
CGRect imageFrame = imageViewForAnimation.frame;
//Your image frame.origin from where the animation need to get start
CGPoint viewOrigin = imageViewForAnimation.frame.origin;
viewOrigin.y = viewOrigin.y + imageFrame.size.height / 2.0f;
viewOrigin.x = viewOrigin.x + imageFrame.size.width / 2.0f;
imageViewForAnimation.frame = imageFrame;
imageViewForAnimation.layer.position = viewOrigin;
[self.view addSubview:imageViewForAnimation];
// Set up fade out effect
CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
[fadeOutAnimation setToValue:[NSNumber numberWithFloat:0.3]];
fadeOutAnimation.fillMode = kCAFillModeForwards;
fadeOutAnimation.removedOnCompletion = NO;
// Set up scaling
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(40.0f, imageFrame.size.height * (40.0f / imageFrame.size.width))]];
resizeAnimation.fillMode = kCAFillModeForwards;
resizeAnimation.removedOnCompletion = NO;
// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
//Setting Endpoint of the animation
CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);
//to end animation in last tab use
//CGPoint endPoint = CGPointMake( 320-40.0f, 480.0f);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
CAAnimationGroup *group = [CAAnimationGroup animation];
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
[group setAnimations:[NSArray arrayWithObjects:fadeOutAnimation, pathAnimation, resizeAnimation, nil]];
group.duration = 0.7f;
group.delegate = self;
[group setValue:imageViewForAnimation forKey:#"imageViewBeingAnimated"];
[imageViewForAnimation.layer addAnimation:group forKey:#"savingAnimation"];
I'm trying to repeat a sequence of animations, inside a LOOP, changing at each loop some parameters randomly. Here is the code. Anyone please knows why it doesn't work?
If I call it once with a button action, it works, but with a loop it doesn't.
Thanks a lot! Giuseppe
-(IBAction)startLoop:(id)sender {
for (int i=1;i<10; i++) {
[self animation2];
}
}
-(id) animation2 {
int max=500;
UIImage *myImage = [UIImage imageNamed:#"coccinella2.png"];
CALayer *myLayer = [CALayer layer];
myLayer.contents = (id)myImage.CGImage;
myLayer.bounds = CGRectMake(0, 0, 50, 60);
[myLayer setPosition:CGPointMake(arc4random()%(max), arc4random()%(max))];
[myLayer setBounds:CGRectMake(0.0, 0.0, 50.0, 60.0)];
[self.view.layer addSublayer:myLayer];
//translation1
CGPoint startPt = CGPointMake(arc4random()%(max),arc4random()%(max));
CGPoint endPt = CGPointMake(arc4random()%(max),arc4random()%(max));
CABasicAnimation *transl1 = [CABasicAnimation animationWithKeyPath:#"position"];
transl1.removedOnCompletion = FALSE;
transl1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transl1.fromValue = [NSValue valueWithCGPoint:startPt];
transl1.toValue = [NSValue valueWithCGPoint:endPt];
transl1.duration = 2.0;
transl1.fillMode = kCAFillModeForwards;
transl1.beginTime = 0;
//scale 1
CABasicAnimation *scale1 = [CABasicAnimation
animationWithKeyPath:#"transform.scale"];
scale1.removedOnCompletion = FALSE;
[scale1 setToValue:[NSNumber numberWithInt:3]];
[scale1 setDuration:2.0f];
scale1.fillMode = kCAFillModeForwards;
scale1.beginTime = 0;
//rotation1
CABasicAnimation *rotation1 = [CABasicAnimation
animationWithKeyPath:#"transform.rotation.z"];
rotation1.removedOnCompletion = FALSE;
[rotation1 setFromValue:DegreesToNumber(0)];
[rotation1 setToValue:DegreesToNumber(90)];
//rotation1.repeatCount = HUGE_VALF;
[rotation1 setDuration:2.0f];
rotation1.fillMode = kCAFillModeForwards;
rotation1.beginTime = 0;
//group
CAAnimationGroup* group = [CAAnimationGroup animation];
[group setDuration: 6.0];
group.removedOnCompletion = FALSE;
group.fillMode = kCAFillModeForwards;
[group setAnimations: [NSArray arrayWithObjects:scale1, transl1, rotation1, nil]];
[myLayer addAnimation: group forKey: nil];
}
Your code doesn't repeat the annotation 10 times but starts 10 animations right away. If your goal is to start the animations after the previous one ended you should try using an NSTimer.
You can use an NSTimer to trigger each group of animations at a different time, or you can set the beginTime on each group, with code like this:
group.beginTime = CACurrentMediaTime() + delay;
For animations, using the beginTime gives more accurate timing, since CA is run on a separate thread and doesn't stall like NSTimers if your app gets busy.