I want to add animations to some buttons using UIKitDynamics, however doing the very very basics with a UISnapBehaviour doesn't work at all. I am using IB to layout all of my subviews, so keep in mind that I cannot reposition anything by calling self.button.frame, you have to use constraints.
That said here is what I have...When I run the animation it blinks quickly and looks terrible.
// Position the buttons off screen
self.swerveButton.translatesAutoresizingMaskIntoConstraints = NO;
self.followButton.translatesAutoresizingMaskIntoConstraints = NO;
self.swerveButtonTopSpaceConstraint.constant = -200;
CGPoint swerveSnapPoint = self.swerveButton.center;
CGPoint followSnapPoint = self.followButton.center;
UISnapBehavior *followSnap = [[UISnapBehavior alloc] initWithItem:self.followButton
snapToPoint:followSnapPoint];
UISnapBehavior *swerveSnap = [[UISnapBehavior alloc] initWithItem:self.swerveButton
snapToPoint:swerveSnapPoint];
[self.overlayView fadeInWithDuration:0.2 completion:^{
swerveSnap.damping = 0.3;
[self.animator addBehavior:swerveSnap];
followSnap.damping = 0.3;
[self.animator addBehavior:followSnap];
}];
}
UIKitDynamics doesn't work with constraints. If you want to use them you'll have to go old school and set frames manually, at least during the animation anyway.
Related
I work in Xcode 7, application for IOS 9. The goal is to get round objects behave like a balls using UIDynamicAnimator, UIGravityBehavior and UICollisionBehavior.
Everything works fine except that UIViews (representing balls) looks rounded but behave during collision like rectangles.
Code that build and adds 'balls' is:
-(void) addBall{
CGRect frame;
frame.origin=CGPointZero;
frame.size = [self randomsize];
int x = (arc4random()%(int)self.inputView.bounds.size.width);
frame.origin.x = x;
UIView *bullet = [[UIView alloc] initWithFrame:frame];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10,10,40,20)];
label.text = #"label";
bullet.backgroundColor = [self randomColor];
bullet.layer.cornerRadius = bullet.frame.size.width/2;
bullet.layer.borderWidth = 2.0;
bullet.layer.borderColor = [UIColor blackColor].CGColor;
bullet.layer.masksToBounds=YES;
[bullet addSubview:label];
[self.inputView addSubview:bullet];
[self.gravity addItem:bullet];
[self.collider addItem:bullet];
}
Which property needs to be set to get those objects behave like round shapes?
Below is the screen of the app showing how gravity and collision affected shapes lay on the ground/border.
I draw rectangular borders on the screenshot to show real border that are invisible but prevents balls from behaving as rounded objects.
You should subclass UIView and overload collisionBoundsType. Something like:
-(UIDynamicItemCollisionBoundsType) collisionBoundsType
{
return UIDynamicItemCollisionBoundsTypeEllipse;
}
In Swift you can just make an extension instead of creating a subclass which may be easier than beyowulfs answer, can just drop it at the bottom of your class if you just need it once off
extension UIView {
func collisionBoundsType () -> (UIDynamicItemCollisionBoundsType) {
return UIDynamicItemCollisionBoundsType.ellipse
}
}
I'm quite new to iOS development, and I'm working on an app that uses UIKit for buttons and Sprite Kit for a virtual joystick. My goal is to have the buttons and joystick visible on top of a UIImageView (more specifically, a MotionJpegImageView). I used a storyboard to create the buttons, and programatically created a UIImageView and added it as a subview to my main view in my view controller. The joystick was created in a separate file that subclasses SKScene. However, there's a problem. My UIImageView shows up below the buttons (as desired) but covers the joystick. I need the joystick to be visible on top of the image. I've already tried the sendSubviewToBack method but that isn't doing the trick. I've also tried using zPositions, but that is not working either. Does anyone know how I can achieve my goal? Relevant code is below. Thanks for looking!
ViewController.m
- (void)viewWillLayoutSubviews
{
[super viewWillLayoutSubviews];
NSURL *url = [NSURL URLWithString:#"http://shibuya.ipcam.jp:60001/nphMotionJpeg?Resolution=320x240&Quality=Standard"];
_imageView = [[MotionJpegImageView alloc] initWithFrame:CGRectMake(self.view.frame.origin.y, self.view.frame.origin.x,
[[UIScreen mainScreen] bounds].size.height,[[UIScreen mainScreen] bounds].size.width)];
_imageView.url = url;
[self.view addSubview:_imageView];
[self.view sendSubviewToBack:_imageView];
[_imageView play];
SKView *spriteView = (SKView *) self.view;
JoystickScene* joystick = [[JoystickScene alloc] initWithSize:CGSizeMake(768,1024)];
[spriteView presentScene: joystick];
[self.view bringSubviewToFront:spriteView];
}
JoystickScene.m
- (void)didMoveToView: (SKView *) view
{
SKSpriteNode *jsThumb = [SKSpriteNode spriteNodeWithImageNamed:#"joystick.png"];
SKSpriteNode *jsBackdrop = [SKSpriteNode spriteNodeWithImageNamed:#"dpad.png"];
joystick = [Joystick joystickWithThumb:jsThumb andBackdrop:jsBackdrop];
joystick.position = CGPointMake(jsBackdrop.size.width, jsBackdrop.size.width);
velocityTick = [CADisplayLink displayLinkWithTarget:self selector:#selector(joystickMovement)];
[velocityTick addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
joystick.zPosition = 1;
[self addChild:joystick];
}
The spritekit SKView is the view of your viewcontroller. Every subview will be rendered on top of it. Is there a special reason you want to use Spritekit for the joystick? Otherwise I would suggest to make it with standard UIKit elements and just add it after the imageView.
Using an SKView on top of other views will not give you the desired results, since it cannot have a transparent background.
Another issue with your code: you shouldn't create and add views in viewWillLayoutSubviews, since this method could be called multiple times (every device Rotation for instance). Use viewDidLoad instead.
I am trying to create a realistic bobblehead app, and want to use physics for the bobble animation. I have seen other apps out there that do it, and from what I gather I need to use SpriteKit.
I have created a SKScene and used a SKPhysicsJointPin to pin the head to the body, but it doesnt move around at all. Any ideas or suggestions?
UPDATED CODE (5/28):
Now using 2 spring joints on the head and it moves left to right, but not up and down. Also, tapping quickly causes the head to eventually go far enough right to "fall of" and out of view. Weird.
Have any ideas on what the proper setting would be to allow it to bobble up, down, left, and right whil staying remotely centered on it's starting position and staying within a specified region so it doesnt come off the body and look all funny?
BobbleheadView is a subclassed SKView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor =[UIColor clearColor];
self.showsFPS = YES;
self.showsNodeCount = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:#selector(animateBobble)];
[self addGestureRecognizer:tap];
SKScene *bobbleheadScene = [SKScene sceneWithSize:self.bounds.size];
[self presentScene:bobbleheadScene];
// 1. Body
self.body = [SKSpriteNode spriteNodeWithImageNamed:#"Bobble-Body"];
self.body.position = CGPointMake(self.frame.size.width/2, self.body.frame.size.height/2);
self.body.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
[bobbleheadScene addChild:self.body];
// 2. Head
self.head = [SKSpriteNode spriteNodeWithImageNamed:#"Bobble-Head"];
self.head.position = CGPointMake(self.center.x, self.body.frame.size.height);
//self.head.physicsBody.affectedByGravity = YES;
// self.head.physicsBody.dynamic = NO;
//This bobbles head great, but head falls off body and out of view
self.head.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:self.head.size center:self.head.position];
//End
//self.head.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.head.frame];
//self.head.physicsBody = [SKPhysicsBody bodyWithCircleOfRadius:self.head.size.height/2];
[bobbleheadScene addChild:self.head];
// 3. Ceiling
self.ceiling = [SKSpriteNode spriteNodeWithColor:[UIColor whiteColor] size:CGSizeMake(32, 32)];
self.ceiling.position = CGPointMake(self.frame.origin.x+self.frame.size.width/2, self.frame.size.height);
self.ceiling.physicsBody = [SKPhysicsBody bodyWithEdgeLoopFromRect:self.frame];
[bobbleheadScene addChild:self.ceiling];
//Spring Joint for Ceiling to Head
SKPhysicsJointSpring *spring1 = [SKPhysicsJointSpring jointWithBodyA:self.ceiling.physicsBody bodyB:self.head.physicsBody anchorA:self.ceiling.position anchorB:CGPointMake(self.head.frame.origin.x+self.head.frame.size.width/2, 0)];
spring1.frequency = 20.0; //gives the spring some elasticity.
spring1.damping = 5.0; //Will remove damping to create the 'pendulum'
[bobbleheadScene.physicsWorld addJoint:spring1];
//Spring Joint for Head to Body
SKPhysicsJointSpring *spring = [SKPhysicsJointSpring jointWithBodyA:self.body.physicsBody bodyB:self.head.physicsBody anchorA:CGPointMake(self.body.position.x+self.body.size.width/2, self.body.position.y) anchorB:CGPointMake(self.head.position.x+self.head.size.width/2, self.body.position.y-self.body.size.height/2)];
spring.frequency = 10.0; //gives the spring some elasticity.
spring.damping = 1.0;
[bobbleheadScene.physicsWorld addJoint:spring];
}
return self;
}
-(void)animateBobble{
NSLog(#"Did Tap Bobblehead!");
[self.head.physicsBody applyImpulse:CGVectorMake(100, -200)];
//[self.body.physicsBody applyImpulse:CGVectorMake(20, 10)];
}
The only way you'll get this to work is to make a "sled".
So: make an app where, on screen there are (say) six sliders.
TBC I mean, when the app is actually running, you'll see six sliders.
TBC, this is only a sled, it's only for you as a developer, it's not for the consumer app.
(I believe the term "sled" comes from the automotive industry; when they make the first version of a chassis/engine to test it out.)
Make it so that some sliders control spring power/damp (or whatever factors you have available in cocos) and that other sliders nudge the position of the connections/spring lengths.
it's the only way to get a result! Be sure to show the values on screen, or at least print them out on the console as they change.
This is the everyday thing in game development. Typically the sled is more work than the actual consumer scene or feature. You won't be able to achieve it without a "sled". I hope it helps!
Using iOS 7's custom view controller transitions, I want to achieve a visual effect similar to Apple's default view controller transition in iOS 7.
(The one where you can slide to pop a view controller off the stack by sliding it from the left to the right, where the top view controller slides off the top of the other with a shadow and the navigation bar shifts.)
I'm having a great deal of difficulty implementing this, though. Most of the tutorials on custom view controllers go with very different effects than the default in order to show what the API is capable off, but I want to replicate this one.
In my subclass for implementing <UIViewControllerAnimatedTransitioning> I have the following code for the interactive animation:
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
[transitionContext.containerView addSubview:toViewController.view];
[transitionContext.containerView addSubview:fromViewController.view];
fromViewController.view.layer.shadowOffset = CGSizeMake(0.0, 0.0);
fromViewController.view.layer.shadowColor = [UIColor blackColor].CGColor;
fromViewController.view.layer.shadowRadius = 5.0;
fromViewController.view.layer.shadowOpacity = 0.5;
[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 options:UIViewAnimationOptionCurveLinear animations:^{
CGRect newFrame = fromViewController.view.frame;
newFrame.origin.x = CGRectGetWidth(fromViewController.view.bounds);
fromViewController.view.frame = newFrame;
} completion:^(BOOL finished) {
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
}
However the shadow code makes it lag tremendously (even if I use the new snapshot methods) and I cannot figure out how to manipulate the navigation bar at all.
Has anyone tried to do something similar to this and are able to provide sample code?
Sample project for testing if you'd like: https://dzwonsemrish7.cloudfront.net/items/43260h1u1T1u010i0V3C/DefaultVCTransition.zip
Credit to objc.io for the base code.
Setting the shadowPath greatly increases the performance of this shadow.
Just add this in your animateTransition: method after you have set the shadow properties. This avoids the expensive offscreen rendering that shadow normally causes.
[fromViewController.view.layer setShadowPath:[[UIBezierPath bezierPathWithRect:fromViewController.view.bounds] CGPath]];
I downloaded your sample project and did that, the stutter is now completely gone.
Some info on what this does here.
EDIT:
The answer about manipulating the navigation bar animation is that it doesn't seem like you can. In order to do so you will need to reimplement your own NavigationController-type class from scratch. The transition animation for the navigation bar is done internally by the container view controller (the UINavigationController) and is not surfaced anywhere in the code.
Have a look at ECSlidingViewController I've used it a couple of times, if you understand how it works, you can easily implement something similar.
If you want to reinvent the wheel, my answer is no use, sorry.
I create the effect using Dynamics I create my own ViewController subclass with the next methods.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil forMultipleDirections:(BOOL)isTwoDirections;
- (void)addVelocityForGesture:(UIPanGestureRecognizer *)recognizer;
- (UIDynamicItemBehavior*) itemBehaviourForView;
Then I added physics and a gesture recognizer in order to handle the paning gesture. to make it look in top just add a shadow offset.
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.parentViewController.view];
_gravity = [[UIGravityBehavior alloc] init];
_gravity.gravityDirection = CGVectorMake(-1.5, 0);
[_animator addBehavior:_gravity];
UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:#[self.view]];
[collision addBoundaryWithIdentifier:#1 fromPoint:CGPointMake(0, 0) toPoint:CGPointMake(0, self.parentViewController.view.frame.size.height)];
[_animator addBehavior:collision];
[_gravity addItem:self.view];
UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:#[self.view]];
[itemBehavior setElasticity:0.2];
[_animator addBehavior:itemBehavior];
You will need more methods to add velocity according to the direction of the panning, then you will need to find a point where you want to dismiss or hide the childViewController depending in your use case, etc... I did it and it works pretty fine for me as it's using Dynamics it just supports iOS7+
I have a custom view (a small indicator derived from UIView with a rotation animation) which has basically a heart icon (UIImageView) on middle and a few balls (another UIImageView) rotating around it using layer animation. Here is my code:
-(void)performInitialization{
self.backgroundColor = [UIColor clearColor];
CGRect frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
[imageView setImage:[UIImage imageNamed:#"RedHeart"]];
balls = [[UIImageView alloc] initWithFrame:frame];
[balls setImage:[UIImage imageNamed:#"AngularBalls"]];
[self addSubview:imageView];
[self addSubview:balls];
[balls.layer beginRotating];
}
...where my category on CALayer has:
-(void)beginRotatingWithAngularVelocity:(float)velocity{
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
rotationAnimation.fillMode = kCAFillModeForwards;
rotationAnimation.removedOnCompletion = YES;
rotationAnimation.repeatCount = 999999;
rotationAnimation.duration = velocity;
rotationAnimation.cumulative = YES;
rotationAnimation.fromValue = [NSNumber numberWithFloat:0];
rotationAnimation.toValue = [NSNumber numberWithFloat:M_PI * 2];
[self addAnimation:rotationAnimation forKey:ROTATION_KEY];
}
-(void)beginRotating{
[self beginRotatingWithAngularVelocity:0.7];
}
performInitialization is called in the init[WithFrame|WithCoder] method of my view. I have one of these views in my storyboard's main view and the view animates perfectly. If I put several instances of my custom view into that main view, they all animate perfectly too. There is no problem if I put my view into any view on that storyboard. However, when I put that same view into a view from a nib, it won't animate. The same code, the same settings in IB (copy pasted to make sure everything is the same), but the view is still, stuck on the initial view as if there was no animation attached to the layer). Why would that happen? How can I make that animation work on nibs?
UPDATE: The problem appears to be related to having the animation on view's initializer. In some occasions, I am animating right inside initialization, but sometimes, after it is loaded (e.g. user clicked something and something is downloading). The problem appears to be consistent with the former case. My previous fallacy about being about storyboard vs. nibs apparently is just coincidence. I've updated the title accordingly.
Initialization is too early. You need to wait until the view is in your interface (signaled to the view by didMoveToWindow. Until then, the view is not part of the rendering tree (which is what does the drawing/animation of its layers).