IOS/Objective-c: code reduction within animations - ios

I have this simple animation that fades in several labels, one at a time. But I wonder if it is possible to reduce the code with this logic?
[UIView animateWithDuration:0.50f animations:^{
[_latLabel setAlpha:0.9f];
[_firstLat setAlpha:0.9f];
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.50f animations:^{
[_lonLabel setAlpha:0.9f];
[_firstLon setAlpha:0.9f];
}completion:^(BOOL finished) {
[UIView animateWithDuration:0.50f animations:^{
[_speedLabel setAlpha:0.9f];
[_firstSpeed setAlpha:0.9f];
}completion:^(BOOL finished) {
[UIView animateWithDuration:0.50f animations:^{
[_realNorthLabel setAlpha:0.9f];
[_firstReal setAlpha:0.9f];
}completion:^(BOOL finished) {
[UIView animateWithDuration:0.50f animations:^{
[_magneticNorthLabel setAlpha:0.9f];
[_firstMagnetic setAlpha:0.9f];
}];
}];
}];
}];
}];

Considering the need to perform operation on 2 label objects while executing any single section of the animation block, create a dictionary structure wherein section indexes define the chronological order of the sections animations to be performed & each section index contains an array of label objects.
A simple iterating loop over this structure christened here as dictionaryOfSectionedLabels can help achieve the desired alternate animation implementation.
NSDictionary<NSNumber *, NSArray *> *dictionaryOfSectionedLabels = #{ #0: #[_latLabel, _firstLat],
#1: #[_lonLabel, _firstLon],
#2: #[_speedLabel, _firstSpeed],
#3: #[_realNorthLabel, _firstReal],
#4: #[_magneticNorthLabel, _firstMagnetic]
};
for (NSUInteger i = 0; i < dictionaryOfSectionedLabels.allKeys.count; i++) {
[UIView animateWithDuration:0.5 delay:0.5*i options:UIViewAnimationOptionLayoutSubviews animations:^{
UILabel *firstLabel = [dictionaryOfSectionedLabels[#(i)] firstObject];
UILabel *secondLabel = [dictionaryOfSectionedLabels[#(i)] lastObject];
firstLabel.alpha = 0.9f;
secondLabel.alpha = 0.9f;
} completion:nil];
}

Creating an NSDictionary of your labels can be tedious and confusing code to read in the future. I'd recommend you just create a method.
-(void)customFadeForLabel:(UILabel *)theLabel withDelay:(float)delayAmount {
[UIView animateWithDuration:0.50f
delay:delayAmount
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[theLabel setAlpha:0.9f];
}completion:nil];
}
Then just call it as needed with delays
[self customFadeForLabel:_latLabel withDelay:0.00f];
[self customFadeForLabel:_firstLat withDelay:0.00f];
[self customFadeForLabel:_lonLabel withDelay:0.50f];
[self customFadeForLabel:_firstLon withDelay:0.50f];
[self customFadeForLabel:_speedLabel withDelay:1.00f];
[self customFadeForLabel:_firstSpeed withDelay:1.00f];
[self customFadeForLabel:_realNorthLabel withDelay:1.50f];
[self customFadeForLabel:_firstReal withDelay:1.50f];
[self customFadeForLabel:_magneticNorthLabel withDelay:2.00f];
[self customFadeForLabel:_firstMagnetic withDelay:2.00f];

Related

Continous fade in and fade out

Im trying to fade in and out of a light node I have created I just dont know where to call the function accordingly so it will continously fade in and out. Never tried animating anything here is what I have.
- (void)fadeOutIn:(UIView *)view duration:(NSTimeInterval)duration
{
[self enumerateChildNodesWithName:#"//*" usingBlock:^(SKNode *node, BOOL *stop) {
if ([node.name isEqualToString:#"light1"]) {
[UIView animateKeyframesWithDuration:5 delay:2 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationCurveEaseInOut animations:^{
node.alpha = 0;
} completion:^(BOOL finished) {
}];
}
}];
}
where should I call this function?that is fades in and out continously?
Should it be called within an action?
Thank You
Use this for Continue fade in out.
-(void)viewDidAppear:(BOOL)animated{
[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction animations:^{
node.alpha = 0;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:^{
node.alpha = 1;
} completion:nil];
}];
}
-(void) viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[objAnimate setAlpha:1.0];
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
[objAnimate setAlpha:0.0];
} completion:nil];
}
This will create continuous fade in and out for your object when it appears. If you want to create programmatically a custom object and then use this code then do it after your custom object is added in your view as below (example):
objAnimate = [[UILabel alloc] initWithFrame:CGRectMake(20, 50, 200, 40)];
objAnimate.backgroundColor = [UIColor lightGrayColor];
[objAnimate setAlpha:1.0];
[self.view addSubview:objAnimate];
[UIView animateKeyframesWithDuration:2.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse animations:^{
[objAnimate setAlpha:0.0];
} completion:nil];
The view starts animating as soon as its added in your view.

UIView setHidden:NO like dropdown

I have a UIView which is initially hidden. I need to setHidden:NO (visible) with dropdown effect...
There's my simple code without effect
-(IBAction)btnAbrirDestaquesClick:(id)sender {
[self.viewDestaques setHidden:NO];
}
A simpler alternative to UIDynamicAnimator in iOS 7 is Spring Animation (a new and powerful UIView block animation), which can give you nice bouncing effect with damping and velocity:
[UIView animateWithDuration:duration
delay:delay
usingSpringWithDamping:damping
initialSpringVelocity:velocity
options:options animations:^{
//Animations
[self.viewDestaques setHidden:NO];
}
completion:^(BOOL finished) {
//Completion Block
}];
If you simply want to animate it try something like this:
[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.viewDestaques.frame = CGRectMake(0, 0, 320,30);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.5 delay:2.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.viewDestaques.frame = CGRectMake(0, -30, 320,30);
} completion:^(BOOL finished) {
}];
}];
It worked for me:
-(IBAction)btnAbrirDestaquesClick:(id)sender {
[self.viewDestaques setTranslatesAutoresizingMaskIntoConstraints:YES]; //respeita o frame que eu setar, independentemente das constraints
[self.viewDestaques setFrame:CGRectMake(self.viewDestaques.frame.origin.x, self.viewDestaques.frame.origin.y, self.viewDestaques.frame.size.width, 0)];
[self.viewDestaques setHidden:NO];
while (self.viewDestaques.frame.size.height < self.frameViewDestaquesOriginal.size.height) {
[UIView animateWithDuration:2.0 animations:^{
[self.viewDestaques setFrame:CGRectMake(self.viewDestaques.frame.origin.x, self.viewDestaques.frame.origin.y, self.viewDestaques.frame.size.width, self.view.frame.size.height + 10)];
}completion: ^(BOOL completed){
}];
}
}

Create UIView Animation that will loop after the completion method is run

I'm having a bit of trouble. I've set my UIView Animation to repeat itself infinitely, however it does this before the animation starts it's completion function. I want it to wait until after the completion function fully runs because I want to run multiple animations. Any idea how to do this? If not is there a different way I can accomplish the same thing?
I'll post my code below:
-(void) createBlueControlAnimation:(int)messageCount{
if(messageCount == 0) {
return;
}
[blueControl setContentOffset:CGPointMake(0, 0)];
[UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionRepeat
animations:^{
[blueControl setContentOffset:CGPointMake(screenWidth, 0)];
} completion:^(BOOL finished){
if(messageCount >= 2){
[UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
animations:^{
[blueControl setContentOffset:CGPointMake(screenWidth * 2, 0)];
} completion:^(BOOL finished){
if(messageCount == 3) {
[UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
animations:^{
[blueControl setContentOffset:CGPointMake(screenWidth * 3, 0)];
}completion:^(BOOL finished){
[self scrollAnimationToStart];
}];
}else{
[self scrollAnimationToStart];
}
}];
}else{
[self scrollAnimationToStart];
}
}];
}
-(void) scrollAnimationToStart {
[UIView animateWithDuration:0.5 delay:2 options:UIViewAnimationOptionAllowAnimatedContent
animations:^{
[blueControl setContentOffset:CGPointMake(0, 0)];
} completion:^(BOOL finished){}];
}
So based on the number of messages I want the animation to continue running, and then when it gets to the last message, loop back to the first message and then restart the animation. However right now it just loops infinitely between the first and the second message. Any ideas on how to fix this would be greatly appreciated, thanks.
Firstly: You should create separate consts for anything that is in code.
extern NSTimeInterval const animationDuration;
NSTimeInterval const animationDuration = 0.5;
extern NSTimeInterval const animationDelay;
NSTimeInterval const animationDelay = 2;
Secondly: intent your code in reasonable way, it's quite hard to read what you've pasted. Use one method and push every repeatable part of code into another method.
- (void)createBlueControlAnimation:(NSUInteger)messageCount {
if (messageCount == 0) {
return;
}
__weak typeof(self) weakSelf = self;
[self offsetBlueControl:0];
[UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
[weakSelf offsetBlueControl:screenWidth];
} completion:^(BOOL finished) {
if (messageCount < 2) {
[self scrollAnimationToStart];
} else {
[UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
[weakSelf offsetBlueControl:screenWidth * 2];
} completion:^(BOOL finished) {
if (messageCount != 3) {
[self scrollAnimationToStart];
} else {
[UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
[weakSelf offsetBlueControl:screenWidth * 3];
} completion:^(BOOL finished) {
[self scrollAnimationToStart];
}];
}
}];
}
}];
}
- (void)scrollAnimationToStart {
[UIView animateWithDuration:animationDuration delay:animationDelay options:UIViewAnimationOptionAllowAnimatedContent animations:^{
[blueControl setContentOffset:CGPointMake(0, 0)];
} completion:^(BOOL finished) {}];
}
- (void)offsetBlueControl:(CGFloat)xOffset {
[blueControl setContentOffset:CGPointMake(xOffset, 0)];
}
I should mention here that this animation block is in fact similar everywhere. I'd set it as a separate method also.
Thirdly, keep same way of spacing everywhere (eg check out https://github.com/NYTimes/objective-c-style-guide).
That's all about code, the quality, readibility etc. I'd set it as comment, but there's too much code in my response, so it has to be an answer.
I don't fully understand what do you want to do. As far as I understood:
You have a UI element, called BlueControl.
You want to move this element.
Basing on some counter you want to move your view by some width (btw I advise to switch to NSIntegers from ints and use unsigned option, so NSUInteger etc). The move steps:
3.1. Move button right during 0.5s
3.2. Wait 2 seconds if counter is large enough, otherwise end step 3
3.3. Increase counter, repeat step 3.
You want to repeat the process infinitely.
Is that right? I need to understand the problem to edit this answer and paste a full response here.

How do I have text fade in to a UILabel?

Right now I have an IBAction for a button which generates a random number with each number assigned to display text in a UILabel. Rather than just appear, I would like the text to fade in or any other interesting animation would be cool too. Does anyone know a simple way to make this happen?
Right now I just use
labelMain.text = #"my text";
I know this is a bit stale (11 months old), but I think it's worth mentioning an alternative to the other approaches posted, which I feel is a better solution.
Make use of the UIView transitionWithView:duration:options:animations:completion class-level method, like this:
NSTimeInterval duration = 0.5f;
[UIView transitionWithView:labelMain
duration:duration
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
labelMain.text = #"new value";
} completion:nil];
This will cross-fade from the previous value of labelMain.text to "new value".
This approach works on other view values as well, such as changing the image of a UIImageView, for instance.
See Apple's docs on the topic.
The following code will give you fading effect on your label.
- (IBAction)buttonClicked:(UIButton *)sender
{
labelMain.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
animations:^{ labelMain.alpha = 1;}
completion:nil];
}
label.text = #"old text";
[UIView animateWithDuration:0.4 animations:^{
label.alpha = 0.0f;
} completion:^(BOOL finished) {
label.text = #"next text";
[UIView animateWithDuration:0.4 animations:^{
label.alpha = 1.0f;
} completion:^(BOOL finished) {
NSLog(#"finished transition");
}];
}];
Try this:
[labelMain setAlpha:0];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.8];
[labelMain setAlpha:1];
[UIView commitAnimations];
Changing the duration is pretty simple - just adjust the value 0.8 in the code.
// fade out the current value
[UIView animateWithDuration:0.2
delay:0
options:0
animations:^{
labelMain.alpha = 0.0f;
}
completion:^(BOOL finished) {
// set the new value and fade in
labelMain.text = newValue;
[UIView animateWithDuration:0.2
delay:0
options:0
animations:^{
labelMain.alpha = 1.0f;
}
completion:nil];
}];
This will look like cross fade animation
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseOut
animations:^{
labelMain.alpha = 0;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn
animations:^{ labelMain.alpha = 1;}
completion:nil];
} completion:nil];

UIViewAnimation plays instantly, delay is ignored

I have a simple UIViewAnimation that is called once my view is loaded.
However no matter what I place as the value for delay, it is ignored and the animation plays instantly.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:100.0];
[UIView setAnimationDelay:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(faceRight:finished:context:)];
_chooseLabelContainer.center = CGPointMake(originalCenter.x, 0 - _chooseLabelContainer.frame.size.height);
[UIView commitAnimations];
Update: As a test I've mangeled this scenario and below the non-delayed animation happens instantly, but the one within the dispatch queue animates overtime as expected!
UIView* objectToAnimate = self.hudController->_chooseLabelContainer;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 2 * NSEC_PER_SEC), dispatch_get_current_queue(), ^{
[UIView animateWithDuration:5.0 delay:2.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
NSLog(#"Start Dispatch %#", NSStringFromCGPoint( objectToAnimate.center ) );
objectToAnimate.center = CGPointMake(objectToAnimate.center.x, objectToAnimate.center.y+90);
}completion:^(BOOL done){
NSLog(#"Done Dispatch");
}];
});
[UIView animateWithDuration:5.0 delay:2.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
NSLog(#"Start %#", NSStringFromCGPoint( objectToAnimate.center ) );
objectToAnimate.center = CGPointMake( objectToAnimate.center.x, objectToAnimate.center.y+30);
}completion:^(BOOL done){
NSLog(#"Done");
}];
This might not solve your problem, but as of iOS 4 Apple recommends you use UIView animation blocks:
[UIView animateWithDuration:100.0 delay:2.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
_chooseLabelContainer.frame = CGPointMake(originalCenter.x, 0 - _chooseLabelContainer.frame.size.height);
}completion:^(BOOL done){
[self faceRight:finished:context]; //will of course generate errors since I don't know what arguments to pass.
}];

Resources