I am trying to figure out how to set my tabbaritem icon(image) to 0 so I can give it a fade animation once it loads onto the screen... but I just don't know how to do it..
this is how I am adding the images to the tabbar..
- (void)viewDidAppear:(BOOL)animated
{
self.button0.image = [UIImage imageNamed:#"icon1.png"];
self.button1.image = [UIImage imageNamed:#"icon2.png"];
self.button2.image = [UIImage imageNamed:#"icon3.png"];
self.button3.image = [UIImage imageNamed:#"icon4.png"];
self.button4.image = [UIImage imageNamed:#"icon5.png"];
self.button5.image = [UIImage imageNamed:#"icon1.png"];
}
I will animate them with a method that looks something like this
[UIView animateWithDuration:0.3f
delay:0.0f
options:UIViewAnimationOptionCurveEaseOut
animations:^{
// Do your animations here
}
completion:^(BOOL finished){
if (finished) {
// Do your method here after your animation.
}
}];
any help would be greatly appreciated.
Update this is my latest attempt thats not working yet..
buttonImage0.image = [UIImage imageNamed:#"icon1.png"];
buttonImage0.alpha = 0.0;
self.button0.image = buttonImage0.image;
[UIView animateWithDuration:0.1f
delay:0.0f
options:UIViewAnimationOptionTransitionNone
animations:^{
// Do your animations here.
buttonImage0.alpha = 1.0;
}
completion:^(BOOL finished){
if (finished) {
// Do your method here after your animation.
}
}];
UIButton is a subclass of UIView. UIView has an alpha property.
Try:
self.button0.alpha = 0.0;
self.button1.alpha = 0.0;
self.button2.alpha = 0.0;
self.button3.alpha = 0.0;
self.button4.alpha = 0.0;
self.button5.alpha = 0.0;
in your viewDidAppear;
Then put your easing function in the animateWithDuration routine using the same alpha property!
Related
I am trying to make a uibutton that has an image in it pulsate slowly by changing the alpha level back and forth once the view loads...
currently I am doing this but it does nothing....
-(void)loopdyloop
{
while ( myCount < 1000 )
{
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut
animations:^{
iconButton.alpha = 0.0;
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"animated");
}
}];
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut
animations:^{
iconButton.alpha = 1.0;
} completion:^(BOOL finished) {
if (finished) {
NSLog(#"animated");
}
}];
myCount++;
}
}
this method is called from the viewdidload method,
pretty crude I know but its my best attempt, if you have any idea on how I could achieve this it would be greatly appreciated.
How about applying this in your button layer in viewDidLoad:
CABasicAnimation *pulseAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
pulseAnimation.duration = .5;
pulseAnimation.toValue = [NSNumber numberWithFloat:1.1];
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pulseAnimation.autoreverses = YES;
pulseAnimation.repeatCount = FLT_MAX;
[YOURButton.layer addAnimation:pulseAnimation forKey:nil];
and you can experiment with it.
If you want it to repeat forever you could add the animation options to auto reverse and repeat, like this:
[UIView animateWithDuration:3.0
delay:0.0f
options:UIViewAnimationCurveEaseOut |
UIViewAnimationOptionRepeat |
UIViewAnimationOptionAutoreverse
animations:^{
iconButton.alpha = 0.0;
}
completion:^(BOOL finished) {
// You could do something here
}];
It will cause the alpha to first animate to 0.0, then back to the original (1.0) and then do those two things over and over and over...
Is there a way to do the following without an instant hide/unhide? Or do I have to make everything a separate view or something complicated? A simple fade in fade out like the modal transition style is all I'm looking for.
-(IBAction)someMethod
{
UIButton.hidden = NO;
tableView.hidden = NO;
}
-(void)viewDidLoad
{
UIbutton.hidden = YES;
tableView.hidden = YES;
}
[UIView animateWithDuration:2.0f
animations:^ {
UIButton.alpha = 1;
UIButton.hidden = NO;
tableView.alpha = 1
tableView.hidden = NO;
}];
Do the opposite for hide and change the duration to your need.
You could animate the alpha value:
[UIView animateWithDuration:0.5f animations:^{
button.alpha = 0.0f;
tableView.alpha = 0.0f;
}];
and it's counterpart
[UIView animateWithDuration:0.5f animations:^{
button.alpha = 1.0f;
tableView.alpha = 1.0f;
}];
I have an UIImageView that I want to fade in.
Is there a way to enable that on an underlying UIViewController?
I have translated the simplest answer, though they all work, C# .NET for the MonoTouch users:
public override void ViewDidAppear (bool animated)
{
base.ViewDidAppear (animated);
UIView.BeginAnimations ("fade in");
UIView.SetAnimationDuration (1);
imageView.Alpha = 1;
UIView.CommitAnimations ();
}
Initially set the alpha of your imageview as 0 as imageView.alpha = 0;
- (void)fadeInImage
{
[UIView beginAnimations:#"fade in" context:nil];
[UIView setAnimationDuration:1.0];
imageView.alpha = 1.0;
[UIView commitAnimations];
}
Change the animation duration to what ever length you want.
UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"myImage.png"]];
myImageView.center = CGPointMake(100, 100);
myImageView.alpha = 0.0;
[self.view addSubview:myImageView];
[UIView animateWithDuration:5.0 animations:^{
myImageView.alpha = 1.0;
}];
this simple code:
[UIView animateWithDuration:5.0 animations:^{
theImage.alpha = 1.0;
}];
the UIImage is in the view and is connected via an IBOutlet
you can also, set the alpha from the utility panel.
Use below in your UIViewController
// add the image view
[self.view addSubview:myImageView];
// set up a transition animation
CATransition *animate = [CATransition animation];
[animate setDuration:self.animationDelay];
[animate setType:kCATransitionPush];
[animate setSubtype:kCATransitionFade];
[animate setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[self layer] addAnimation:animate forKey:#"fade in"];
I would use UIView's +transitionWithView:duration:options:animations:completion:
It is very efficient and powerful.
[UIView transitionWithView:imgView duration:1 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
imgView.image = [UIImage imageNamed:#"MyImage"];
} completion:nil];
You can use this code:
Fade In Animation:
self.yourComponent.alpha = 0.0f;
[UIView beginAnimations:#"fadeIn" context:nil];
[UIView setAnimationDuration:1.0]; // Time in seconds
self.yourComponent.alpha = 1.0f;
Fade Out Animation:
self.yourComponent.alpha = 1.0f;
[UIView beginAnimations:#"fadeOut" context:nil];
[UIView setAnimationDuration:1.0]; // Time in seconds
self.yourComponent.alpha = 0.0f;
self.yourComponent can be a UIView, UIImageView, UIButton or any other component.
Swift version
func fadeIn(){
UIView.beginAnimations("fade in", context: nil);
UIView.setAnimationDuration(1.0);
imageView.alpha = 1.0;
UIView.commitAnimations();
}
I'm having difficulty working with the animation blocks. I'm trying to have the first animation change the alpha of an image so that it flashes, then after 10 seconds disappears. the firstAnimation then moves to secondAnimation which does the same thing only to a different image. the process then repeats itself infinitely.
I've been working w/ this for a while now and cannot make it repeat infinitely. Another problem I had was having this animation process delay - so that it begins after 20 seconds, enough time for an audio file to play.
- (void) firstAnimation {
UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear;
[UIView animateWithDuration:1.0 delay:10.0 options:options animations:^
{
myImage.alpha = 0.0;
myImage.alpha = 1.0;
}
completion:^(BOOL finished){
[self secondAnimation];
}
];
}
thanks as always, for any help. I've searched for example code and tutorials but all I found is basically what I'm doing in the code above.
I think you have to set the initial value of your alpha outside the animation block and only the value you want it to animate to inside the block.
UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear;
myImage.alpha = 0.0;
[UIView animateWithDuration:1.0 delay:10.0 options:options animations:^
{
myImage.alpha = 1.0;
}
animateImageWithCount:(int)aCount{
if( aCount >= [imageArray count]){
NSLog(#"Done all images");
return;
}
UIImage *myImage = [ImageArray objectAtIndex:aCount];
UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear;
myImage.alpha = 0.0;
[UIView animateWithDuration:1.0 delay:10.0 options:options animations:^{
myImage.alpha = 1.0;
}
completion:^(BOOL finished){
[self animateImageWithCount:(aCount+1)];
}];
}
I'm doing this to learn how to work with Core Animation animatable properties on iPhone (not to learn how to crossfade images, per se).
Reading similar questions on SO leads me to believe it can be done by animating the .contents property of the UIImageView's layer like so:
UIImage *image1 = [UIImage imageNamed:#"someImage1.png"];
UIImage *image2 = [UIImage imageNamed:#"someImage2.png"];
self.imageView.image = image1;
[self.view addSubview:self.imageView];
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.duration = 5.0;
self.imageView.layer.contents = image2;
[self.imageView.layer addAnimation:crossFade forKey:#"animateContents"];
Did I get a detail wrong or is this not possible.
Update: the above code produces a blank UIImageView. When I change this line:
self.imageView.layer.contents = image2.CGImage;
...I can see the image now but it does not fade in, it just appears instantly.
You were almost there.
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
[self.imageView.layer addAnimation:crossFade forKey:#"animateContents"];
Note that the animation is independent of the actual values/contents of the UIImageView. Therefore you'll need to
self.imageView.image = image2;
... to set the final result for your image.
I found this somewhere - it works great.
Swift
UIView.transition(with: imageView, duration: 0.33, options: .transitionCrossDissolve, animations: {
imageView.image = image
}, completion: nil)
Objc
UIImage * toImage = [UIImage imageNamed:#"image.png"];
[UIView transitionWithView:self.view
duration:0.33f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.imageview.image = toImage;
} completion:NULL];
extension UIImageView
{
func mySetImage(image:UIImage)
{
guard let currentImage = self.image where currentImage != image else { return }
let animation = CATransition()
animation.duration = 0.3
animation.type = kCATransitionFade
layer.add(animation, forKey: "ImageFade")
self.image = image
}
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.navigationController.navigationBarHidden=false;
UIImage *img=[UIImage imageNamed:#"images.jpeg"];
imgview=[[UIImageView alloc]init];
imgview.frame=CGRectMake(30,90, img.size.width, img.size.height);
[self.view addSubview:imgview];
[self animateImages];
}
- (void)animateImages
{
static int count = 0;
NSArray *animationImages = #[[UIImage imageNamed:#"images.jpeg"], [UIImage imageNamed:#"images (1).jpeg"]];
UIImage *image = [animationImages objectAtIndex:(count % [animationImages count])];
[UIView transitionWithView:imgview
duration:2.0f // animation duration
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
imgview.image = image;
} completion:^(BOOL finished) {
[self animateImages];
count++;
}];
}
Solution in swift
let image1:UIImage = UIImage(named: "someImage1")!;
let image2:UIImage = UIImage(named: "someImage2")!;
let crossFade:CABasicAnimation = CABasicAnimation(keyPath: "contents");
crossFade.duration = 5.0;
crossFade.fromValue = image1.CGImage;
crossFade.toValue = image2.CGImage;
imageView.layer.addAnimation(crossFade, forKey:"animateContents");
My suggestion would be to just use two UIImageViews on top of each other. The one on top has the image1, and on bottom is image2:
- (void) crossfade {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.5];
imageView1.alpha = !imageView1.alpha;
[UIView commitAnimations];
}
That will fade between the two images whenever you call it. If you want to just do a single fade and remove the first image after you're done:
- (void) crossfade {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.5];
[UIView setAnimationDelegate:imageView1];
[UIView setAnimationDidStopSelector:#selector(removeFromSuperview)];
imageView1.alpha = 0
[UIView commitAnimations];
}
Edit:
If you're looking for a reason why your code doesn't work, it's because you're just setting the property to the new image, then adding a useless animation. CABasicAnimation has the fromValue and toValue that need to be set, then add that animation to the layer, and it should do the animation. Don't set the contents manually.