Animating the background blur of a NSView that is layer backed

100%

Animating the background blur of a NSView that is layer backed

✓ Published0🌍 Public

Last edited Jun 23, 2019

Created on Jun 23, 2019

This example demonstrates a layer-backed NSView that fades in with a Gaussian background blur over a fixed image, then reverses the effect. The animation cycles through a state where the view’s background transitions from fully transparent to a blurred, semi-transparent black overlay, using CABasicAnimation and CAAnimationGroup to coordinate opacity and blur radius changes. The code leverages the Objective-C libraries (NSView, CALayer, CIFilter) and the inherent layer-backing system to apply the blur filter via `CIGaussianBlur`, with timing controlled by `CAMediaTimingFunction`. The data source is a local PNG image file, and the animation runs on a timer, hiding the view after the fade-out completes.

AI-generated description

Similar vizzes

Loading thumbnail…

Blur / Fade Effect

The example shows a blur and fade effect applied to an image, where a sharp version is revealed beneath a blurred overlay. It uses a clipping mask composed of multiple circles to gradually erase the blurred layer, creating a localized focus effect as the mouse moves. The code relies on D3.js for SVG manipulation and transitions, along with an SVG `feGaussianBlur` filter for the blur effect and a mask for the reveal. The rendering is interactive, triggered by mouse movement over the image.

CCBasis

63% match

Loading thumbnail…

Getting a CALayer to animate implicitly

This example demonstrates implicit CALayer animation on macOS, where a red sublayer moves from one position to another when its `position` property changes. The code uses AppKit’s `NSPanel` and `NSView` with `wantsLayer` enabled, alongside Core Animation’s `CALayer` and `CATransaction` to animate the layer’s position over one second. The layer’s bounds and blue border are set explicitly, while the sublayer’s movement is triggered via a `setTimeout` callback, showing how implicit animations work for layer properties.

KKevinGutowski

62% match

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

59% match

Loading thumbnail…

Cocoa

This example shows a custom slider control built with Cocoa’s AppKit framework, using an `NSView` subclass to render a gradient-filled, rounded rectangular track. The view applies a linear gradient via `NSGradient` and sets a corner radius using layer-backed properties (`wantsLayer`, `layer.cornerRadius`). The code also attempts to load an image from a file named `knob.png` for the slider’s thumb, though the actual drawing of that image is commented out. The gradient and angle properties are exposed, with setters that trigger redraws via `setNeedsDisplay:`. The data source is the referenced image file, while the rendering relies on `drawRect:` and `drawInRect:angle:`.

IIliaIdakiev

58% match

Loading thumbnail…

Testing how to animate a NSBox on the screen.

This example demonstrates how to animate a red NSBox across a macOS window using AppKit’s animation proxy. The code creates a floating NSPanel, configures it with a custom style mask, and disables the minimize and zoom buttons. An NSBox is added as a subview to the panel’s flipped content view, then its frame origin is moved via the `animator()` proxy to trigger a smooth animation. The implementation relies on `NSThread.mainThread().threadDictionary` to manage the panel’s lifecycle for repeat executions.

KKevinGutowski

56% match

Loading thumbnail…

Gist 611b52546f9a7b7b6c57

This example demonstrates UIKit physics-based animation on iOS, where a small red square falls under simulated gravity within a 300-by-100-point view. It shows how a UIView child is added to a parent container, given a red background color, and then subjected to a UIGravityBehavior from the UIDynamicAnimator class. The code initializes the animator with the parent view as its reference view, then attaches the gravity behavior to the subview, causing it to accelerate downward. The rendering stays within the standard UIKit view hierarchy, with no external data sources involved.

CColinEberhardt

55% match

Loading thumbnail…

Adding a view overlay on the Sketch canvas

This example uses the Sketch JavaScript API to add a fixed-size green view overlay onto the canvas of the currently selected document. The code retrieves the canvas placeholder view and its first subview, then creates an NSView with a green background and adds it as a subview. Layout constraints—using NSLayoutConstraint and relatedBy methods—anchor the overlay to the top-left corner and enforce fixed width and height values of 40 and 100 points, respectively.

KKevinGutowski

54% match

Loading thumbnail…

Motion blur - Diagonal movement & Multiple filters

Fifteen circles radiate outward from a central point, each moving diagonally with a one-directional Gaussian blur filter applied via SVG’s `feGaussianBlur`. Clicking toggles the blur on and off, switching the title between “With” and “Without motion blur filter.” The code builds multiple `<filter>` elements, one per circle, and rotates each circle’s group so the blur aligns with its movement angle. It uses D3.js (v3) for data binding, SVG transforms, and event handling, with filters manipulated via `style("filter", ...)`.

FFrissAnalytics

52% match