Testing how to animate a NSBox on the screen.

100%

Testing how to animate a NSBox on the screen.

✓ Published0🌍 Public

Last edited Jun 12, 2019

Created on Jun 12, 2019

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Trying to get NSPanel to expand downward.

A JavaScript sketch demonstrates an attempt to animate an NSPanel downward using the Sketch plugin API. The code creates a floating panel with a title bar and close button, initially sized at 312 by 210 pixels. After displaying the panel, it calls `setFrame_display_animate` to enlarge its height by 50 pixels. However, because the panel's origin remains unchanged, the animation expands the panel upward instead of downward. The commented-out alternative adjusts the y-origin by negative 50 pixels, which would shift the panel up to achieve the desired downward expansion. The sketch relies on `NSThread.mainThread().threadDictionary` for panel management and `NSMakeRect` for frame geometry.

KKevinGutowski

66% 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

65% match

Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

KKevinGutowski

63% 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

60% match

Loading thumbnail…

Progressbar modal

This example demonstrates a modal progress bar displayed over the main application window, using a native macOS sheet to block interaction while a short task runs. The code creates an `NSProgressIndicator` with a blue tint, embeds it in an `NSWindow` configured as a document-modal sheet, and attaches it via `beginSheet_completionHandler` on `NSApplication.sharedApplication().mainWindow()`. The progress animation starts immediately, and the sheet closes after a three-second delay using `setTimeout` and `endSheet`, illustrating Apple’s AppKit APIs in JavaScript via JSTalk-style syntax.

KKevinGutowski

60% match

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

58% match

Loading thumbnail…

Animating the background blur of a NSView that is layer backed

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.

KKevinGutowski

56% match

Loading thumbnail…

Animation Benchmark

The animation benchmark renders up to 1,000 bouncing boxes, each moving in a circular path while cycling through background colors and displaying a changing count. A slider controls the number of boxes, and the view updates dynamically as the user adjusts it. The visualization uses d3.timer to drive the animation loop, updating each box’s style properties for position, color, and text. The grid is built with cloned DOM elements via d3.select and node.cloneNode, with enter and exit selections managing box creation and removal. Data consists of d3.range values bound to the box views.

Mmbostock

56% match