Lock scrollview at specific point with bounce back effect - ios

Is there any way to lock scrollview programatically at specific place with having native
apple bounce back effect?
I have infinite scrollview and would like to lock at some specific place. I found out that
I can use scrollViewWillEndDragging:withVelocity:targetContentOffset to figure out that the locking point
is going to be crossed and intervene like this:
[self setContentOffset:CGPointMake(LockPositionX, LockPositionY) animated:YES];
However this doesn't have native bounce back and rubber banding effect. I try to workaround it with
modifying scrollview.decelerationRate but it looks like it cannot have values other than
UIScrollViewDecelerationRateNormal or UIScrollViewDecelerationRateFast.
Maybe I'm missing something and there is some hidden way to achieve that?

add below code in scrollViewWillEndDragging:withVelocity:targetContentOffset
if(lockingpointreached)
{
[UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^ {
[self setContentOffset:CGPointMake(LockPositionX-20, LockPositionY-20)];
} completion:NULL];
}
Hope this will help you.

I found out that the easiest way is to actually use native bounce back implementation.
Event though our scrollView contentSize have e.g. vertical bounds from 0 to 1000 if we put some all the previous with negative origin (out of screen) its going to be visible (rendered) when we bounce back.
If then for some reason we want to move the locking point the previous elements we just have to shift all the elements down so that only elements above the locking points have negative origin

Related

Animating slide show in iOS

Anybody have any idea how this is done?
http://youtu.be/r_cII4_aq_A
In general, the idea is awesome, but I would like to know how to do each specific thing. In the video, the pages are being swiped too fast so you can't see, but as you transition from one page to the next, each pixel smoothly transitions to it's new color. Also, it's really cool how the icon gets smaller to a minimum size as you transition away from a screen.
Maybe there's some 3rd party library that provides a protocol and it's relatively easy to implement, but I can't find it. If there's not, I'm thinking it's just one view controller with many views side by side and as you drag your finger, it calculates where each view needs to be..and what color every pixel needs to be.
I imagine you already have it by now. But in case you still have any doubts, I made gist that does the animation: https://gist.github.com/mnmaraes/9536364
Anyways, have fun.
It's a fade animation, so:
[UIView animateWithDuration:0.5
delay:0.0
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
_backgroundImageView.image = nextImage;
} completion:nil];
should do the trick for the background part.
For the foreground/icon part you can animate the transform to scale and translate the views as they slide in and out.

Receive user interactions wheel animation

UI animations are great, very easy to use, and are used allot. The only one problem I have with it is that while the animation is moving, the view in not receiving any user interaction.
For example, if a have a UIButton that animates every time it's shown, but the user will not be able to click on it until the animation is over.
//This is a UIButton:
- (void)animationApear
{
CGRect frameSelf = self.frame;
frameSelf.origin.y -= frameSelf.size.height;
[UIView animateWithDuration:1.0 delay:0
usingSpringWithDamping:0.8 initialSpringVelocity:0
options:0
animations:^{
[self setFrame:frameSelf];
} completion:nil];
}
Is there any way to deal with this issue?
Thanks!
You need to supply the option UIViewAnimationOptionAllowUserInteraction.
Also, depending on your view architecture, if the button is within the animated view, or a subview thereof, then the actual location of the button isn't moving. Only the presentation layer of the button is moving, so that is why the button may not be receiving taps. A good test is to tap where the button was when the animation started (and make sure the option UIViewAnimationOptionAllowUserInteraction is on) to see if it is still receiving taps.
On solution, when you actually need to animate buttons, is to make repeated short transforms (CGAffineTransforms, for example) and have those movements in aggregate, create the visual effect of the animation. Though in this case the button itself will move, rather than simply it's presentation.

Trying to flip a UIView over it's end

I am trying to flip a UIView around one edge of the view, as if the view were a page of a calendar with a rigid page moving over like so : Calendar.
I am trying to do it like so :
[UIView transitionWithView:self.upperCard
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
topView.frame = [self bottomHalfRectFromBounds];
bottomView.frame = [self topHalfRectFromBounds];
topView.flippedOver = YES;
bottomView.flippedOver = NO;
}
completion:NULL];
[self setNeedsDisplay];
The only problem with this method is that because the animation of the view's frame is Linear and so is the flipping animation the animation's are out of time with each other (This is due to the fact that flipping at a constant velocity the area which is visible of the view is proportional to Cos(t), learn some maths if you didn't know that ;P).
So basically I'm either looking for a way to make the frame animation have an easing function... or a completely alternative method... I don't want this to look like a page curl as it is going to be used for a scoreboard app, so please don't just tell me to use the UIViewAnimationOptionCurlDown option :P
Thanks for your time!
In general, animating your view’s frame is not a good way to approach this: it causes the view to have to redraw itself at every step of the animation, and, as you’ve noticed, doesn’t look like a flip so much as a linear scale.
Check out this answer—specifically the second part of it, discussing how to do it in CA—for a better approach.

Why is part of my UIView covering the keyboard?

Part of my UIView is covering the iPad's keyboard.
The view you're seeing is simply a UIView I've added as a subview to my main view. When the keyboard is shown, I do shift the view up.
Has anyone ever seen this before?
EDIT
When the keyboard is shown, I move the view up:
[UIView animateWithDuration:SHOW_KEYBOARD_ANIMATION_DURATION animations:^{
CGRect frame = self.currentViewController.view.frame;
frame.origin.y -= SHOW_KEYBOARD_OFFSET;
self.currentViewController.view.frame = frame;
}];
EDIT
I use the follow code to add the view:
[UIView transitionFromView:fromView toView:toView duration:0.3f options:UIViewAnimationOptionTransitionCrossDissolve completion:nil];
Are you calling the code to move the view out of the way before or after the keyboard is displayed? In other words, are you registering for UIKeyboardWillShowNotification or UIKeyboardDidShowNotification?
I'm not sure where you are getting the keyboard size? Take a look at Apple's sample code again, see http://developer.apple.com/library/ios/#documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html, scroll down to the section on moving content that is located under the keyboard.
Where are you getting SHOW_KEYBOARD_OFFSET from? I bet that's the problem.
You should be catching the notifications, just as Kate said, and using the userInfo from them to work out what to do about moving your view around. Any hard coded values will break the second Apple change the keyboard size on you. In short, don't assume what the frameworks can so easily tell you.

Custom UIScrollView Animation

I am using a UIScrollView with a list of buttons made to look much like a UIPickerView. I have just implemented shake to shuffle, where upon detection of a shake I set the content offset of the UIScrollView to the position of the randomShuffle using the following.
[Singlescroll setContentOffset:CGPointMake(jumpX, jumpY+randShuffle*sepValue) animated:YES];
Instead of just moving the content offset to the random position that matches a button I would like to implement a shuffle animation where the view almost 'spins' like a slot machine and then ends up on the randomShuffle button position.
I tried to do this by simply animating the offset to the top of the UIScrollView then back down again before going back to the randomShuffle position (one after another), however this didn't work and it just went straight to the randomShuffle position. I realise that I didn't try this with a timer so the animations were not delayed however I would like to avoid running a timer if possible.
Is there any inbuilt animations that can handle this? and if not please can you suggest how I might approach this before using timers? thank you.
Instead of just using animated:YES, did you try putting it into something like:
[UIView animateWithDuration:.25 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[Singlescroll setContentOffset:maximumOffsetPoint]; //spin all the way up?
}completion:^(BOOL finished){
if (finished)
//kick off another animation, to spin it back down:
[UIView animateWithDuration:.25 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[Singlescroll setContentOffset:CGPointMake(jumpX, jumpY+randShuffle*sepValue)];
}completion:nil];
}
}];
I don't know if this answers your question, but completion blocks are super handy and might be what you need. Within the completion block, the second animation will only get called at the end of the first animation.
Also, there are several animateWithDuration: methods on UIView, but in my experience this one is more reliable for animating properties such as contentOffset and zoomToRect of scroll views.

Resources