SF Symbol animation with MBS?

Extras
1

I’d like to invoke the animation Breathe, but don’t see animation as an option in the NSImageSymbolConfigurationMBS class or elsewhere. Is it possible?

2

Well, you may need to show it in a UIImageView for iOS to get the animation.

Sorry, not sure how to do this for macOS.

3

Yes, this is for macOS 26. I do see there is a Symbols framework for this that dates back to macOS 14. Symbols framework

4

Thanks. I can try that.

5

e.g.

Var n As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("globe")

Var iv As NSImageViewMBS = ImageViewer1.NSImageViewMBS
iv.Image = n
iv.addSymbolEffect NSSymbolVariableColorEffectMBS.effect.effectWithReversing

You can download a newer plugin here:

2 Likes
6

It’s always impressive how quickly and seemingly easily you do this, Christian. :+1: :slight_smile:

7 Likes
7

Thank you very much. The example with an Imageviewer runs perfectly, and I was able to add and terminate animation of SF Symbols. I’m trying to apply this to a button’s image (NSImageMBS) but so far without success. How to add symbol effects in this case?

8

Sorry, not sure about adding them to a button.

I can write code like this for NSButtonMBS class:

Var n As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("globe")

Var b As NSButtonMBS = Button1.NSButtonMBS
b.image = n
9

Yes, that’s what I’ve been doing. And making it a template. The goal is to animate the image when the button is clicked and a long process is invoked (in this case, using the Foundation Model – thanks for that – to work with text). Unlike the image well, I don’t see the ability to .addSymbolEvent to the image, though.

10

I got another example here:

// Create the symbol image (SF Symbol "globe")
var symbolImage as NSImageMBS = NSImageMBS.imageWithSystemSymbolName("globe")

// Create a symbol configuration with point size 30 and blue color
Const NSFontWeightRegular = 0
var scale as integer = NSImageSymbolConfigurationMBS.kSymbolScaleLarge
var config as NSImageSymbolConfigurationMBS = NSImageSymbolConfigurationMBS.configurationWithPointSize(30, NSFontWeightRegular, scale)

config = config.configurationWithHierarchicalColor(NSColorMBS.systemBlueColor)

// Apply configuration to the symbol image
var configuredImage as NSImageMBS = symbolImage.imageWithSymbolConfiguration(config)

// Create an NSImageView to display the symbol
var imageView as NSImageViewMBS = me.NSImageViewMBS
imageView.image = configuredImage
imageView.symbolConfiguration = config

// Add an animated symbol effect (macOS 14+)
Var effect As NSSymbolEffectMBS = NSSymbolVariableColorEffectMBS.effect.effectWithReversing
imageView.addSymbolEffect effect

imageView.imageScaling = NSImageViewMBS.NSImageScaleProportionallyUpOrDown

This makes the blue symbol using configurationWithHierarchicalColor and later asks the image view to scale up or down.

11

In a similar vein: I created an own SF symbol in the SF Symbol App and would like to use it in XOJO like any other SF symbol (NSImageMBS.imageWithSystemSymbolName(xxx)). In Xcode I would have to add the corresponding svg file as a new Symbol Image Set. Is there a way in XOJO to replicate this?