how to make smooth UIView splitting animation? - ios

Hi i am trying to implement split the UIView using UIPinchGestureRecognizer, but the following issue are their, if any one know how to solve kindly.
This is my pinchGestureHandlerCode:
- (IBAction)splitView:(UIPinchGestureRecognizer*)recognizer
{
if(recognizer.state == UIGestureRecognizerStateBegan)
{
CGPoint selectedFolderPoint = CGPointMake([recognizer locationInView:recognizer.view].x,
recognizer.view.frame.origin.y);
self.splitPosition = ([recognizer locationOfTouch:0 inView:recognizer.view].x +
[recognizer locationOfTouch:1 inView:recognizer.view].x)/2;
//STEP 1: Capture the Main View Content into an image
[self captureImageFromPointAndSetupMaskView:selectedFolderPoint];
}
else if(recognizer.state == UIGestureRecognizerStateChanged)
{
CGPoint selectedFolderPoint = CGPointMake(recognizer.scale,
recognizer.view.frame.origin.y);
//STEP 2: Reduce the left image width, and move the right image origin according to the finger move of user.
[self layoutBottomPartOfMainViewRelativeToPointInMainView:selectedFolderPoint];
[UIView beginAnimations:#"split" context:NULL];
[UIView setAnimationDuration:0.1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
//captures the main background view's image
//STEP 3- Push The Layer-3 which hosts the other part of the Main Content View
[UIView commitAnimations];
}
else if(recognizer.state == UIGestureRecognizerStateEnded)
{
// STEP 3: remove the both image view from the view.
[self layoutFinalFrameOfBottomPartOfMainContentView];
[UIView commitAnimations];
}
}
STEMP 1 METHOD:
-(void)captureImageFromPointAndSetupMaskView:(CGPoint)selectedFolderPoint
{
UIGraphicsBeginImageContext(self.superview.frame.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *backgroundImage = UIGraphicsGetImageFromCurrentImageContext();
CGImageRef leftTempRef = backgroundImage.CGImage;
CGImageRef leftImageRef = CGImageCreateWithImageInRect(leftTempRef,
CGRectMake(self.bounds.origin.x,
self.bounds.origin.y, selectedFolderPoint.x,
self.bounds.size.height));
UIImage *leftImage = [UIImage imageWithCGImage:leftImageRef];
leftImageBackgroundView = [[UIImageView alloc] initWithImage:leftImage];
[self.leftBackgroundView addSubview:leftImageBackgroundView];
CGImageRef rightTempRef = backgroundImage.CGImage;
CGImageRef rightImageRef = CGImageCreateWithImageInRect(rightTempRef,
CGRectMake(selectedFolderPoint.x,
self.bounds.origin.y, self.superview.bounds.size.width, self.bounds.size.height));
UIImage *rightImage = [UIImage imageWithCGImage:rightImageRef];
rightImageBackgroundView = [[UIImageView alloc] initWithImage:rightImage];
[self.rightBackgroundView addSubview:rightImageBackgroundView];
[self.leftBackgroundView setFrame:CGRectMake(self.bounds.origin.x,
self.bounds.origin.y,
selectedFolderPoint.x,
self.frame.size.height)];
[self.rightBackgroundView setFrame:CGRectMake(selectedFolderPoint.x,
self.bounds.origin.y,
self.superview.bounds.size.width,
self.bounds.size.height)];
}
STEP 2 METHOD:
-(void)layoutBottomPartOfMainViewRelativeToPointInMainView:(CGPoint)selectedFolderPoint
{
[self.leftBackgroundView setFrame:CGRectMake(self.leftBackgroundView.bounds.origin.x,
self.leftBackgroundView.bounds.origin.y,
(self.leftBackgroundView.bounds.size.width -
selectedFolderPoint.x),
self.leftBackgroundView.bounds.size.height)];
[self.rightBackgroundView setFrame:CGRectMake(self.rightBackgroundView.frame.origin.x + selectedFolderPoint.x,
self.rightBackgroundView.bounds.origin.y,
self.rightBackgroundView.bounds.size.width - selectedFolderPoint.x,
self.rightBackgroundView.bounds.size.height)];
if(((ABS(self.leftBackgroundView.bounds.origin.x+self.leftBackgroundView.bounds.size.width)-
self.rightBackgroundView.bounds.origin.x) > 100) &&
((ABS(self.leftBackgroundView.bounds.origin.x+self.leftBackgroundView.bounds.size.width)-
self.rightBackgroundView.bounds.origin.x) < 110))
{
[self switchView];
NSDictionary *message;
[self.timelineController sendEvent:SWITCH_VIEW withMessage:message];
[self layoutFinalFrameOfBottomPartOfMainContentView];
}
[UIView setAnimationsEnabled:NO];
[UIView setAnimationsEnabled:YES];
}
STEP 3 METHOD:
-(void)layoutFinalFrameOfBottomPartOfMainContentView
{
[self.leftBackgroundView setFrame:CGRectMake(self.bounds.origin.x,
self.leftBackgroundView.bounds.origin.y,
self.bounds.origin.x,
self.leftBackgroundView.bounds.size.height)];
[self.rightBackgroundView setFrame:CGRectMake(self.bounds.origin.x,
self.rightBackgroundView.bounds.origin.y,
self.bounds.origin.x,
self.rightBackgroundView.bounds.size.height)];
leftImageBackgroundView.image = nil;
rightImageBackgroundView.image = nil;
}
The issue are:
i am trying to make smooth animation but its running too fast and suddenly moving both side.
if i to same pinch gesture more number of time app getting crash and showing memory warning.
if any one know what mistake i am doing in my code kindly help me to solve the problem or there is any other way to do the same animation kindly give way to me....
Thanks in advance... ...

Define the UIPinchGestureRecognizer like this
UIPinchGestureRecognizer *ges = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(split)];
[self addGestureRecognizer:ges];
and the split Method like this
- (void)split {
CGRect f = self.frame;
CGRect f1 = CGRectMake(CGRectGetMinX(f), f.origin.y, f.size.width/2, f.size.height);
CGRect f2 = CGRectMake(CGRectGetMidX(f), f.origin.y, f.size.width/2, f.size.height);
SplitView *view1 = [[[SplitView alloc] initWithFrame:f1] autorelease];
[self.superview addSubview:view1];
SplitView *view2 = [[[SplitView alloc] initWithFrame:f2] autorelease];
[self.superview addSubview:view2];
f1.origin.x -= 30;
f2.origin.x += 30;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
view1.frame = f1;
view2.frame = f2;
[UIView commitAnimations];
[self removeFromSuperview];
}

Related

Drop image and release when it goes out of bounds

I am new to programming in Objective-C, and am currently having an issue with the code below. I am trying to make an image drop when a button is touched, and it simply freezes when trying to do so. It needs to drop the image until it reaches the bottom of the screen, which then it should be released.
- (IBAction)itemDrop:(UIButton *)sender{
if (strncmp([[sender currentTitle] UTF8String], [copyPrimaryArray[0] UTF8String], 2) == 0)
{
UIImage *bubblImage = [UIImage imageNamed:#"Red_apple.png"];
UIImageView *appleImg = [[UIImageView alloc] initWithImage:bubblImage];
appleImg.translatesAutoresizingMaskIntoConstraints = NO;
[appleImg setContentMode:UIViewContentModeScaleAspectFit];
[appleImg sizeToFit];
[self.view addSubview:appleImg];
NSLog(#"You clicked the Apple");
int i = 0;
CGPoint coordinates = sender.frame.origin;
CGFloat x = coordinates.x;
CGFloat y = coordinates.y;
CGFloat z = UIScreen.mainScreen.bounds.size.height;
while (y < z) {
[UIView beginAnimations:nil context:nil];
appleImg.center = CGPointMake(x, y+i);
[UIView commitAnimations];
i++;
}
}
}
You do not need to move the image view one point at a time manually. That's what I seem to understand from your use of the while loop. Objective-c does a lot of things for you.
UIImage *bubblImage = [UIImage imageNamed:#"Red_apple.png"];
UIImageView *appleImg = [[UIImageView alloc] initWithImage:bubblImage];
// Set the frame of the original position here, for example:
CGRect originalPosition = CGRectMake(0, 0, appleImg.frame.size.width, appleImg.frame.size.height);
appleImg.frame = originalPosition;
// Then animate it to the new position:
[UIView animateWithDuration:1.0
animations:^{
CGRect newPosition = CGRectMake(0, 640, appleImg.frame.size.width, appleImg.frame.size.height);
appleImg.frame = newPosition;
}
completion:^(BOOL finished) {
NSLog(#"completion block"); // You can set the completion block to nil if you have nothing to do here.
}];
Make sure to start using block based animations.
The use of UIView's beginAnimations:context is highly discouraged since iOS 4.0.

Resize uiscrollview after scaling so as to enable paging

I am having a scrollview containing 2 image views in one page only.I am scaling scrollview so as to cover full screen on tapping.Now i want after scaling, paging should be enabled.But then it skip every alternate image view. Any help would be appreciated.`
kNumViews = 10;
vScrollObjectHeight = 230; // half screen
vScrollObjectWidth = 160; // half screen
{
for (i = 1; i <= kNumViews; i++)
{
NSString *imageName = [NSString stringWithFormat:#"imageV%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[imageView sizeToFit];
imageView.layer.borderColor = [UIColor grayColor].CGColor;
imageView.layer.borderWidth = 1.5f;
CGRect rect = imageView.frame;
rect.size.height = vScrollObjHeight;
rect.size.width = vScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
imageView.userInteractionEnabled = YES;
[scrollView2 addSubview:imageView];
}
[self layoutScrollViews];
self.swipeRecognizerUp = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(scaleMove:)];
[self.swipeRecognizerUp setDelegate:self];
[scrollView2 addGestureRecognizer:self.swipeRecognizerUp];
self.swipeRecognizerDown = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(scaleDown:)];
[self.swipeRecognizerDown setDelegate:self];
[scrollView2 addGestureRecognizer:self.swipeRecognizerDown];
self.swipeRecognizerDown.enabled = NO;
}
-(void)scaleMove:(id)sender {
[[[(UIPanGestureRecognizer*)sender view] layer] removeAllAnimations];
[self.view bringSubviewToFront:[sender view]];
CGPoint velocity = [sender velocityInView:self.view];
if(abs(velocity.y) - abs(velocity.x) > 500 && velocity.y < 0){
[sender view].transform = CGAffineTransformMakeScale(1.0, 1.0);
//[sender view].transform = CGAffineTransformMakeTranslation(0, 230);
[UIView animateWithDuration:0.5
animations:^(){
CGAffineTransform scale = CGAffineTransformMakeScale(2.0, 2.0);
CGAffineTransform translate = CGAffineTransformMakeTranslation(0,-230);
[sender view].transform = CGAffineTransformConcat(translate, scale);
//NSLog(#"%f %f",[sender view].frame.size.width,[sender view].frame.size.height);
scrollView2.pagingEnabled = YES;
}
completion:nil];
self.swipeRecognizerDown.enabled = YES;
self.swipeRecognizerUp.enabled = NO;
}
}
}
`
found answer of it...I have set the width of scrollview half and then subclasses the scrollview so as to override pointInside and then normally scaled scrollview.found answer of it...I have set the width of scrollview half and then subclasses the scrollview so as to override pointInside and then normally scaled scrollview.

UIView animated backgroundColor with drawRect:

I have a view that is able to draw a rect on itself.
It is actually a subclass of UICollectionView but I'm just struggling with UIView specific stuff; the backgroundColor.
I simply added a UIPanGestureRecognizer, saved the start point at UIGestureRecognizerStateBegan and the end point at UIGestureRecognizerStateChanged. I then use the -drawRect: method to draw the actual path:
- (void)awakeFromNib {
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:#selector(panGesture:)];
[self addGestureRecognizer:pan];
}
- (void)panGesture:(UIPanGestureRecognizer *)panRecon {
if([panRecon state] == UIGestureRecognizerBegan) {
startPoint = [panRecon locationInView:self];
}
else if([panRecon state] == UIGestureRecognizerChanged) {
endPoint = [panRecon locationInView:self];
[self setNeedsDisplay];
}
else if([panRecon state] == UIGestureRecognizerEnded /* || failed || cancelled */) {
startPoint = CGPointZero;
endPoint = CGPointZero;
[self setNeedsDisplay];
}
}
- (void)drawRect:(CGRect)rect {
if(!CGPointEqualToPoint(startPoint, CGPointZero) && !CGPointEqualToPoint(endPoint, CGPointZero)) {
CGRect selectionRect = CGRectMake(startPoint.x, startPoint.y, endPoint.x - startPoint.x, endPoint.y - startPoint.y);
[[UIColor colorWithWhite:1.0 alpha:0.3] setFill];
[[UIColor colorWithWhite:1.0 alpha:1.0] setStroke];
CGContextFillRect(UIGraphicsGetCurrentContext(), selectionRect);
CGContextStrokeRect(UIGraphicsGetCurrentContext(), selectionRect);
}
}
I now want to start the selection mode (which the rect should actually be) with the view flashing. I created a UIView animation for that:
- (void)startSelection {
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
[self setBackgroundColor:[UIColor whiteColor]];
} completion:^(BOOL finished){
if(finished) {
[UIView animateWithDuration:0.9 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self setBackgroundColor:[UIColor blackColor]];
} completion:nil];
}
}
}
The problem is: once I implement the -drawRect: method, UIView does not animate the backgroundColor change anymore. I already tried UIViewAnimationOptionAllowAnimatedContent and almost everything I could find on google, but I wasn't able to solve my problem.
Does anybody know how I can animate backgroundColor of an UIView and have -drawRect: implemented?

Second animation

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);
}

Transferring touches to copy of UIImageView

I've been a long journey trying to drag and drop UIImageViews from a UITableView to another view.
I have everything working to a point. I subclass UIPanGestureRecognizer and attach this custom recognizer to all the UIImageViews I load into the table view.
I then override the recognizer's touchesMoved method to, among other things, add a temporary view onto the applications key window, then add a copy of the selected UIImageView onto this temporary view, as follows:
UIView *dragAndDropView = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]];
dragAndDropView.backgroundColor = [UIColor whiteColor];
[[UIApplication sharedApplication].keyWindow addSubview: dragAndDropView];
ElementImageView * sourceImageView = (ElementImageView*)self.view;
ElementImageView *newImageView = [[ElementImageView alloc] initWithImage:sourceImageView.image];
newImageView.userInteractionEnabled = YES;
newImageView.frame = [self.view convertRect:sourceImageView.frame toView:dragAndDropView];
[dragAndDropView addSubview:newImageView];
As a result of this code, I do indeed get a copy of the source image view on top of my dragAndDropView (I can tell because I set the backgroundcolor of the dragAndDropView to white). And if I lift my finger and touch the copied image view again, I can of course drag it around the screen as I wish. But I can't find a way to seamlessly transfer the existing touch to the new object.
Any ideas?
I think you could do the following on your UIPanGestureRecognizer handler:
-(void) handlePan:(UIPanGestureRecognizer *)recognizer {
if (recognizer.state == UIGestureRecognizerStateBegan) {
// the initial position
initialPanPositionX = self.transform.tx;
initialPanPositionY = self.transform.ty;
// create a copy of the imageview
panImage = [[UIImageView alloc] initWithImage:imageView.image];
panImage.frame = imageView.frame;
[self.view addSubview:panImage];
}
else if (recognizer.state == UIGestureRecognizerStateChanged) {
if (!startedMoving) {
startedMoving = YES;
[UIView beginAnimations:nil context:NULL]; {
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:0.2f];
// an effect to increase a copy a little bit when start dragging
CGAffineTransform zt = CGAffineTransformScale(CGAffineTransformIdentity, 1.2, 1.2);
panImage.bounds = CGRectApplyAffineTransform(panImage.bounds, zt);
}
[UIView commitAnimations];
}
// translation
CGPoint point = [recognizer translationInView:self];
panImage.transform = CGAffineTransformMakeTranslation(initialPanPositionX + point.x, initialPanPositionY + point.y);
}
else if (recognizer.state == UIGestureRecognizerStateEnded ) {
startedMoving = NO;
// drop the imageView if it's inside the droppable view
[panImage release], panImage = nil;
}
}
Hope it helps.

Resources