Rotating image round a fix point - iphone

Firstly I am new to Objective C, any help will be most appreciated. I trying to write a Gauge app (which will eventually show the Angle of the phone). The issue I have is when I rotate the Needle image, it rotates to the correct angle, but not from the Anchor point - the image moves position. Even when I move, say from 0 dregs to 90 and back to 0, the image is does not end up back in its original position! The code I am using is below: .
(PS I am only currently only running the app on the simulator)
*** Rotate Invoked by ....
// Rotate Image
[self rotateImage:_imgNeedle duration: vAnimationDuration curve: UIViewAnimationCurveLinear degrees:vValue];
-(void)rotateImage:(UIImageView *)image
duration:(NSTimeInterval)duration
curve:(int)curve
degrees:(CGFloat)degrees
{
// Setup the animation
[self setAnchorPoint:CGPointMake(.44,.85) forView:image];
// image.transform = CGAffineTransformMakeRotation(d2r(degrees));
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:curve];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix
CGAffineTransform transform = CGAffineTransformMakeRotation(d2r(degrees));
image.transform = transform;
// Commit the changes
[UIView commitAnimations];
}
// Set Anchor Point
-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);
newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);
CGPoint position = view.layer.position;
position.x -= oldPoint.x;
position.x += newPoint.x;
position.y -= oldPoint.y;
position.y += newPoint.y;
view.layer.position = position;
view.layer.anchorPoint = anchorPoint;
}

I am not sure about the layer position, but when I change the anchorPoint, the frame changes, so I will adjust the frame.
-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);
newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);
/*
CGPoint position = view.layer.position;
position.x -= oldPoint.x;
position.x += newPoint.x;
position.y -= oldPoint.y;
position.y += newPoint.y;
view.layer.position = position;
*/
view.frame = CGRectOffset(view.frame, newPoint.x-oldPoint.x, newPoint.y-oldPoint.y);
view.layer.anchorPoint = anchorPoint;
}
And also if you want to go back to the original position with multiple calling of rotateImage, I think you should only set the anchor point once before that. Since if you make two separate animation with the same rotateImage method, the anchor point will be recalculated with your current implementation.
-(void)rotateImage:(UIImageView *)image
duration:(NSTimeInterval)duration
curve:(int)curve
degrees:(CGFloat)degrees
{
// Setup the animation
// [self setAnchorPoint:CGPointMake(.44,.85) forView:image];
// image.transform = CGAffineTransformMakeRotation(d2r(degrees));
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:curve];
[UIView setAnimationBeginsFromCurrentState:YES];
// The transform matrix
CGAffineTransform transform = CGAffineTransformMakeRotation(d2r(degrees));
image.transform = transform;
// Commit the changes
[UIView commitAnimations];
}

Related

How to change for 3D rotation on UIPanGesture?

I have done animation opening a page on tapping on it but now I have to change it for Pan Gesture. How should I start?
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
CALayer *layer = ges.view.layer;
CATransform3D initialTransform = ges.view.layer.transform;
initialTransform.m34 = 1.0 / -1100;
layer.transform = initialTransform;
layer.anchorPoint = CGPointMake(-0.0, 0.5);
[UIView beginAnimations:#"Scale" context:nil];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
CATransform3D rotationAndPerspectiveTransform = ges.view.layer.transform;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, -M_PI , 0 , -ges.view.bounds.size.height/2, 0);
ges.view.transform = CGAffineTransformRotate(ges.view.transform, 0);
layer.transform = rotationAndPerspectiveTransform;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
UIPanGestureRecognizer myPanGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(imagePanned:)];
[_panGesture setMaximumNumberOfTouches:1];
[yourView addGestureRecognizer:myPanGesture];
1) if you want page to turn along with the pan action as user moves the view then you have to do this way.
- (void)imagePanned:(UIPanGestureRecognizer *)iRecognizer {
CGPoint translation = [recognizer translationInView:self.view];
//Calculate transformation based on the translation value of pan gesture, this will be a tricky part
[UIView animateWithDuration:0.5 delay: 0 options: 0 animations:
^(void) {
//Apply transformation
}
completion: nil];
}
Hope this will help you.
Edit : Extended Answer
*This goes with the first idea*
You just want to rotate the view right ?
then use CATransform3D, here you will need to calculate the iAngle that we are applying to view.
iAngle = //Calculate based on translation
where translation is
CGPoint translation = [recognizer translationInView:self.view];
Then apply transformation to view
CATransform3D myTransform = CATransform3DIdentity;
myTransform.m34 = 1.0 / -500;
myTransform = CATransform3DRotate(myTransform, DEGREES_TO_RADIANS(-iAngle), 0.0f, 1.0f, 0.0f); //#define DEGREES_TO_RADIANS(d) (d * M_PI / 180)
yourView.layer.transform = myTransform;
I'll give you the math behind doing it as I don't have code right now to show. Converting finger movement to rotation value is simply a matter of setting up ratios.
For angle value (used in transform):
track_spread rotation_angle
____________ = ______________
movement_x angle = ?
angle = (rotation_angle * movement_x)/track_spread;
WHERE:
track_spread = width_of_your_view (or less e.g. 70% x width_of_your_view)
rotation_angle = the final rotation you want for your view (a constant e.g. 45 degrees)
CGPoint point = [recognizer translationInView:self];
movement_x = abs(point.x);
angle = the value (in degrees) you are interested in and will input into transform after converting to radians
If someone cant figure out and still need code snippet please leave a comment.

How to set the Textview move up animation based on keyboard in the custom UIView class

I have Custom UIView class in one textview. Custom View class frame set only some one view controller. My thought is when text view delegate methods textviewdidbeginediting animation of textview based on the keyboard height not worked correctly. I am using following code
static const CGFloat KEYBOARD_ANIMATION_DURATION = 0.3;
static const CGFloat MINIMUM_SCROLL_FRACTION = 0.2;
static const CGFloat MAXIMUM_SCROLL_FRACTION = 0.2;
static const CGFloat PORTRAIT_KEYBOARD_HEIGHT = 216;
static const CGFloat LANDSCAPE_KEYBOARD_HEIGHT = 162;
- (void)textViewDidBeginEditing:(UITextView *)textView {
CGRect textFieldRect=
[self.window convertRect:textView.bounds fromView:textView];
CGRect viewRect =[self.window convertRect:self.bounds fromView:self];
//So now we have the bounds, we need to calculate the fraction between the top and bottom of the middle section for the text field's midline:
CGFloat midline = textFieldRect.origin.y + 0.5 * textFieldRect.size.height;
CGFloat numerator = midline - viewRect.origin.y
- MINIMUM_SCROLL_FRACTION * viewRect.size.height;
CGFloat denominator =(MAXIMUM_SCROLL_FRACTION - MINIMUM_SCROLL_FRACTION)* viewRect.size.height;
CGFloat heightFraction = numerator / denominator;
//Clamp this fraction so that the top section is all "0.0" and the bottom section is all "1.0".
if (heightFraction < 0.0)
{
heightFraction = 0.0;
}
else if (heightFraction > 1.0)
{
heightFraction = 1.0;
}
//    Now take this fraction and convert it into an amount to scroll by multiplying by the keyboard height for the current screen orientation. Notice the calls to floor so that we only scroll by whole pixel amounts.
UIInterfaceOrientation orientation =
[[UIApplication sharedApplication] statusBarOrientation];
if (orientation == UIInterfaceOrientationPortrait ||orientation == UIInterfaceOrientationPortraitUpsideDown)
{
animatedDistance = floor(PORTRAIT_KEYBOARD_HEIGHT * heightFraction);
}
else
{
animatedDistance = floor(LANDSCAPE_KEYBOARD_HEIGHT * heightFraction);
}
//Finally, apply the animation. Note the use of setAnimationBeginsFromCurrentState: — this will allow a smooth transition to new text field if the user taps on another.
CGRect viewFrame = self.frame;
viewFrame.origin.y -= animatedDistance;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];
[self setFrame:viewFrame];
[UIView commitAnimations];
}
-(void)textViewDidEndEditing:(UITextView *)textView{
CGRect viewFrame = self.frame;
viewFrame.origin.y += animatedDistance;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:KEYBOARD_ANIMATION_DURATION];
[self setFrame:viewFrame];
[UIView commitAnimations];
}
and also attached my screen shots
how to solve this issue
You and move your textView using animation ,
here is the code , you can set frame according to you
-(void)makeAnimation
{
yourView.alpha = 0;
CGRect optionsFrame = yourView.frame;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:.5];
CGRect optionsFrame2 = {0,0,320,266};
yourView.frame = optionsFrame2;
yourView.alpha=1;
[UIView commitAnimations];
}

Layer Position jumps at start of (Core) Animation

So, I'm trying to create a tile flipping effect, like on Windows Phone 7.
So far I have the following code, but I have a couple of queries.
CALayer *layer = self.theRedSquare.layer;
CATransform3D initialTransform = self.theRedSquare.layer.transform;
initialTransform.m34 = 1.0 / -1000;
[UIView beginAnimations:#"Scale" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
layer.transform = initialTransform;
layer.anchorPoint = CGPointMake(-0.3, 0.5);
CATransform3D rotationAndPerspectiveTransform = self.theRedSquare.layer.transform;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -self.theRedSquare.bounds.size.height/2, 0);
layer.transform = rotationAndPerspectiveTransform;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
1. How come my my red square (a simple UI view) translates to the right at the start of the animation?
2. For the anchor point is it possible to set a position on the parent view? At the moment I am arbitrarily setting it relative to the current view.
Thanks in advance for any pointers.
Before animation
During animation (notice the square has shifted right)
After animation (notice the square has shifted right)
Video added: example video
-(void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
CGPoint newPoint = CGPointMake(view.bounds.size.width * anchorPoint.x, view.bounds.size.height * anchorPoint.y);
CGPoint oldPoint = CGPointMake(view.bounds.size.width * view.layer.anchorPoint.x, view.bounds.size.height * view.layer.anchorPoint.y);
newPoint = CGPointApplyAffineTransform(newPoint, view.transform);
oldPoint = CGPointApplyAffineTransform(oldPoint, view.transform);
CGPoint position = view.layer.position;
position.x -= oldPoint.x;
position.x += newPoint.x;
position.y -= oldPoint.y;
position.y += newPoint.y;
view.layer.position = position;
view.layer.anchorPoint = anchorPoint;
}
-(void)animateView:(UIView *)theRedSquare
{
CALayer *layer = theRedSquare.layer;
CATransform3D initialTransform = theRedSquare.layer.transform;
initialTransform.m34 = 1.0 / -1000;
[self setAnchorPoint:CGPointMake(-0.3, 0.5) forView:theRedSquare];
[UIView beginAnimations:#"Scale" context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
layer.transform = initialTransform;
CATransform3D rotationAndPerspectiveTransform = theRedSquare.layer.transform;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI , 0 , -theRedSquare.bounds.size.height/2, 0);
layer.transform = rotationAndPerspectiveTransform;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
}
Taken from This, and slightly tweaked.. Hopefully it helps
Changing my CALayer's anchorPoint moves the view
If you make the square its own view, flipping is built-in
[UIView beginAnimations:#"flip" context:nil];
[UIView setAnimationDuration:.35f];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft
forView:self.window cache:YES];
// change to the new view (make this one hidden, the other not)
[UIView commitAnimations];
The acceptable range of the anchorPoint of a CALayer is [0,1]. In your case, where you are attempting to flip around the Y axis, your layer's anchor point should be [0, 0.5].

Need to get frame co-ordinate of image while animation

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.

Moving an object randomly around the screen

I'm trying to animate a UIButton to move randomly around the screen in different directions. The code below is kind of working. The button will begin moving along a random path, however, it then just continues to move back and forth between point A and point B.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
[UIView setAnimationRepeatCount:1000];
[UIView setAnimationRepeatAutoreverses:YES];
CGFloat x = (CGFloat) (arc4random() % (int) self.view.bounds.size.width);
CGFloat y = (CGFloat) (arc4random() % (int) self.view.bounds.size.height);
CGPoint squarePostion = CGPointMake(x, y);
button.center = squarePostion;
[UIView commitAnimations];
How can I get it to keep moving to a new random point every time it changes directions, instead of simply moving back and forth?
Thanks!
try this:
-(void)animationLoop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1];
// remove:
// [UIView setAnimationRepeatCount:1000];
// [UIView setAnimationRepeatAutoreverses:YES];
CGFloat x = (CGFloat) (arc4random() % (int) self.view.bounds.size.width);
CGFloat y = (CGFloat) (arc4random() % (int) self.view.bounds.size.height);
CGPoint squarePostion = CGPointMake(x, y);
button.center = squarePostion;
// add:
[UIView setAnimationDelegate:self]; // as suggested by #Carl Veazey in a comment
[UIView setAnimationDidStopSelector:#selector(animationLoop:finished:context:)];
[UIView commitAnimations];
}
and just add a counter (int) inside the method to check if it's executed more than 1000 times, if wanna stop it...
Swift 5 example of making one animation
#objc func didBecomeActive() {
DispatchQueue.main.async {
self.startAnimationCalm()
}
}
func startAnimation() {
let animatedShadow = UIView(frame: CGRect(origin: CGPoint(x: 10, y: 10), size: CGSize(width: 20, height: 20)))
animatedShadow.clipsToBounds = true
animatedShadow.layer.cornerRadius = 20/2
animatedShadow.backgroundColor = UIColor.green
animatedShadow.layer.borderWidth = 0
self.view.addSubview(animatedShadow)
UIView.animate(withDuration: 5, delay: TimeInterval(0), options: [.repeat, .curveEaseIn], animations: { () -> Void in
let randomX = CGFloat.random(in: 14 ... 200)
let randomY = CGFloat.random(in: 20 ... 600)
animatedShadow.center = CGPoint(x: animatedShadow.frame.origin.x + randomX, y: animatedShadow.frame.origin.y + randomY)
self.view.layoutIfNeeded()
}, completion: { finished in
})
}