In my application I have a view that sits on top of another view. The user is able to swipe the top view to the right, which fades it out and "fades in" the back view.
When the user pans to the right and lets go, the animation kicks in and it should translate from its current position to the new off screen position. The problem is that the animation instead snaps the view back to its starting point and then does the animation.
Here is my code for the pan gesture and animation:
- (void)handlePanGesture:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:recognizer.view];
CGPoint velocity = [recognizer velocityInView:recognizer.view];
switch (recognizer.state) {
case UIGestureRecognizerStateBegan: {
[recognizer setTranslation:CGPointMake(self.slidingView.frame.origin.x, 0) inView:recognizer.view];
break;
}
case UIGestureRecognizerStateChanged: {
[self.slidingView setTransform:CGAffineTransformMakeTranslation(MAX(0,translation.x), 0)];
CGFloat percentage = fmaxf(0,(translation.x/recognizer.view.bounds.size.width));
[self.backgroundBlurImageView setAlpha:1-percentage];
[self.slidingView setAlpha:1-percentage];
[self.backgroundImageView setTransform:CGAffineTransformMakeScale(1 + (percentage * 0.05), 1 + (percentage * 0.05))];
[self.backgroundBlurImageView setTransform:CGAffineTransformMakeScale(1 + (percentage * 0.05), 1 + (percentage * 0.05))];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
if (velocity.x > 5.0 || (velocity.x >= -1.0 && translation.x > kMenuViewControllerMinimumPanDistanceToOpen * self.slidingView.bounds.size.width)) {
CGFloat transformedVelocity = velocity.x/ABS(self.slidingView.bounds.size.width - translation.x);
CGFloat duration = 0.66;
[self showViewAnimated:YES duration:duration initialVelocity:transformedVelocity];
} else {
[self hideViewAnimated:YES];
}
}
default:
break;
}
}
- (void)showViewAnimated:(BOOL)animated duration:(CGFloat)duration
initialVelocity:(CGFloat)velocity;
{
// animate
__weak typeof(self) blockSelf = self;
[UIView animateWithDuration:animated ? duration : 0.0 delay:0
usingSpringWithDamping:0.8f initialSpringVelocity:velocity options:UIViewAnimationOptionAllowUserInteraction animations:^{
blockSelf.slidingView.transform = CGAffineTransformMakeTranslation(blockSelf.slidingView.bounds.size.width, 0);
[blockSelf.backgroundBlurImageView setTransform:CGAffineTransformMakeScale(1.05, 1.05)];
[blockSelf.backgroundImageView setTransform:CGAffineTransformMakeScale(1.05, 1.05)];
[blockSelf.backgroundBlurImageView setAlpha:0];
[blockSelf.slidingView setAlpha:0];
} completion:^(BOOL finished) {
blockSelf.tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(didTapOnAaron:)];
[blockSelf.view addGestureRecognizer:self.tapGestureRecognizer];
}];
}
- (void)hideViewAnimated:(BOOL)animated;
{
__weak typeof(self) blockSelf = self;
[UIView animateWithDuration:0.3f animations:^{
blockSelf.slidingView.transform = CGAffineTransformIdentity;
[blockSelf.backgroundBlurImageView setTransform:CGAffineTransformIdentity];
[blockSelf.backgroundImageView setTransform:CGAffineTransformIdentity];
[blockSelf.backgroundBlurImageView setAlpha:1];
[blockSelf.slidingView setAlpha:1];
} completion:^(BOOL finished) {
[blockSelf.view removeGestureRecognizer:self.tapGestureRecognizer];
blockSelf.tapGestureRecognizer = nil;
}];
}
I have already tried settings the animation options to:
UIViewAnimationOptionBeginFromCurrentState
with no effect.
Anyone have a clue what I am missing? Thanks
Kyle, sometimes this sort of thing happens if you are using autolayout. If you don't need it try disabling it and see if it fixes it.
Related
I used below function for 3dRotation on view. But i don't want tilt/flip on view, I just want to left/right/up/down movement on view.
How i avoid tilt and flip rotation on my view ?
- (void)Move3dPan:(UIPanGestureRecognizer *)gesture
{
if (gesture.state == UIGestureRecognizerStateChanged)
{
CGPoint displacement = [gesture translationInView:self.view];
CATransform3D currentTransform = self.popUpView.layer.sublayerTransform;
if (displacement.x==0 && displacement.y==0)
{
// no rotation, nothing to do
return;
}
CGFloat totalRotation = sqrt(displacement.x * displacement.x + displacement.y * displacement.y) * M_PI / 360.0;
CGFloat xRotationFactor = displacement.x/totalRotation;
CGFloat yRotationFactor = displacement.y/totalRotation;
CATransform3D rotationalTransform = CATransform3DRotate(currentTransform, totalRotation,
(xRotationFactor * currentTransform.m12 - yRotationFactor * currentTransform.m11),
(xRotationFactor * currentTransform.m22 - yRotationFactor * currentTransform.m21),
(xRotationFactor * currentTransform.m32 - yRotationFactor * currentTransform.m31));
[CATransaction setAnimationDuration:0];
self.popUpView.layer.sublayerTransform = rotationalTransform;
[gesture setTranslation:CGPointZero inView:self.view];
}
}
-(void) startAnimatingCupView
{
[self stopAnimatingCupView];
timer = [NSTimer scheduledTimerWithTimeInterval:0.8 repeats:true block:^(NSTimer * _Nonnull timer) {
[self animateCupView];
}];
}
-(void) animateCupView{
[UIView animateWithDuration:0.4 animations:^{
self.imgCup.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.4 animations:^{
self.imgCup.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(360));
}];
}];
}
-(void) stopAnimatingCupView{
if (timer != nil) {
[timer invalidate];
timer = nil;
}
[self.imgCup.layer setTransform:CATransform3DIdentity];
}
i hope this will work
I'm trying to make an animation within a pan gesture recognizer. However, when the recognizer gets to my desired location on the screen, the UIStateGestureRecognizerStateEnded gets called, and my animation does not get fired properly. This is how I am going about doing that. How can I make it so that my animation is smooth and doesn't disrupt the gesture recognizer's state.
-(IBAction)handlePan:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x, recognizer.view.center.y + translation.y);
self.lineView1.center = CGPointMake(self.lineView1.center.x, recognizer.view.center.y + translation.y - 337.5f);
self.lineView2.center = CGPointMake(self.lineView2.center.x, recognizer.view.center.y +translation.y + 337.5f);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
//THIS CODE IS NOT ALLOWING THE ANIMATION TO RUN SMOOTHLY? AND ENDS THE GESTURE'S STATE.
if ((recognizer.view.center.y + translation.y)>300 && (recognizer.view.center.y + translation.y)<345) {
[UIView animateWithDuration:3.5 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
self.joinHorzConst.constant= 60;
self.joinLabel.alpha = 1;
} completion:^(BOOL finished) {
//completion
}];
}
if (recognizer.state == UIGestureRecognizerStateEnded) {
[UIView animateWithDuration:.35 delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
recognizer.view.center = CGPointMake(recognizer.view.center.x, 121.5f);
self.lineView1.center = CGPointMake(281, -216);
self.lineView2.center = CGPointMake(281, 459);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.2 animations:^{
recognizer.view.center = CGPointMake(recognizer.view.center.x, 147.5f);
self.lineView1.center = CGPointMake(281, -189);
self.lineView2.center = CGPointMake(281, 486); } completion:^(BOOL finished) {
[UIView animateWithDuration:.1 animations:^{
recognizer.view.center = CGPointMake(recognizer.view.center.x, 141.5f);
self.lineView1.center = CGPointMake(281, -196);
self.lineView2.center = CGPointMake(281, 479);
}];
}];
}];
}
}
Thanks in advance!
EDIT: Exactly how I want my animation to work:
user drags a recognizer up and down a y axis, like a slider. When the slider button reaches within certain y axises (300 - 345), I want there to be an animation on one of my labels that just pushes it to the left a bit and turns the alpha up.
How it is working right now:
Right now, the slider works fine, UNTILL i reach the y axis between 300-345, at that point my gestureReconizerStatedidEnd gets called and the slider returns to its original position with the desired animation. I dont want this to happen. I want the slider to keep moving freely, but the label animation to happen just as the slider is within those 300-345 dimensions.
The way I was setting the labels x value with constraints seemed to be disrupting the gesture? Not sure. But here is how it is working now.
if ((recognizer.view.center.y + translation.y)>300 && (recognizer.view.center.y + translation.y)<345) {
[UIView animateWithDuration:.3 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
[self.joinLabel setCenter:CGPointMake(183, 324)];
self.joinLabel.alpha = 1;
} completion:^(BOOL finished) {
//completion
}];
}
I used MCPanelViewController in an iOS app for drawing left and right controllers (As android has inbuilt control drawer). It works good but it does not come with gesture it comes little late. if anyone had an answer to problem it would be great.
This is the code in UIViewController (MCPanelViewControllerInternal) category:
- (void)handlePan:(UIPanGestureRecognizer *)pan {
// initialization for screen edge pan gesture
if ([pan isKindOfClass:[UIScreenEdgePanGestureRecognizer class]] &&
pan.state == UIGestureRecognizerStateBegan) {
__weak UIViewController *controller = objc_getAssociatedObject(pan, &MCPanelViewGesturePresentingViewControllerKey);
if (!controller) {
return;
}
MCPanelAnimationDirection direction = [objc_getAssociatedObject(pan, &MCPanelViewGestureAnimationDirectionKey) integerValue];
[self setupController:controller withDirection:direction];
CGPoint translation = [pan translationInView:pan.view];
CGFloat width = direction == MCPanelAnimationDirectionLeft ? translation.x : -1 * translation.x;
[self layoutSubviewsToWidth:0];
__weak typeof(self) weakSelf = self;
[UIView animateWithDuration:MCPanelViewAnimationDuration delay:0 options:0 animations:^{
typeof(self) strongSelf = weakSelf;
[strongSelf layoutSubviewsToWidth:width];
} completion:^(BOOL finished) {
}];
CGFloat offset = self.maxWidth - width;
if (direction == MCPanelAnimationDirectionLeft) {
offset *= -1;
}
[pan setTranslation:CGPointMake(offset, translation.y) inView:pan.view];
}
if (!self.parentViewController) {
return;
}
CGFloat newWidth = [pan translationInView:pan.view].x;
if (self.direction == MCPanelAnimationDirectionRight) {
newWidth *= -1;
}
newWidth += self.maxWidth;
CGFloat ratio = newWidth / self.maxWidth;
switch (pan.state) {
case UIGestureRecognizerStateBegan:
case UIGestureRecognizerStateChanged: {
[self layoutSubviewsToWidth:newWidth];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
CGFloat threshold = MCPanelViewGestureThreshold;
// invert threshold if we started a screen edge pan gesture
if ([pan isKindOfClass:[UIScreenEdgePanGestureRecognizer class]]) {
threshold = 1 - threshold;
}
if (ratio < threshold) {
[self dismiss];
}
else {
__weak typeof(self) weakSelf = self;
[UIView animateWithDuration:MCPanelViewAnimationDuration delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
typeof(self) strongSelf = weakSelf;
[strongSelf layoutSubviewsToWidth:strongSelf.maxWidth];
} completion:^(BOOL finished) {
}];
}
break;
}
default:
break;
}
}
This is a known issue of the library.
To quote matthewcheok:
The delay is mainly due to way the panel captures the background image to apply the image blur in advance. It does this exactly once, when the gesture is triggered or when opened programatically, and then crops the image using UIView content modes, to show only the relevant parts obscured by the panel.
I have several buttons located at different sites in the view (storyboard), and I want that when I click on each of them to go to a given point,
To do this, I keep their location and initial size by:
CGPoint originalCenter1;
CGRect originalsize1;
CGPoint originalCenter2;
CGRect originalsize2;
in viewDidLoad
originalCenter1 = self.boton1.center;
originalsize1 = self.boton1.frame;
originalCenter2 = self.boton2.center;
originalsize2 = self.boton2.frame;
and the IBAction associated with each button, the animation ...
-(IBAction)move:(id)sender{
UIButton * pressedbutton = (UIButton*)sender;
[UIView animateWithDuration:3.0 delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
CGAffineTransform scale = CGAffineTransformMakeScale(3.0, 3.0);
pressedbutton.transform = scale;
switch(pressedbutton.tag)
{
case 0:
pressedbutton.center = CGPointMake(784, 340);
break;
case 1:
pressedbutton.center = CGPointMake(784, 340);
break;
When already all have moved, I have a button Refresh that puts me to the initial position.
-(IBAction)refresh:(id)sender{
self.boton1.frame = originalsize1;
self.boton1.center = originalCenter1;
self.boton1.alpha=1;
self.boton2.frame = originalsize2;
self.boton2.center = originalCenter2;
self.boton2.alpha=1;
The problem is that the next time that pulse buttons, move to the position shown in the animation but the "scale" effect, doesn't work !!
Any help ??
Thanks.
I think you should use block try this...
- (IBAction)tap:(UITapGestureRecognizer *)gesture
{
CGPoint tapLocation = [gesture locationInView:self.view1];
for (UIView *view in self.view1.subviews) {
if (CGRectContainsPoint(view.frame, tapLocation)) {
[UIView animateWithDuration:5.0 animations:^{
[self setRandomLocationForView:view];
}];
}
}
}
- (void)setRandomLocationForView:(UIView *)view
{
[view sizeToFit];
CGRect sinkBounds = CGRectInset(self.view1.bounds, view.frame.size.width/2, view.frame.size.height/2);
CGFloat x = your location.x;
CGFloat y = yout location.y;
view.center = CGPointMake(x, y);
}
I have a UIPanGestureRecognizer that is attached to a UIView. What I am trying to do is essentially drag and drop into a bucket. If the user lets go of the UIView and it's not in the bucket, I want it to animate back to its original start location. My selector that gets called for my UIPanGestureRecognizer is:
- (void)handleDragDescriptionView:(UIPanGestureRecognizer *)gestureRecognizer {
UIView *panViewPiece = [gestureRecognizer view];
CGRect originalFrame = CGRectMake(946, 20, 58, 30);
CGPoint translation = [gestureRecognizer translationInView:panViewPiece];
if (gestureRecognizer.state == UIGestureRecognizerStateBegan || gestureRecognizer.state == UIGestureRecognizerStateChanged) {
panViewPiece.center = CGPointMake(panViewPiece.center.x + translation.x, panViewPiece.center.y + translation.y);
[gestureRecognizer setTranslation:CGPointZero inView:panViewPiece.superview];
}
else if (gestureRecognizer.state == UIGestureRecognizerStateCancelled) {
[UIView animateWithDuration:0.25 animations:^{
self.dragDescriptionView.frame = originalFrame;
}];
}
else {
[UIView animateWithDuration:0.25 animations:^{
self.dragDescriptionView.frame = originalFrame;
}];
}
}
I was wondering if I could do this without the originalFrame at the top of the method. I originally had
CGRect originalFrame = _dragDescriptionView.frame;
instead of the hardcoding, but it doesn't snap back. Probably because I'm updating that value as I am dragging. I don't particularly like hardcoding values, but I wasn't sure if there was a way around this. Thanks!
You really only need to track the view's original center. Make originalCenter an instance variable and only set it when the gesture begins:
#implementation MyViewController {
CGPoint _originalCenter;
}
- (void)handleDragDescriptionView:(UIPanGestureRecognizer *)gestureRecognizer {
UIView *panViewPiece = [gestureRecognizer view];
switch (gestureRecognizer.state) {
case UIGestureRecognizerStateBegan:
_originalCenter = panViewPiece.center;
break;
case UIGestureRecognizerStateChanged: {
CGPoint translation = [gestureRecognizer translationInView:panViewPiece.superview];
panViewPiece.center = CGPointMake(panViewPiece.center.x + translation.x, panViewPiece.center.y + translation.y);
[gestureRecognizer setTranslation:CGPointZero inView:panViewPiece.superview];
break;
}
case UIGestureRecognizerStateEnded:
case UIGestureRecognizerStateCancelled: {
[UIView animateWithDuration:0.25 animations:^{
panViewPiece.center = _originalCenter;
}];
break;
}
default:
break;
}
}