I am using an app, in that am image is animating from top to bottom of screen using the animation.
code:
- (void)onTimer
{
// build a view from our flake image
flakeView = [[UIImageView alloc] initWithImage:flakeImage];
flakeView.backgroundColor=[UIColor blueColor];
// use the random() function to randomize up our flake attributes
int startX =round(random() % 460);
printf("\n ===== startX :%d",startX);
int endX = round(random() % 460);
printf("\n ===== endX :%d",endX);
double scale = 1 / round(random() % 100) - 1.0;
double speed = 1 / round(random() %100) + 1.0;
// set the flake start position
flakeView.frame = CGRectMake(startX, -100.0, 25.0 * scale, 25.0 * scale);
flakeView.alpha = 1.0;
// put the flake in our main view
[mView addSubview:flakeView];
[UIView beginAnimations:nil context:flakeView];
[UIView setAnimationDuration:20 * speed];
// code to get current position of image on view
CALayer mainLayer = flakeView.layer.presentationLayer;
CGRect layerFrame = mainLayer.frame;
BOOL intersects = CGRectIntersectsRect(layerFrame, dragger.frame);
// end position on screen
flakeView.frame = CGRectMake(endX, 500.0, 15.0 * scale, 15.0 * scale);
// set a stop callback so we can cleanup the flake when it reaches the
// end of its animation
[UIView setAnimationDidStopSelector:#selector(onAnimationComplete:finished:context:)];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
}
- (id)init
{
if(self = [super init])
{
mView = [[UIView alloc]initWithFrame:CGRectMake(0,0,320,440)];
mView.backgroundColor = [UIColor whiteColor];
mainLayer =[CALayer layer];
// load our flake image we will use the same image over and over
flakeImage = [UIImage imageNamed:#"apple.png"];
[mView.layer addSublayer:mainLayer];
// start a timet that will fire 20 times per second
[NSTimer scheduledTimerWithTimeInterval:(0.8) target:self selector:#selector(onTimer) userInfo:nil repeats:YES];
self.view=mView;
}
return self;
}
I used this to get position of an image that is animating from top to bottom of the screen.
but I am getting the connstant values of x and y for the image that is animating.
Can any one help in this.
Thank U.
One thing I have noted from above code is that you are adding flakeView each time on mView. Do you want so? Please try with following code.
- (void)onTimer
{
int startX =round(random() % 460);
printf("\n ===== startX :%d",startX);
int endX = round(random() % 460);
printf("\n ===== endX :%d",endX);
double scale = 1 / round(random() % 100) - 1.0;
double speed = 1 / round(random() %100) + 1.0;
if(flakeView == nil)
{
// build a view from our flake image
flakeView = [[UIImageView alloc] initWithImage:flakeImage];
flakeView.backgroundColor=[UIColor blueColor];
// use the random() function to randomize up our flake attributes
// set the flake start position
flakeView.frame = CGRectMake(startX, -100.0, 25.0 * scale, 25.0 * scale);
flakeView.alpha = 1.0;
// put the flake in our main view
[mView addSubview:flakeView];
}
[UIView beginAnimations:nil context:flakeView];
[UIView setAnimationDuration:20 * speed];
// code to get current position of image on view
CALayer mainLayer = flakeView.layer.presentationLayer;
CGRect layerFrame = mainLayer.frame;
BOOL intersects = CGRectIntersectsRect(layerFrame, dragger.frame);
// end position on screen
flakeView.frame = CGRectMake(endX, 500.0, 15.0 * scale, 15.0 * scale);
// set a stop callback so we can cleanup the flake when it reaches the
// end of its animation
[UIView setAnimationDidStopSelector:#selector(onAnimationComplete:finished:context:)];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
NSLog(#"Co-ordinates of imageview : (%f, %f, %f, %f) %#",flakeView.frame.origin.x,flakeView.frame.origin.y,flakeView.frame.size.width,flakeView.frame.size.height);
}
Thanks,
I'm wondering why you could use the dot-notation to access the presentationLayer. It is a method, not a property of CALayer.
Note: "Use of [UIView beginAnimations:context:] is discouraged in iPhone OS 4.0 and later. You should use the block-based animation methods instead." (Apple Docs). If you don't know what block-based animations are, read: What are block-based animation methods in iPhone OS 4.0?
If it still doesn't work with block-based animations, try to set the layer's delegate to nil or use CABasicAnimation either implicitly or explicitly.
Related
I'm working on UIButton animation where:
The UIButton is set in the bottom center of the screen and scaled to a small size
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
When the app starts it should be moving to the bottom left side of the screen as it scales or grow to its original size.
- (void)viewDidLoad
{
[super viewDidLoad];
_menuBtn.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.superview.frame = CGRectMake(160, 513, 30, 30);
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
NSLog(#"_menuBtn: %# ; _menuBtn.superview: %#", _menuBtn, _menuBtn.superview);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
problem
When the animation starts the button starts moving from the bottom right side of the screen and not in the bottom center where it is and should be. Any help ?
Log Result
NSLog(#"%#", _myBtn);
2013-08-14 09:22:38.913 GJCoolNavi[339:c07] <UIButton: 0x813ea30; frame = (0 0; 0 0); opaque = NO; autoresize = TM+BM; layer = <CALayer: 0x813eaf0>>
thats before doing the animation...and the result after the animation is:
2013-08-14 09:30:25.719 GJCoolNavi[612:c07] <UIButton: 0x71206d0; frame = (160 294; 0 0); opaque = NO; autoresize = TM+BM; animations = { transform=<CABasicAnimation: 0x7536a80>; position=<CABasicAnimation: 0x7537dd0>; }; layer = <CALayer: 0x7120790>>
Why don't you do this...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
[UIView animateWithDuration:5.0
options:UIViewAnimationOptionCurveEaseOut
animations:^(){
_menuBtn.transform = CGAffineTransformMakeScale(1.0, 1.0);
_menuBtn.center = self.view.center;
}
completion:nil];
I'd avoid moving stuff using a transform. Change the frame instead.
EDIT
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
// for convenience I'm pulling these values out in to variables.
float buttonWidth = _menuBtn.frame.size.width;
float buttonHeight = _menuBtn.frame.size.height;
float viewWidth = self.view.frame.size.width;
float viewHeight = self.view.frame.size.height;
// set the button frame to be the bottom center
// note you shouldn't have to do this as Interface Builder should already place it there.
// place the button in the horizontal center and 20 points from the bottom of the view.
_menuBtn.frame = CGRectMake((viewWidth - buttonWidth) * 0.5, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
// scale the button down before the animation...
_menuBtn.transform = CGAffineTransformMakeScale(0.1, 0.1);
// now animate the view...
[UIView animateWithDuration:5.0
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
_menuBtn.transform = CGAffineTransformIdentity;
_menuBtn.frame = CGRectMake(viewWidth - buttonWidth - 20, viewHeight - buttonHeight - 20, buttonWidth, buttonHeight);
}
completion:nil];
}
Try this and let me know what happens.
This has solved a similar problem.
Apply a (UIButton).imageView Animation.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.imageView.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
This phenomenon indicates that your button's original frame is wrong, probably because of its auto-resizing. Try setting its frame to the bottom center before you start the animation.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
_menuBtn.superview.frame = CGRectMake(0, 513, 320, 30); // This is a quick and dirty solution to make sure your button's superview is in the right place. You probably don't want to do this and are more likely to review your view hierarchy.
_menuBtn.frame = CGRectMake(145, 0, 30, 30); // Set the frame to the bottom center, please ensure that _menuBtn's transform hasn't been changed before this step
_menuBtn.transform = CGAffineTransformMakeScale(0.1f, 0.1f);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationDuration:5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
CGAffineTransform scaleTrans = CGAffineTransformMakeScale(1.0f, 1.0f);
CGAffineTransform lefttorightTrans = CGAffineTransformMakeTranslation(-200.0f,0.0f);
_menuBtn.transform = CGAffineTransformConcat(scaleTrans, lefttorightTrans);
[UIView commitAnimations];
}
I have used your code and its moving from bottom center to to bottom left perfectly. Might be your superview isn't in proper rect. Please check.
I would like to know how this app stacks up uiimage and wavering in UIKit.
I'm following this xcode: Using a UIImageView subclass with NSTimers
to have images dropping down in random, but how do I catch it and stack the UIImage together ?
Thanks for the reply... EDIT: for clarity
https://www.youtube.com/watch?v=2dpZCoi4xFk 40sec onwards will show how it stack on top each other and swing with accerometer
This will emulate the dropping of UIIimageView
- (void)viewDidLoad {
[super viewDidLoad];
// set the background color to something COLD
self.view.backgroundColor = [UIColor colorWithRed:0.0 green:0.5 blue:1.0 alpha:1.0];
// load our ph image we will use the same image over and over
phImage = [UIImage imageNamed:#"placeholder.png"];
// start a timet that will fire 1 times per second
[NSTimer scheduledTimerWithTimeInterval:(1) target:self selector:#selector(onTimer) userInfo:nil repeats:YES];
}
// Timer event is called whenever the timer fires
- (void)onTimer
{
// build a view from our ph image
UIImageView* placeholderView = [[UIImageView alloc] initWithImage:phImage];
// use the random() function to randomize up our ph attributes
//int startX = round(random() % 300);
int startX = round(random() % 275);
//int endX = round(random() % 300);
int endX = startX;
double scale = 1 / round(random() % 100) + 1.0;
double speed = 1 / round(random() % 50) + 1.0;
// set the PH start position
phView.frame = CGRectMake(startX, -100.0, 25.0 * scale, 25.0 * scale);
phView.alpha = 0.25;
// put the ph in our main view
[self.view addSubview:phView];
[UIView beginAnimations:nil context:phView];
// set up how fast the ph will fall
[UIView setAnimationDuration:5 * speed];
// set the postion where ph will move to
phView.frame = CGRectMake(endX, 500.0, 25.0 * scale, 25.0 * scale);
// set a stop callback so we can cleanup the ph when it reaches the
// end of its animation
[UIView setAnimationDidStopSelector:#selector(onAnimationComplete:finished:context:)];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
}
- (void)onAnimationComplete:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
UIImageView *phView = context;
[phView removeFromSuperview];
NSLog(#"[phView retainCount] = %d",[phView retainCount]);
}
Thanks for reading and commenting.
For stacking, just make a UIView that holds all the placed images together.
UIView *stackView = [UIView new];
-(void) addView: (UIView*) view toStack: (UIView*) stackView
{
if ([stackView subviews].count > 0)
{
CGRect frame = [[[stackView subviews] lastObject] frame];
view.frame = CGRectOffset(frame, 0, 20);
}
[stackView addSubview:view];
}
For tilting, set up an accelerometer and use the x and y to determine the tilt.
-(void)configureAccelerometer
{
UIAccelerometer* theAccelerometer = [UIAccelerometer sharedAccelerometer];
theAccelerometer.updateInterval = 0.20;
theAccelerometer.delegate = self;
// Delegate events begin immediately.
}
- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration
{
UIAccelerationValue x, y, z;
x = acceleration.x;
y = acceleration.y;
//[stackView tiltForX: x Y: y]
}
More info on Motion Events
For the collision detection, you can probably do something like
if (CGRectIntersectsRect([[[stackView subviews] lastObject] frame], fallingView.frame))
[self addView: fallingView toStack: stackView];
HI everyone I'm french so scuse me for my english SO here is my question: How can we define the height and the width of view. Here it name is flakeView. Here is the code :
UIImageView* flakeView = [[[UIImageView alloc] initWithImage:flakeImage] autorelease];
// use the random() function to randomize up our flake attributes
int startY = round(random() % 320);
// set the flake start position
flakeView.center = CGPointMake(490, startY);
flakeView.alpha = 1;
// put the flake in our main view
[self.view addSubview:flakeView];
[UIView animateWithDuration:7
animations:^{
// set the postion where flake will move to
flakeView.center = viewToRotate.center;
}];
CGRect frame = CGRectMake(xPosition, yPosition, width, height);
flakeView.frame = frame;
Note that xPosition and yPosition are the top left corner, not the center.
I am generating random fireballs, but my problem that it's generating much number of fireballs .
How can I control the number of generated fireballs?
- (void)onTimer
{
// build a view from our fire image
UIImageView* fireView = [[UIImageView alloc] initWithImage:fireballs];
int startX = round(random() % 320);
int endX = round(random() % 320);
double scale = 1 / round(random() % 100) + 1.0;
double speed = 1 / round(random() % 100) + 1.0;
fireView.frame = CGRectMake(startX, -100.0, 25.0 * scale, 25.0 * scale);
[self.view addSubview:fireView];
[UIView beginAnimations:nil context:fireView];
[UIView setAnimationDuration:5 * speed];
fireView.frame = CGRectMake(endX, 500.0, 25.0 * scale, 25.0 * scale);
[UIView setAnimationDidStopSelector:#selector(onAnimationComplete:finished:context:)];
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
}
You probably need to adjust how often your are firing your timer. Here's an example, just change your code where the "2.0" is below:
[NSTimer scheduledTimerWithTimeInterval:2.0
target:self
selector:#selector(targetMethod:)
userInfo:nil
repeats:NO];
I'm trying to create a flip-and-scale animation between two view controllers. This seems possible using animation blocks available in iOS 4.0, but I'm still unsure how to implement it. I found this SO question which shows a flip animation.
Using this code, flipping between two views works fine, but scaling doesn't -- the flip animation completes and then the new view jumps to the correct size. How would I flip the view and scale it at the same time?
UIView *tempContainer = myView.contentView ;
[UIView transitionWithView:tempContainer
duration:2
options:UIViewAnimationOptionTransitionFlipFromRight
animations:^{
[[[tempContainer subviews] objectAtIndex:0] removeFromSuperview];
[tempContainer addSubview:myOtherViewController.view];
CGAffineTransform transform = CGAffineTransformMakeScale(4.0, 4.0);
tempContainer.transform = transform;
}
completion:^(BOOL finished){
[tempContainer release];
}];
I suppose this happens because the option UIViewAnimationOptionTransitionFlipFromRight somehow overrides everything else. Try using nesting animations or link them together
Here's how I flip and scale between two views of different sizes. I break the animation into a few parts. First I put the back view at the same location as the front view, but make it hidden. I then flip and scale the front view halfway. The back view is given the same transform as the front view, then rotated and scaled the rest of the way. Flipping back is basically the reverse.
I suppose you could use a different view controllers view property as the back view, but I haven't tried that.
// flip and scale frontView to reveal backView to the center of the screen
// uses a containerView to mark the end of the animation
// parameterizing the destination is an exercise for the reader
- (void)flipFromFront:(UIView*)frontView toBack:(UIView*)backView destination:(CGRect)destRect
{
float duration = 0.5;
// distance from center of screen from frontView
float dx = destRect.origin.x + CGRectGetWidth(destRect) / 2 - frontView.center.x;
float dy = destRect.origin.y + CGRectGetHeight(destRect) / 2 - frontView.center.y;
float scale = CGRectGetWidth(destRect) / CGRectGetWidth(frontView.bounds);
// this prevents any tearing
backView.layer.zPosition = 200.0;
// hide the backView and position where frontView is
backView.hidden = NO;
backView.alpha = 0.0;
backView.frame = frontView.frame;
// start the animation
[UIView animateKeyframesWithDuration:duration
delay:0.25
options:UIViewKeyframeAnimationOptionCalculationModeCubic
animations:^{
// part 1. Rotate and scale frontView halfWay.
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:0.5
animations:^{
// get the transform for the blue layer
CATransform3D xform = frontView.layer.transform;
// translate half way
xform = CATransform3DTranslate(xform, dx/2, dy/2, 0);
// rotate half way
xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
// scale half way
xform = CATransform3DScale(xform, scale/2, scale/2, 1);
// apply the transform
frontView.layer.transform = xform;
}];
// part 2. set the backView transform to frontView so they are in the same
// position.
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.0
animations:^{
backView.layer.transform = frontView.layer.transform;
backView.alpha = 1.0;
}];
// part 3. rotate and scale backView into center of container
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.5
animations:^{
// undo previous transforms with animation
backView.layer.transform = CATransform3DIdentity;
// animate backView into new location
backView.frame = destRect;
}];
} completion:^(BOOL finished) {
self.displayingFront = !self.displayingFront;
}];
}
// flip from back to front
- (void) flipFromBack:(UIView*)backView toFront:(UIView*)frontView
{
float duration = 0.5;
// get distance from center of screen to destination
float dx = backView.center.x - frontView.center.x;
float dy = backView.center.y - frontView.center.y;
backView.layer.zPosition = 200.0;
frontView.hidden = YES;
// this is basically the reverse of the previous animation
[UIView animateKeyframesWithDuration:duration
delay:0
options:UIViewKeyframeAnimationOptionCalculationModeCubic
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:0.5
animations:^{
CATransform3D xform = backView.layer.transform;
xform = CATransform3DTranslate(xform, -dx/2, -dy/2, 0);
xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
xform = CATransform3DScale(xform, 0.75, 0.75, 1);
backView.layer.transform = xform;
}];
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.0
animations:^{
backView.alpha = 0.0;
frontView.hidden = NO;
}];
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.5
animations:^{
self.hiddenView.alpha = 0.0;
frontView.layer.transform = CATransform3DIdentity;
}];
} completion:^(BOOL finished) {
self.displayingFront = !self.displayingFront;
}];
}