Mix CABasicAnimation with CGAffineTransform animation - ios

Question

I need to rotate an UIImageView continuously. To do this I found this code :
if ([self.image.layer animationForKey:#"SpinAnimation"] == nil) {
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: 2 * M_PI];
animation.duration = 90.0f;
animation.repeatCount = INFINITY;
[self.image.layer addAnimation:animation forKey:#"SpinAnimation"];
}
Then, I need to make a transform translation on the image view, animating it. If I do this :
CGAffineTransform transform = self.image.transform;
transform = CGAffineTransformTranslate(transform, 0, 350);
[UIView animateWithDuration:1.0f animations:^{
[self.view layoutIfNeeded];
self.image.transform = transform;
} completion:^(BOOL finished) {
self.isMiddleViewOpened = YES;
}];
When the animation is performed, the image float all around the view before arriving to the end point of the translation.
Thanks ☺️
EDIT
I have issue because in my second transform I edit only the y value, but the image doesn't move only on y axis. If you try this code, you'll see the issue

Answer 1

There is no way to mix both animations, you can use Core animation to do all your animation stuff.
I use this in my splash screen to rotate four image blocks and combine them into one in the end.
The animation would like this:
Code for one image block: Top left block , I call it 00 block
- (void)addSplashScreenAnimationWithCompletion:(void (^)(BOOL finished))completionBlock
{
[self addSplashScreenAnimationWithBeginTime:0 andFillMode:kCAFillModeBoth andRemoveOnCompletion:NO completion:completionBlock];
}
- (void)addSplashScreenAnimationWithBeginTime:(CFTimeInterval)beginTime andFillMode:(NSString *)fillMode andRemoveOnCompletion:(BOOL)removedOnCompletion completion:(void (^)(BOOL finished))completionBlock
{
CAMediaTimingFunction *linearTiming = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
if (completionBlock)
{
CABasicAnimation *representativeAnimation = [CABasicAnimation animationWithKeyPath:#"not.a.real.key"];
representativeAnimation.duration = 8.500; //your duration
representativeAnimation.delegate = self;
[self.layer addAnimation:representativeAnimation forKey:#"SplashScreen"];
}
CAKeyframeAnimation *_00RotationAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.rotation.z"];
_00RotationAnimation.duration = 8.500;
_00RotationAnimation.values = #[#(0.000), #(18.829), #(18.829)];
_00RotationAnimation.keyTimes = #[#(0.000), #(0.353), #(1.000)];
_00RotationAnimation.timingFunctions = #[linearTiming, linearTiming];
_00RotationAnimation.beginTime = beginTime;
_00RotationAnimation.fillMode = fillMode;
_00RotationAnimation.removedOnCompletion = removedOnCompletion;
CAKeyframeAnimation *_00OpacityAnimation = [CAKeyframeAnimation animationWithKeyPath:#"opacity"];
_00OpacityAnimation.duration = 8.500;
_00OpacityAnimation.values = #[#(0.000), #(0.497), #(0.553), #(0.759), #(0.921), #(1.000), #(0.642), #(0.341), #(0.000), #(0.000)];
_00OpacityAnimation.keyTimes = #[#(0.000), #(0.059), #(0.118), #(0.176), #(0.235), #(0.353), #(0.471), #(0.647), #(0.765), #(1.000)];
_00OpacityAnimation.timingFunctions = #[linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming, linearTiming];
_00OpacityAnimation.beginTime = beginTime;
_00OpacityAnimation.fillMode = fillMode;
_00OpacityAnimation.removedOnCompletion = removedOnCompletion;
CAKeyframeAnimation *_00ScaleXAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.x"];
_00ScaleXAnimation.duration = 8.500;
_00ScaleXAnimation.values = #[#(0.600), #(0.600), #(1.187), #(1.187)];
_00ScaleXAnimation.keyTimes = #[#(0.000), #(0.353), #(0.765), #(1.000)];
_00ScaleXAnimation.timingFunctions = #[linearTiming, linearTiming, linearTiming];
_00ScaleXAnimation.beginTime = beginTime;
_00ScaleXAnimation.fillMode = fillMode;
_00ScaleXAnimation.removedOnCompletion = removedOnCompletion;
CAKeyframeAnimation *_00ScaleYAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.y"];
_00ScaleYAnimation.duration = 8.500;
_00ScaleYAnimation.values = #[#(0.688), #(0.688), #(1.359), #(1.359)];
_00ScaleYAnimation.keyTimes = #[#(0.000), #(0.353), #(0.765), #(1.000)];
_00ScaleYAnimation.timingFunctions = #[linearTiming, linearTiming, linearTiming];
_00ScaleYAnimation.beginTime = beginTime;
_00ScaleYAnimation.fillMode = fillMode;
_00ScaleYAnimation.removedOnCompletion = removedOnCompletion;
CAKeyframeAnimation *_00TranslationXAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.translation.x"];
_00TranslationXAnimation.duration = 8.500;
_00TranslationXAnimation.values = #[#(0.000), #(107.423), #(211.936), #(211.936)];
_00TranslationXAnimation.keyTimes = #[#(0.000), #(0.353), #(0.765), #(1.000)];
_00TranslationXAnimation.timingFunctions = #[linearTiming, linearTiming, linearTiming];
_00TranslationXAnimation.beginTime = beginTime;
_00TranslationXAnimation.fillMode = fillMode;
_00TranslationXAnimation.removedOnCompletion = removedOnCompletion;
CAKeyframeAnimation *_00TranslationYAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.translation.y"];
_00TranslationYAnimation.duration = 8.500;
_00TranslationYAnimation.values = #[#(0.000), #(390.498), #(476.237), #(476.237)];
_00TranslationYAnimation.keyTimes = #[#(0.000), #(0.353), #(0.765), #(1.000)];
_00TranslationYAnimation.timingFunctions = #[linearTiming, linearTiming, linearTiming];
_00TranslationYAnimation.beginTime = beginTime;
_00TranslationYAnimation.fillMode = fillMode;
_00TranslationYAnimation.removedOnCompletion = removedOnCompletion;
}
The above method contains series of animations like rotating, opacity changin,,scaling along x and y axis,translating along x and y axis.
You need to subclass the UIImageView or UIView and put the animation in there.
You can call the above method like:
//Here _splashView can be UIView or UIImageView
[_splashView addSplashScreenAnimationWithCompletion:^(BOOL finished) {
//Do your stuff after animation is completed
}];
You can use repeatCount for CAKeyFrameAnimation too, and you should give HUGE_VALF to get the infinity time rotation.