In my app, I use UIKit Dynamics including a UICollisionBehavior to have a menu bounce when it opens and when it closes. The code I'm using for this is below. This has been working fine for iOS8. With iOS9 (including iOS9.1 beta 2 just released), however, I'm finding an odd issue. On the surface, the menu I'm bouncing with this bouncing animation wasn't full closing after opening and then closing it. Looking more closely, I find that the boundaries for the UICollisionBehavior are computed with the same values across iOS8 and iOS9.
Menu opening collision boundary: (798,330) to (1024,330)
Which represents a line, on screen, where the bottom of the menu should finally rest after opening and bouncing.
Menu closing collision boundary: (798,-280) to (1024,-280)
Which represents a line, off screen, where the top of the menu should finally rest after closing and bouncing.
The problem comes in iOS9 where the menu UIView doesn't actually end up resting finally at these boundaries. After opening, the menu frame looks like this with iOS9:
(798, -1.5; 226, 330) [This is: (x, y; w, h)]
and after closing, the menu frame looks like:
(798, -278.5; 226, 330)
BUT, this should actually be:
(798, 0; 226, 330) (after opening)
(798, -280; 226, 330) (after closing)
Anyone else seeing these issues with iOS9 and collision behaviors?
I'm about to put a hack in my code (search for "HACK" below), which I'll make selective for iOS9, but I really don't like these hacks!
BounceAnimation.h
//
// BounceAnimation.h
// Petunia
//
// Created by Christopher Prince on 12/18/14.
// Copyright (c) 2014 Spastic Muffin, LLC. All rights reserved.
//
// Animates an object through a straight line path, up, down, left or right until it lands, after which it bounces. This requires iOS8 or later.
#import <Foundation/Foundation.h>
#interface BounceAnimation : NSObject
// distnace is for the viewToAnimate to travel until it lands and bounces, in points. You must set this before calling run.
- (instancetype) initWithReferenceView: (UIView *) referenceView viewToAnimate: (UIView *) viewToAnimate andDistance: (CGFloat) distance;
// Direction and distance will be obtained from animateToPoint, and should be consistent with the constraints for the direction property below. I.e., the animateToPoint should be down, left, right, or up from the origin of the viewToAnimate.
- (instancetype) initWithReferenceView: (UIView *) referenceView viewToAnimate: (UIView *) viewToAnimate andFinalPoint: (CGPoint) animateToPoint;
// One shot animation. You can only call run once.
- (void) run;
// Called when animation completes, if given. Called when all the bouncing is done.
#property (nonatomic, strong) void (^completion)(void);
// Called when first contact is made with the boundary, just as the first bounce is about to begin.
#property (nonatomic, strong) void (^firstImpactCallback)(void);
// Only keeps weak references to the views passed in the init method.
#property (nonatomic, weak, readonly) UIView *referenceView;
#property (nonatomic, weak, readonly) UIView *viewToAnimate;
// Rate at which the object accelerates towards the boundary. Same units as magnitude for UIGravityBehavior. Defaults to 1.0.
#property (nonatomic) CGFloat accelerationRate;
// Defaults to 0. Units are points per second.
#property (nonatomic) CGFloat initialVelocity;
// This is a unit vector.
// dx (first component) is rightwards; e.g., dx=0, no right/left; dx=-1, is left one unit
// dy (second component) is downwards; e.g., dy=1, down one unit.
// Defaults to (0, 1), downwards.
// Right now, dx and dy can be 0, 1, or -1. One of dx and dy must be 0.
#property (nonatomic, readonly) CGVector direction;
#end
BounceAnimation.m
//
// BounceAnimation.m
// Petunia
//
// Created by Christopher Prince on 12/18/14.
// Copyright (c) 2014 Spastic Muffin, LLC. All rights reserved.
//
#import "BounceAnimation.h"
#import "Vector.h"
#import "UIDevice+Extras.h"
#interface BounceAnimation()<UIDynamicAnimatorDelegate, UICollisionBehaviorDelegate>
{
UIDynamicAnimator *_animator;
UIGravityBehavior *_gravityBehavior;
UICollisionBehavior *_collision;
UIDynamicItemBehavior *_velocity;
CGPoint _linearVelocity;
CGFloat _distanceInPoints;
BOOL _calledFirstImpactCallback;
}
#property (nonatomic, weak) UIView *referenceView;
#property (nonatomic, weak) UIView *viewToAnimate;
#property (nonatomic) CGVector direction;
#end
#define INITIAL_GRAVITY_MAGNITUDE 1.0
#implementation BounceAnimation
- (void) setupWithReferenceView: (UIView *) referenceView andViewToAnimate: (UIView *) viewToAnimate;
{
AssertIf([UIDevice ios7OrEarlier], #"Don't have at least iOS8!");
self.referenceView = referenceView;
self.viewToAnimate = viewToAnimate;
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:referenceView];
_animator.delegate = self;
_gravityBehavior = [[UIGravityBehavior alloc] initWithItems:#[viewToAnimate]];
_gravityBehavior.magnitude = INITIAL_GRAVITY_MAGNITUDE;
_velocity = [[UIDynamicItemBehavior alloc] initWithItems:#[viewToAnimate]];
}
// referenceView is just the view on top of which we're doing our animation. E.g., it could be self.view of a view controller. viewToAnimate must be a subview of the reference view.
- (instancetype) initWithReferenceView: (UIView *) referenceView viewToAnimate: (UIView *) viewToAnimate andDistance: (CGFloat) distanceInPoints;
{
self = [super init];
if (self) {
AssertIf(distanceInPoints <= 0.0, #"Invalid distance: %f", _distanceInPoints);
_distanceInPoints = distanceInPoints;
[self setupWithReferenceView:referenceView andViewToAnimate:viewToAnimate];
[self setDirection:CGVectorMake(0.0, 1.0)];
}
return self;
}
- (instancetype) initWithReferenceView: (UIView *) referenceView viewToAnimate: (UIView *) viewToAnimate andFinalPoint: (CGPoint) animateToPoint;
{
self = [super init];
if (self) {
// Need to compute distance and direction.
CGVector direction = [Vector subFirst:[Vector fromPoint:animateToPoint] from:[Vector fromPoint:viewToAnimate.frameOrigin]];
SPASLogDetail(#"direction after subtraction: %#", NSStringFromCGVector(direction));
// Special case: No direction because same start and finish.
if (direction.dy + direction.dx == 0.0) {
_distanceInPoints = 0.0;
}
else {
direction = [Vector normalize:direction]; // vectorNormalize(direction);
_distanceInPoints = [Vector distanceFromPoint:viewToAnimate.frameOrigin toPoint:animateToPoint];
}
SPASLogDetail(#"finalPoint: %#, direction: %#, distance: %f", NSStringFromCGPoint(animateToPoint), NSStringFromCGVector(direction), _distanceInPoints);
[self setupWithReferenceView:referenceView andViewToAnimate:viewToAnimate];
[self setDirection:direction];
}
return self;
}
- (void) setInitialVelocity:(CGFloat)initialVelocity;
{
_initialVelocity = initialVelocity;
// Only positive speeds in the velocity are relevant. Negative speeds reduce the velocity, they don't go the other direction.
_linearVelocity =
CGPointMake(initialVelocity * fabs(_direction.dx),
initialVelocity * fabs(_direction.dy));
}
- (void) setAccelerationRate:(CGFloat)accelerationRate;
{
_accelerationRate = accelerationRate;
_gravityBehavior.magnitude = accelerationRate;
}
// I'm only doing left, right, up, down animations because of the problem of rotating the viewToAnimate. I'm not sure I'll ever have a case where I want a rotated animated view. (Hmmm. If I want to do some kind of continuous animation, arbitrary direction with non-rotated objects could be cool!)
- (void) setDirection:(CGVector)direction;
{
if (_collision) {
[_animator removeBehavior:_collision];
_collision = nil;
}
if (_distanceInPoints == 0.0) {
// Why bother?
SPASLogDetail(#"Zero distance");
return;
}
// 9/24/15; HACK
//_distanceInPoints += 1.5;
// Since we're doing vector operations with one of the init methods above, the following seems risky!
//AssertIf(direction.dy != 0.0 && direction.dy != -1.0 && direction.dy != 1.0, #"Invalid dy: %f", direction.dy);
//AssertIf(direction.dx != 0.0 && direction.dx != -1.0 && direction.dx != 1.0, #"Invalid dx: %f", direction.dx);
_direction = direction;
_gravityBehavior.gravityDirection = direction;
_collision = [[UICollisionBehavior alloc] initWithItems:#[self.viewToAnimate]];
_collision.collisionDelegate = self;
CGPoint startBoundary;
CGPoint endBoundary;
#define SMALL_VALUE 0.05
BOOL (^closeToZero)(CGFloat) = ^(CGFloat value) {
if (value > -SMALL_VALUE && value < SMALL_VALUE) {
return YES;
}
else {
return NO;
}
};
if (closeToZero(direction.dx)) {
// Vertical motion.
CGFloat yBoundary = direction.dy * _distanceInPoints + self.viewToAnimate.frameY;
if (direction.dy > 0.0) {
// If we're going down, then we need to add the height of the self.viewToAnimate to our boundary. This is because the origin coords are in the *upper*, left of the viewToAnimate.
yBoundary += self.viewToAnimate.frameHeight;
}
startBoundary = CGPointMake(self.viewToAnimate.frameX, yBoundary);
endBoundary = CGPointMake(self.viewToAnimate.frameX + self.viewToAnimate.frameWidth, yBoundary);
}
else {
// Horizontal motion.
CGFloat xBoundary = direction.dx * _distanceInPoints + self.viewToAnimate.frameX;
if (direction.dx > 0.0) {
// If we're going to the right, then we need to add the width of the self.viewToAnimate to our boundary. This is because the origin coords are in the upper, *left* of the viewToAnimate.
xBoundary += self.viewToAnimate.frameWidth;
}
startBoundary = CGPointMake(xBoundary, self.viewToAnimate.frameY);
endBoundary = CGPointMake(xBoundary, self.viewToAnimate.frameY + self.viewToAnimate.frameHeight);
}
SPASLog(#"startBoundary: %#, endBoundary: %#", NSStringFromCGPoint(startBoundary), NSStringFromCGPoint(endBoundary));
[_collision addBoundaryWithIdentifier:#"barrier"
fromPoint:startBoundary
toPoint:endBoundary];
[_animator addBehavior:_collision];
}
- (void) run;
{
if (_collision) {
[_animator addBehavior:_gravityBehavior];
[_velocity addLinearVelocity:_linearVelocity forItem:self.viewToAnimate];
[_animator addBehavior:_velocity];
}
else {
if (self.completion) {
self.completion();
}
}
}
#pragma mark - UIDynamicAnimatorDelegate methods
- (void)dynamicAnimatorDidPause:(UIDynamicAnimator*)animator;
{
if (self.completion) {
self.completion();
}
}
#pragma mark -
#pragma mark - UICollisionBehaviorDelegate methods
// This isn't the method that gets called in our case.
//- (void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id <UIDynamicItem>)item1 withItem:(id <UIDynamicItem>)item2 atPoint:(CGPoint)p;
- (void)collisionBehavior:(UICollisionBehavior*)behavior beganContactForItem:(id <UIDynamicItem>)item withBoundaryIdentifier:(id <NSCopying>)identifier atPoint:(CGPoint)p;
{
if (!_calledFirstImpactCallback) {
_calledFirstImpactCallback = YES;
if (self.firstImpactCallback) {
self.firstImpactCallback();
}
}
}
#pragma mark -
#end
I'm working in Swift, and I am seeing the same behavior as you do with 1.5 points offset. It seems to be unrelated to the resolution of the device (1x, 2x or 3x), all have 1.5 points offset.
However, using the the path-based API, the problem seems to not be there anymore:
let collisionBehavior: UICollisionBehavior = ...
let topLeft: CGPoint = ...
let bottomLeft: CGPoint = ...
let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, topLeft.x, topLeft.y)
CGPathAddLineToPoint(path, nil, bottomLeft.x, bottomLeft.y)
let bezierPath = UIBezierPath(CGPath: path)
collisionBehavior.addBoundaryWithIdentifier("myID", forPath: bezierPath)
Converting this to Objective-C is easy enough:
UICollisionBehavior *collisionBehavior = ...
CGPoint topLeft = ...
CGPoint bottomLeft = ...
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, topLeft.x, topLeft.y);
CGPathAddLineToPoint(path, nil, bottomLeft.x, bottomLeft.y);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithCGPath: path];
[collisionBehavior addBoundaryWithIdentifier: #"myID" forPath: path];
Related
I need two things similar to Pages app in my Mac OS X app. Please view the attached screen shot.
I need a shadow on NSScrollView as shown in Mac OS X Pages app.
I want my scroll bar to be like the one in Mac OS X Pages app.
A quick and easy way of getting the top shadow is to override the enclosing clip view. This is not ideal however, because it draws the shadow (actually a gradient) behind the controls. I find it good enough.
#import <Cocoa/Cocoa.h>
// DFInvertedClipView.h
IB_DESIGNABLE
#interface DFInvertedClipView : NSClipView
#property IBInspectable BOOL shouldDrawTopShadow;
#end
// DFInvertedClipView.m
#import "DFInvertedClipView.h"
#interface DFInvertedClipView ()
#property CGFloat startAlpha;
#end
#implementation DFInvertedClipView
- (BOOL) isFlipped {
return true;
}
-(void) drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
if (_shouldDrawTopShadow) {
NSGradient * gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.6 alpha:self.startAlpha]
endingColor:[NSColor colorWithCalibratedWhite:0.6 alpha:0.0]];
NSRect b = [self bounds];
NSRect topFade = NSMakeRect(NSMinX(b), NSMinY(b), NSWidth(b), 5.0);
[gradient drawInRect:topFade angle:90];
NSBezierPath *topLine = [NSBezierPath bezierPath];
[topLine moveToPoint:NSMakePoint(NSMinX(self.bounds), NSMinY(self.bounds))];
[topLine lineToPoint:NSMakePoint(NSMaxX(self.bounds), NSMinY(self.bounds))];
CGFloat lineWidth = [[NSScreen mainScreen] backingScaleFactor];
[topLine setLineWidth:lineWidth];
[[NSColor colorWithCalibratedWhite:0.5 alpha:self.startAlpha] setStroke];
[topLine stroke];
}
}
-(void) scrollToPoint:(NSPoint)newOrigin
{
[super scrollToPoint:newOrigin];
// Grade the shadow darkness based on the displacement from a flush fit
CGFloat displacementForFullShadow = 40.0; // pixels
if (newOrigin.y > 0) {
CGFloat alpha = 1.0/displacementForFullShadow * newOrigin.y; // e.g. linear grade function y = m*x + c (m = 1/displacementForFullShadow, c = 0.0)
if (alpha > 1.0) {
alpha = 1.0;
}
self.startAlpha = alpha;
} else {
self.startAlpha = 0.0;
}
}
The shadow of the view above is achieved by setting custom CALayer options of this view (you'll be probably interested in mask-property). Just check the View Effects Inspector from the IB (or you can do it programmatically too - read this)
To remove scroll view knobs' light style open NSScrollView attributes inspector in IB and select Scroller Knobs style to "Default Style" (second line).
I have imported the CrumbPath.h & .m and CrumPathView.h & .m into my project from the Sample code provided by Apple.
It is working fine, until I want to control the lineWidth of the CrumbPath, In a previous question we solved how to use value from 'Sliderchanged' to populate the 'CGFloat lineWidth ='
Linked here: Use value from UISlider to change another variable?
Now I have hit the problem that the line is not showing at all in the simulator...
CrumbPathView.m
#import "CrumbPathView.h"
#import "CrumbPath.h"
#import "FirstViewController.h"
#interface CrumbPathView (FileInternal)
- (CGPathRef)newPathForPoints:(MKMapPoint *)points
pointCount:(NSUInteger)pointCount
clipRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale;
#end
#implementation CrumbPathView
-(IBAction)sliderChanged:(UISlider *)sender
{
}
- (void)drawMapRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale
inContext:(CGContextRef)context
{
CrumbPath *crumbs = (CrumbPath *)(self.overlay);
CGFloat lineWidth = self.sliderChanged.value;
// outset the map rect by the line width so that points just outside
// of the currently drawn rect are included in the generated path.
MKMapRect clipRect = MKMapRectInset(mapRect, -lineWidth, -lineWidth);
[crumbs lockForReading];
CGPathRef path = [self newPathForPoints:crumbs.points
pointCount:crumbs.pointCount
clipRect:clipRect
zoomScale:zoomScale];
[crumbs unlockForReading];
if (path != nil)
{
CGContextAddPath(context, path);
CGContextSetRGBStrokeColor(context, 0.0f, 0.0f, 1.0f, 0.5f);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextStrokePath(context);
CGPathRelease(path);
}
}
#end
#implementation CrumbPathView (FileInternal)
static BOOL lineIntersectsRect(MKMapPoint p0, MKMapPoint p1, MKMapRect r)
{
double minX = MIN(p0.x, p1.x);
double minY = MIN(p0.y, p1.y);
double maxX = MAX(p0.x, p1.x);
double maxY = MAX(p0.y, p1.y);
MKMapRect r2 = MKMapRectMake(minX, minY, maxX - minX, maxY - minY);
return MKMapRectIntersectsRect(r, r2);
}
#define MIN_POINT_DELTA 5.0
- (CGPathRef)newPathForPoints:(MKMapPoint *)points
pointCount:(NSUInteger)pointCount
clipRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale
{
// The fastest way to draw a path in an MKOverlayView is to simplify the
// geometry for the screen by eliding points that are too close together
// and to omit any line segments that do not intersect the clipping rect.
// While it is possible to just add all the points and let CoreGraphics
// handle clipping and flatness, it is much faster to do it yourself:
//
if (pointCount < 2)
return NULL;
CGMutablePathRef path = NULL;
BOOL needsMove = YES;
#define POW2(a) ((a) * (a))
// Calculate the minimum distance between any two points by figuring out
// how many map points correspond to MIN_POINT_DELTA of screen points
// at the current zoomScale.
double minPointDelta = MIN_POINT_DELTA / zoomScale;
double c2 = POW2(minPointDelta);
MKMapPoint point, lastPoint = points[0];
NSUInteger i;
for (i = 1; i < pointCount - 1; i++)
{
point = points[i];
double a2b2 = POW2(point.x - lastPoint.x) + POW2(point.y - lastPoint.y);
if (a2b2 >= c2) {
if (lineIntersectsRect(point, lastPoint, mapRect))
{
if (!path)
path = CGPathCreateMutable();
if (needsMove)
{
CGPoint lastCGPoint = [self pointForMapPoint:lastPoint];
CGPathMoveToPoint(path, NULL, lastCGPoint.x, lastCGPoint.y);
}
CGPoint cgPoint = [self pointForMapPoint:point];
CGPathAddLineToPoint(path, NULL, cgPoint.x, cgPoint.y);
}
else
{
// discontinuity, lift the pen
needsMove = YES;
}
lastPoint = point;
}
}
#undef POW2
// If the last line segment intersects the mapRect at all, add it unconditionally
point = points[pointCount - 1];
if (lineIntersectsRect(lastPoint, point, mapRect))
{
if (!path)
path = CGPathCreateMutable();
if (needsMove)
{
CGPoint lastCGPoint = [self pointForMapPoint:lastPoint];
CGPathMoveToPoint(path, NULL, lastCGPoint.x, lastCGPoint.y);
}
CGPoint cgPoint = [self pointForMapPoint:point];
CGPathAddLineToPoint(path, NULL, cgPoint.x, cgPoint.y);
}
return path;
}
#end
CrumbPathView.h
#import <MapKit/MapKit.h>
#import <UIKit/UIKit.h>
#interface CrumbPathView : MKOverlayView
{
}
#property (weak, nonatomic) IBOutlet UISlider *sliderChanged;
#end
When moving the slider the Output console logs the changes, but nothing changes visually. No Errors, but as I mentioned the CrumbPath is not showing at all... as if the lineWidth was set to '0'.
I'm creating a spotlight that moves over content in my app, like so:
In the sample app (shown above), the background layer is blue, and I have a layer over it that darkens all of it, except a circle that shows it normally. I've got this working (you can see how in the code below). In my real app, there is actual content in other CALayers, rather than just blue.
Here's my problem: it doesn't animate. I'm using CGContext drawing to create the circle (which is an empty spot in an otherwise black layer). When you click the button in my sample app, I draw the circle at a different size in a different location.
I would like that to smoothly translate and scale, instead of jumping, as it currently does. It may require a different method of creating the spotlight effect, or there might be a way I don't know of to implicitly animate the -drawLayer:inContext: call.
It's easy to create the sample app:
Make a new Cocoa app (using ARC)
Add the Quartz framework
Drop a custom view and a button onto the XIB
Link the custom view to a new class (SpotlightView), with code provided below
Delete SpotlightView.h, since I included its contents in SpotlightView.m
Set the button's outlet to the -moveSpotlight: action
Update (the mask property)
I like David Rönnqvist's suggestion in comments to use the mask property of the darkened layer to cut out a hole, which I could then move independently. The problem is that for some reason, the mask property works the opposite of how I expect a mask to work. When I specify a circular mask, all that shows up is the circle. I expected the mask to work in the opposite manner, masking out the area with 0 alpha.
Masking feels like the right way to go about this, but if I have to fill in the entire layer and cut out a hole, then I may as well do it the way I originally posted. Does anyone know how to invert the -[CALayer mask] property, so that the area drawn in gets cut out from the layer's image?
/Update
Here's the code for SpotlightView:
//
// SpotlightView.m
//
#import <Quartz/Quartz.h>
#interface SpotlightView : NSView
- (IBAction)moveSpotlight:(id)sender;
#end
#interface SpotlightView ()
#property (strong) CALayer *spotlightLayer;
#property (assign) CGRect highlightRect;
#end
#implementation SpotlightView
#synthesize spotlightLayer;
#synthesize highlightRect;
- (id)initWithFrame:(NSRect)frame {
if ((self = [super initWithFrame:frame])) {
self.wantsLayer = YES;
self.highlightRect = CGRectNull;
self.spotlightLayer = [CALayer layer];
self.spotlightLayer.frame = CGRectInset(self.layer.bounds, -50, -50);
self.spotlightLayer.autoresizingMask = kCALayerWidthSizable | kCALayerHeightSizable;
self.spotlightLayer.opacity = 0.60;
self.spotlightLayer.delegate = self;
CIFilter *blurFilter = [CIFilter filterWithName:#"CIGaussianBlur"];
[blurFilter setValue:[NSNumber numberWithFloat:5.0]
forKey:#"inputRadius"];
self.spotlightLayer.filters = [NSArray arrayWithObject:blurFilter];
[self.layer addSublayer:self.spotlightLayer];
}
return self;
}
- (void)drawRect:(NSRect)dirtyRect {}
- (void)moveSpotlight:(id)sender {
[self.spotlightLayer setNeedsDisplay];
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
if (layer == self.spotlightLayer) {
CGContextSaveGState(ctx);
CGColorRef blackColor = CGColorCreateGenericGray(0.0, 1.0);
CGContextSetFillColorWithColor(ctx, blackColor);
CGColorRelease(blackColor);
CGContextClearRect(ctx, layer.bounds);
CGContextFillRect(ctx, layer.bounds);
// Causes the toggling
if (CGRectIsNull(self.highlightRect) || self.highlightRect.origin.x != 25) {
self.highlightRect = CGRectMake(25, 25, 100, 100);
} else {
self.highlightRect = CGRectMake(NSMaxX(self.layer.bounds) - 50,
NSMaxY(self.layer.bounds) - 50,
25, 25);
}
CGRect drawnRect = [layer convertRect:self.highlightRect
fromLayer:self.layer];
CGMutablePathRef highlightPath = CGPathCreateMutable();
CGPathAddEllipseInRect(highlightPath, NULL, drawnRect);
CGContextAddPath(ctx, highlightPath);
CGContextSetBlendMode(ctx, kCGBlendModeClear);
CGContextFillPath(ctx);
CGPathRelease(highlightPath);
CGContextRestoreGState(ctx);
}
else {
CGColorRef blueColor = CGColorCreateGenericRGB(0, 0, 1.0, 1.0);
CGContextSetFillColorWithColor(ctx, blueColor);
CGContextFillRect(ctx, layer.bounds);
CGColorRelease(blueColor);
}
}
#end
I finally got it. What prodded me to the answer was hearing of the CAShapeLayer class. At first, I thought it would be a simpler way to draw the layer's contents, rather than drawing and clearing the contents of a standard CALayer. But I read the documentation of the path property of CAShapeLayer, which stated it could be animated, but not implicitly.
While a layer mask might have been more intuitive and elegant, it doesn't seem to be possible to use the mask to hide a portion of the owner's layer, rather than showing a portion, and so I couldn't use it. I'm happy with this solution, as it's pretty clear what's going on. I wish it used implicit animation, but the animation code is only a few lines.
Below, I've modified the sample code from the question to add smooth animation. (I removed the CIFilter code, because it was extraneous. The solution does still work with filters.)
//
// SpotlightView.m
//
#import <Quartz/Quartz.h>
#interface SpotlightView : NSView
- (IBAction)moveSpotlight:(id)sender;
#end
#interface SpotlightView ()
#property (strong) CAShapeLayer *spotlightLayer;
#property (assign) CGRect highlightRect;
#end
#implementation SpotlightView
#synthesize spotlightLayer;
#synthesize highlightRect;
- (id)initWithFrame:(NSRect)frame {
if ((self = [super initWithFrame:frame])) {
self.wantsLayer = YES;
self.highlightRect = CGRectNull;
self.spotlightLayer = [CAShapeLayer layer];
self.spotlightLayer.frame = self.layer.bounds;
self.spotlightLayer.autoresizingMask = kCALayerWidthSizable | kCALayerHeightSizable;
self.spotlightLayer.fillRule = kCAFillRuleEvenOdd;
CGColorRef blackoutColor = CGColorCreateGenericGray(0.0, 0.60);
self.spotlightLayer.fillColor = blackoutColor;
CGColorRelease(blackoutColor);
[self.layer addSublayer:self.spotlightLayer];
}
return self;
}
- (void)drawRect:(NSRect)dirtyRect {}
- (CGPathRef)newSpotlightPathInRect:(CGRect)containerRect
withHighlight:(CGRect)spotlightRect {
CGMutablePathRef shape = CGPathCreateMutable();
CGPathAddRect(shape, NULL, containerRect);
if (!CGRectIsNull(spotlightRect)) {
CGPathAddEllipseInRect(shape, NULL, spotlightRect);
}
return shape;
}
- (void)moveSpotlight {
CGPathRef toShape = [self newSpotlightPathInRect:self.spotlightLayer.bounds
withHighlight:self.highlightRect];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"path"];
pathAnimation.fromValue = (__bridge id)self.spotlightLayer.path;
pathAnimation.toValue = (__bridge id)toShape;
[self.spotlightLayer addAnimation:pathAnimation forKey:#"path"];
self.spotlightLayer.path = toShape;
CGPathRelease(toShape);
}
- (void)moveSpotlight:(id)sender {
if (CGRectIsNull(self.highlightRect) || self.highlightRect.origin.x != 25) {
self.highlightRect = CGRectMake(25, 25, 100, 100);
} else {
self.highlightRect = CGRectMake(NSMaxX(self.layer.bounds) - 50,
NSMaxY(self.layer.bounds) - 50,
25, 25);
}
[self moveSpotlight];
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
CGColorRef blueColor = CGColorCreateGenericRGB(0, 0, 1.0, 1.0);
CGContextSetFillColorWithColor(ctx, blueColor);
CGContextFillRect(ctx, layer.bounds);
CGColorRelease(blueColor);
}
#end
How can I create NSSlider animation when changing float value of it. I was trying:
[[mySlider animator] setFloatValue:-5];
but that didn't work.. just change the value without animation. So maybe someone knows how to do this?
Thanks in advance.
Ok - so this isn't as quick and pretty as I hoped but it works.
You can't actually use animators and Core Animation on the slider knob - because Core Animation works only on layers and there's no access to the knob values in the slider layer.
So we have to resort instead to manually animating slider value.
Since we're doing this on a Mac - you can use NSAnimation (which isn't available on iOS).
What NSAnimation does is simple - it provide an timing/interpolation mechanism to allow YOU to animate (as opposed to Core Animation which also connects to the views and handles the changes to them).
To use NSAnimation - you most commonly would subclass it and override setCurrentProgress:
and put your logic in there.
Here's how I implemented this - I created a new NSAnimation subclass called NSAnimationForSlider
NSAnimationForSlider.h :
#interface NSAnimationForSlider : NSAnimation
{
NSSlider *delegateSlider;
float animateToValue;
double max;
double min;
float initValue;
}
#property (nonatomic, retain) NSSlider *delegateSlider;
#property (nonatomic, assign) float animateToValue;
#end
NSAnimationForSlider.m :
#import "NSAnimationForSlider.h"
#implementation NSAnimationForSlider
#synthesize delegateSlider;
#synthesize animateToValue;
-(void)dealloc
{
[delegateSlider release], delegateSlider = nil;
}
-(void)startAnimation
{
//Setup initial values for every animation
initValue = [delegateSlider floatValue];
if (animateToValue >= initValue) {
min = initValue;
max = animateToValue;
} else {
min = animateToValue;
max = initValue;
}
[super startAnimation];
}
- (void)setCurrentProgress:(NSAnimationProgress)progress
{
[super setCurrentProgress:progress];
double newValue;
if (animateToValue >= initValue) {
newValue = min + (max - min) * progress;
} else {
newValue = max - (max - min) * progress;
}
[delegateSlider setDoubleValue:newValue];
}
#end
To use it - you simply create a new NSAnimationForSlider, give it the slider you are working on as a delegate and before each animation you set it's animateToValue and then just start the animation.
For example:
slider = [[NSSlider alloc] initWithFrame:NSMakeRect(50, 150, 400, 25)];
[slider setMaxValue:200];
[slider setMinValue:50];
[slider setDoubleValue:50];
[[window contentView] addSubview:slider];
NSAnimationForSlider *sliderAnimation = [[NSAnimationForSlider alloc] initWithDuration:2.0 animationCurve:NSAnimationEaseIn];
[sliderAnimation setAnimationBlockingMode:NSAnimationNonblocking];
[sliderAnimation setDelegateSlider:slider];
[sliderAnimation setAnimateToValue:150];
[sliderAnimation startAnimation];
Your method works, but there's something much simpler.
You can use the animator proxy, you just need to tell it how to animate it.
To do this, you need to implement the defaultAnimationForKey: method from the NSAnimatablePropertyContainer protocol.
Here's a simple subclass of NSSlider that does this:
#import "NSAnimatableSlider.h"
#import <QuartzCore/QuartzCore.h>
#implementation NSAnimatableSlider
+ (id)defaultAnimationForKey:(NSString *)key
{
if ([key isEqualToString:#"doubleValue"]) {
return [CABasicAnimation animation];
} else {
return [super defaultAnimationForKey:key];
}
}
#end
Now you can simply use the animator proxy:
[self.slider.animator setDoubleValue:100.0];
Make sure to link the QuartzCore framework.
Here is a Swift version of IluTov answer, setting a floatValue with some animation config:
override class func defaultAnimation(forKey key: NSAnimatablePropertyKey) -> Any? {
if key == "floatValue" {
let animation = CABasicAnimation()
animation.timingFunction = .init(name: .easeInEaseOut)
animation.duration = 0.2
return animation
} else {
return super.defaultAnimation(forKey: key)
}
}
I would like to make it so when the user rotates the device (to any angle, not just landscape/portrait) the UIImageView would always be facing upwards. How would I do this?
Thanks in advance
#interface FirstViewController : UIViewController <UIAccelerometerDelegate> {
IBOutlet UIImageView *imageView;
CGPoint delta;
CGPoint translation;
float ballRadius;
}
//implementation
- (void)viewDidLoad
{
[super viewDidLoad];
// for the line in the middle of the camera
UIAccelerometer *accel = [UIAccelerometer sharedAccelerometer];
accel.delegate = self;
accel.updateInterval = 1.0f/60.0f;
}
- (void)accelerometer:(UIAccelerometer *)acel
didAccelerate:(UIAcceleration *)acceleration {
// Get the current device angle
float xx = -[acceleration x];
float yy = [acceleration y];
float angle = atan2(yy, xx);
// Add 1.5 to the angle to keep the image constantly horizontal to the viewer.
[imageView setTransform:CGAffineTransformMakeRotation(angle+1.5)];
}