Making an iOS app and when I run the code on the simulator, the glitches are tolerable but when tested on an iPhone they are much more obvious. I'm using JHChainableAnimations to make them, and the animations lag and flash around on the screen. I would post an image but I'm not sure how to upload a gif of whats happening.
I looked into solving the glitches and the solution i found was that my background was set to a color and that I should use slow animations to figure it out, but both of those don't fit the bill. There are zero background colors in the view and the slow animations don't work (I'm assuming its because JHChainableAnimations doesn't allow slomo animations)
If this problem is a framework problem and not a different issue, then I would love for pod suggestions on good animation frameworks!
Here's the images for the code:
viewDidLoad() part 1 and viewDidLoad() part 2
Heres the code for the animations:
Code that makes a bunch of circles collapse
Code that makes check mark slide out from behind a button to confirm choice
and finally the main animation code that happens when you click the start/action button part 1 and part 2
EDIT: Here is some of the important bits of the code without images as requested:
Collapse circles:
@objc func animateCircleClose() {
guard let circle1Animator = circle1Animator else {
return
}
guard let circle2Animator = circle2Animator else {
return
}
guard let circle3Animator = circle3Animator else {
return
}
guard let circle4Animator = circle4Animator else {
return
}
guard let circle5Animator = circle5Animator else {
return
}
guard let topanimator = topanimator else {
return
}
guard let botanimator = botanimator else {
return
}
circle1Animator.make(scale: 0).animate(t: 0.8);
circle2Animator.thenAfter(t: 0.2).make(scale: 0).animate(t: 0.4);
circle3Animator.thenAfter(t: 0.4).make(scale: 0).animate(t: 0.4);
circle4Animator.thenAfter(t: 0.6).make(scale: 0).animate(t: 0.4);
circle5Animator.thenAfter(t: 0.8).make(scale: 0).animate(t: 0.4);
botanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
topanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
}
And heres the button animation:
@objc func animateHappyButton() {
guard let happyBackingAnimator = happyBackingAnimator else {
return
}
if(!selected){
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
else if(selectedHappy){
happyBackingAnimator.move(x: 20).easeOut.animate(t: 0.3);
selected = false;
happyBacking.isHidden = true;
selectedHappy = false;
}
else{
if(selectedWorried){
animateWorriedButton();
}
if(selectedSad){
animateSadButton();
}
if(selectedExcited){
animateExcitedButton();
}
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
}
And here's the big main animation function, for the sake of your eyes, I omitted all the guard let statements, but you can see them in the screenshots
@objc func animateView() {
circle1Animator.make(scale: 0.1).animate(t: 0);
circle2Animator.make(scale: 0.1).animate(t: 0);
circle3Animator.make(scale: 0.1).animate(t: 0);
circle4Animator.make(scale: 0.1).animate(t: 0);
circle5Animator.make(scale: 0.1).animate(t: 0);
button.isUserInteractionEnabled = false
let buttonAnimator = ChainableAnimator(view: button)
topanimator.completion = { [unowned self] in
self.circle1.isHidden = false;
self.circle2.isHidden = false;
self.circle3.isHidden = false;
self.circle4.isHidden = false;
self.circle5.isHidden = false;
self.excitedButton.isHidden = false;
self.happyButton.isHidden = false;
self.sadButton.isHidden = false;
self.worriedButton.isHidden = false;
circle1Animator.make(scale: 10).easeOut.animate(t: 1);
circle2Animator.make(scale: 10).easeOut.animate(t: 1);
circle3Animator.make(scale: 10).easeOut.animate(t: 1);
circle4Animator.make(scale: 10).easeOut.animate(t: 1);
circle5Animator.make(scale: 10).easeOut.animate(t: 1);
happyAnimator.move(x: -245).easeOut.animate(t: 0.3);
excitedAnimator.thenAfter(t: 0.2).move(x: -245).easeOut.animate(t: 0.3);
worriedAnimator.thenAfter(t: 0.4).move(x: -245).easeOut.animate(t: 0.3);
sadAnimator.thenAfter(t: 0.6).move(x: -245).easeOut.animate(t: 0.3);
self.tagMood.isHidden = false;
}
buttonAnimator.move(y: 50).easeInOutExpo.animate(t: 0.5)
topimg.isHidden = false;
botimg.isHidden = false;
botanimator.move(y: -458).easeOutQuart.animate(t: 0.3);
topanimator.move(y: 228).easeOutQuart.animate(t: 0.3);
worriedAnimator.move(x: 285).animate(t: 0);
excitedAnimator.move(x: 285).animate(t: 0);
happyAnimator.move(x: 285).animate(t: 0);
sadAnimator.move(x: 285).animate(t: 0);
}
So the issue was with the framework specifically, when using the JHChainableAnimations, you need to specifically pod with the following:
pod 'ChainableAnimations', :git => 'https://github.com/jhurray/JHChainableAnimations.git', :commit => '6488b3b6ff3c233013056802361d72be7f77d3ed'
The repo it self wasn't properly updated to fix the issue, but putting the above in your podfile will fix it