iOS 18 rotate animation not working by layer for custom icon

Question

T. P. OP

Created Sep ’24

Replies 2

Boosts 0

Participants 2

I have created a custom logo in the SFSymbols 6.1 app and exported it as SVG.

clock.arrow.trianglehead.clockwise.rotate.90.svg

The icon consists of two layers and I want them to animate by layer. This works for the wiggle effect (the two layers are moving independently), but not for the rotate effect (the logo moves as a whole). Why? This is my code:

let imageView = UIImageView()
imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(scale: .large)
imageView.image = UIImage(named: "clock.arrow.trianglehead.clockwise.rotate.90", in: nil, with: nil)
imageView.translatesAutoresizingMaskIntoConstraints = false

let imageView2 = UIImageView()
imageView2.preferredSymbolConfiguration = UIImage.SymbolConfiguration(scale: .large)
imageView2.image = UIImage(named: "clock.arrow.trianglehead.clockwise.rotate.90", in: nil, with: nil)
imageView2.translatesAutoresizingMaskIntoConstraints = false

imageView.addSymbolEffect(.rotate.byLayer, options: .repeat(.continuous));
imageView2.addSymbolEffect(.wiggle.byLayer, options: .repeat(.continuous));

view.addSubview(imageView)
view.addSubview(imageView2)

NSLayoutConstraint.activate([
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    imageView2.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    imageView2.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 40),
])

Boost

Answer 1

DTS Engineer OP

Apple

Sep ’24

There's no support for SVG with the various ImageI/O based image handling APIs available on our platforms. Please note that being able to provide Scalable Vector Graphic (SVG) images as Xcode image assets is a special functionality built into Xcode and does not reflect the state of the Image I/O and other image handling APIs. If you'd like us to consider adding the necessary functionality, please file an enhancement request using Feedback Assistant. Once you file the request, please post the FB number here.

If you're not familiar with how to file enhancement requests, take a look at Bug Reporting: How and Why?

0

Answer 2

T. P. OP

Sep ’24

I'm a bit confused now. Isn't SVGs the recommended way to export my custom symbols that I created in the SF Symbols app? If not, what other way am I supposed to export my custom symbol? And if it's not supposed to work, why does the wiggle effect works as expected?

0