How to properly animate UIScrollView contentOffset - ios

I have UIScrollView subclass. Its content is reusable - about 4 or 5 views are used to display hundreds of elements (while scrolling hidden objects reused and jumps to another position when its needed to see them)
What i need: ability to automatically scroll my scroll view to any position. For example my scroll view displays 4th, 5th and 6th element and when I tap some button it needs to scroll to 30th element. In other words I need standard behaviour of UIScrollView.
This works fine:
[self setContentOffset:CGPointMake(index*elementWidth, 0) animated:YES];
but I need some customisation. For example, change animation duration, add some code to perform on end of animation.
Obvious decision:
[UIView animateWithDuration:3 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
[self setContentOffset:CGPointMake(index*elementWidth, 0)];
} completion:^(BOOL finished) {
//some code
}];
but I have some actions connected to scroll event, and so now all of them are in animation block and it causes all subview's frames to animate too (thanks to few reusable elements all of them animates not how i want)
The question is: How can I make custom animation (in fact I need custom duration, actions on end and BeginFromCurrentState option) for content offset WITHOUT animating all the code, connected to scrollViewDidScroll event?
UPD:
Thanks to Andrew's answer(first part) I solved issue with animation inside scrollViewDidScroll:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
[UIView performWithoutAnimation:^{
[self refreshTiles];
}];
}
But scrollViewDidScroll must (for my purposes) executes every frame of animation like it was in case of
[self setContentOffset:CGPointMake(index*elementWidth, 0) animated:YES];
However, now it executes only once at start of animation.
How can I solve this?

Did you try the same approach, but with disabled animation in scrollViewDidScroll ?
On iOS 7, you could try wrapping your code in scrollViewDidScroll in
[UIView performWithoutAnimation:^{
//Your code here
}];
on previous iOS versions, you could try:
[CATransaction begin];
[CATransaction setDisableActions:YES];
//Your code here
[CATransaction commit];
Update:
Unfortunately that's where you hit the tough part of the whole thing. setContentOffset: calls the delegate just once, it's equivalent to setContentOffset:animated:NO, which again calls it just once.
setContentOffset:animated:YES calls the delegate as the animation changes the bounds of the scrollview and you want that, but you don't want the provided animation, so the only way around this that I can come up with is to gradually change the contentOffset of the scrollview, so that the animation system doesn't just jump to the final value, as is the case at the moment.
To do that you can look at keyframe animations, like so for iOS 7:
[UIView animateKeyframesWithDuration:duration delay:delay options:options animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
[self setContentOffset:CGPointMake(floorf(index/2) * elementWidth, 0)];
}];
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
[self setContentOffset:CGPointMake(index*elementWidth, 0)];
}];
} completion:^(BOOL finished) {
//Completion Block
}];
This will get you two updates and of course you could use some math and a loop to add up a lot more of these with the appropriate timings.
On previous iOS versions, you'll have to drop to CoreAnimation for keyframe animations, but it's basically the same thing with a bit different syntax.
Method 2:
You can try polling the presentationLayer of the scrollview for any changes with a timer that you start at the beginning of the animation, since unfortunately the presentationLayer's properties aren't KVO observable. Or you can use needsDisplayForKey in a subclass of the layer to get notified when the bounds change, but that'll require some work to set up and it does cause redrawing, which might affect performance.
Method 3:
Would be to dissect exactly what happens to the scrollView when animated is YES try and intercept the animation that gets set on the scrollview and change its parameters, but since this would be the most hacky, breakable due to Apple's changes and trickiest method, I won't go into it.

A nice way to do this is with the AnimationEngine library. It's a very small library: six files, with three more if you want damped spring behavior.
Behind the scenes it uses a CADisplayLink to run your animation block once every frame. You get a clean block-based syntax that's easy to use, and a bunch of interpolation and easing functions that save you time.
To animate contentOffset:
startOffset = scrollView.contentOffset;
endOffset = ..
// Constant speed looks good...
const CGFloat kTimelineAnimationSpeed = 300;
CGFloat timelineAnimationDuration = fabs(deltaToDesiredX) / kTimelineAnimationSpeed;
[INTUAnimationEngine animateWithDuration:timelineAnimationDuration
delay:0
easing:INTULinear
animations:^(CGFloat progress) {
self.videoTimelineView.contentOffset =
INTUInterpolateCGPoint(startOffset, endOffset, progress);
}
completion:^(BOOL finished) {
autoscrollEnabled = YES;
}];

Try this:
UIView.animate(withDuration: 0.6, animations: {
self.view.collectionView.contentOffset = newOffset
self.view.layoutIfNeeded()
}, completion: nil)

Related

how to add bounce animation to animateWithDuration?

I have a simple animation that im performing in my scroll view delegate method scrollViewDidEndDragging.
It looks like this:
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
NSLog(#"finger was lifted");
[UIView animateWithDuration:1.0
animations:^{
self.homeLabel.frame = self.view.frame;
}];
}
Using this animation after lifting the finger the my homeLabel is coming from top, and i want to add it a bounce animation to the label, so when it comes from top, instead of landing smoothly it will have a nice bounce...how can i DO THAT? thanksss
You can use the usingSpringWithDamping animation function.
[UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:5.0 options:UIViewAnimationOptionCurveLinear animations:^{
self.homeLabel.frame = self.view.frame;
} completion:^(BOOL finished) {
}];
Adjusting the Spring Damping and Initial Spring Velocity can give you the effect you want.
One good solution is to create a custom layer for your view that overrides the addAnimation:forKey: method to include a custom timing function.
This answer goes into the specifics of how to do that.
Another option is to take a look at key frame animation. This question and answer covers that approach very well.

Animation Blocks resets to original position after updating text

I'm currently testing my apps for the release of IOS 8. I noticed that after I performed an animation block, the animation resets if I update the text of any label. I ran a simple example with one method shown below. Running this example results in the following:
Clicking myButton the first time- animation runs but resets when the label text is changed.
Clicking myButton the second time - animation runs but does not reset to original position.
It seems like this happens because the label text doesn't change. If I completely remove the line updating the text, this also stops the animation from resetting at the end.
I would like to fix this so that when the method runs, the label text can be updated without resetting the animation.
- (IBAction)move:(id)sender {
[UIView animateWithDuration:0.4 delay:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
self.myButton.center = CGPointMake(200, 300);
}completion:^(BOOL finished){
if(finished){
self.myLabel.text=#"moved";
}
}];
}
This problem can be caused by having Auto Layout set on the UIView. Strictly speaking, if you're using Auto Layout, then you shouldn't animate the absolute position of objects -- you should animate their constraints instead.
Changing the label text once your animation is underway triggers a layout refresh, and iOS shuffles everything around to comply with the original view constraints. (I suspect this is a behavioural change from iOS7).
Quick fix: un-check Auto Layout on the View, and this should work as expected.
Try this. Put the desired animation in the finish block also.
- (IBAction)move:(id)sender {
[UIView animateWithDuration:0.4 delay:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
self.myButton.center = CGPointMake(200, 300);
}completion:^(BOOL finished){
if(finished){
self.myLabel.text=#"moved";
self.myButton.center = CGPointMake(200, 300);
}
}];
}

UIView progressive animation

The standard UIView animateWithDuration: block works great for animations that have require a single animation effect, i.e. resize and/or move.
Is there a way to make the animation progressive, such that the animation starts slow, and gains speed as it progresses?
I could try nested animateWithDuration: blocks, placing subsequent blocks in the completion handler, but that way the animation is a little 'ragged'. I wish to make the animation smooth.
One idea that comes to mind is that I create a recursive function as follows:
- (void) animateToYOrigin:(CGFloat)yOrigin{
if (myView.frame.origin.y < 1){
[UIView animateWithDuration:0.1
animations:^{
CGRect rect = myView.frame;
rect.origin.y = yOrigin;
myView.frame = rect;
} completion:^(BOOL finished) {
[self animateToYOrigin:yOrigin /2];
}];
}
}
I am looking for a refined solution.
You can use
[UIView animateWithDuration:time
delay:delay
options:OPTION_HERE
animations:anims
completion:completion]
method and pass UIViewAnimationOptions where it says OPTION_HERE. You can use basic ease in/out options by default. If you need more options you can check out this git repo. In MTTimingFuncations.h/c you can find multiple options you can pass.

iOS UIScrollView animation after animation

I want something similar in purpose to Flipboard slight flipping animation on app start. Flipboard when launched has this slight flipping of up and down to show users unfamiliar with the interface that it is flippable.
I have a UIScrollView I want to animate a bit to show the user that it's scrollable. So I want to scroll to the right a little bit and back. UIScrollView has a setContentOffset:animated: message without a completion clause. I find that calling it twice results in seemingly no animation. What if I want an animation after animation in succession?
EDIT:
Thanks Levi for the answer.
And for the record, there is UIViewAnimationOptionAutoreverse and UIViewAnimationOptionRepeat that I can use. So this is what I ended up with that works.
CGPoint offset = self.scrollView.contentOffset;
CGPoint newOffset = CGPointMake(offset.x+100, offset.y);
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAutoreverse |UIViewAnimationOptionRepeat animations:^{
[UIView setAnimationRepeatCount: 2];
[self.scrollView setContentOffset:newOffset animated: NO];
} completion:^(BOOL finished) {
[self.scrollView setContentOffset:offset animated:NO];
}];
For a scrollView, tableView or collectionView if you do something like this:
[self.collectionView setContentOffset:CGPointMake(self.collectionView.contentOffset.x+260.0,
self.collectionView.contentOffset.y)
animated:YES];
then you'll get back a:
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
when the scroll finishes.
You do NOT get this callback if the user moves the view.
Two options:
1) Use the -(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView delegate callback
2) Try to put it into an animation block (with ... animated:NO];), which has the completion part.

ios MapKit MKOverlayView animation happening instantly

I am trying to animate the alpha value of a MapKit overlay view (specifically an MKCircleView) in iOS 5 using the following code:
-(void) animateCircle:(MKCircle*)circle onMap:(MKMapView*) mapView
{
MKCircleView * circleView = (MKCircleView*) [mapView viewForOverlay:circle];
UIViewAnimationOptions options = UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionTransitionNone;
[UIView animateWithDuration:5.0
delay:0.0
options:options
animations:^(void) { circleView.alpha = 0.9; }
completion:^(BOOL finished) {}
];
}
The alpha value of the overlay is changing as I want, but it is jumping there instantaneously rather than animating over the specified duration.
Can anyone suggest what might be wrong? Perhaps animation on overlay views os more complex with blocks than I had thought.
Core Animation has interesting behavior when concurrent animations effect the same view... If you try to animate a view before the view's last animation finished, it will assume you intended the subsequent animation to start from the desired end-state of the initial one. This can result in jumps of frames as well as jumps of alpha values.
In your case, this view is likely being animated by something else. Try locating and removing the other animation / or'ing in UIViewAnimationOptionBeginFromCurrentState to its options.

Resources