iOS 18 rotate animation not working by layer for custom icon

UI Frameworks UIKit
T. P. OP
Created Sep ’24
Replies 2
Boosts 0
Views 624
Participants 2

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

<svg viewBox="0 0 3300 2200" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
 
 <style>.defaults {-sfsymbols-rotates-clockwise:true}

.monochrome-0 {-sfsymbols-motion-group:1;-sfsymbols-layer-tags:4b47bf2b34cce7a8}
.monochrome-1 {-sfsymbols-motion-group:0;-sfsymbols-layer-tags:4b47bf2b34cce7a8}

.multicolor-0:tintColor {-sfsymbols-motion-group:1;-sfsymbols-layer-tags:4b47bf2b34cce7a8}
.multicolor-1:tintColor {-sfsymbols-motion-group:0;-sfsymbols-layer-tags:4b47bf2b34cce7a8}

.hierarchical-0:secondary {-sfsymbols-motion-group:1;-sfsymbols-layer-tags:4b47bf2b34cce7a8}
.hierarchical-1:primary {-sfsymbols-motion-group:0;-sfsymbols-layer-tags:4b47bf2b34cce7a8}

.SFSymbolsPreviewWireframe {fill:none;opacity:1.0;stroke:black;stroke-width:0.5}
</style>
 <g id="Notes">
  <rect y="0" x="0" width="3300" style="fill:white;opacity:1" id="artboard" height="2200"></rect>
  <line y2="292" y1="292" x2="3036" x1="263" style="fill:none;stroke:black;opacity:1;stroke-width:0.5;"></line>
  <text transform="matrix(1 0 0 1 263 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;">Weight/Scale Variations</text>
  <text transform="matrix(1 0 0 1 559.711 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Ultralight</text>
  <text transform="matrix(1 0 0 1 856.422 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Thin</text>
  <text transform="matrix(1 0 0 1 1153.13 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Light</text>
  <text transform="matrix(1 0 0 1 1449.84 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Regular</text>
  <text transform="matrix(1 0 0 1 1746.56 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Medium</text>
  <text transform="matrix(1 0 0 1 2043.27 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Semibold</text>
  <text transform="matrix(1 0 0 1 2339.98 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Bold</text>
  <text transform="matrix(1 0 0 1 2636.69 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Heavy</text>
  <text transform="matrix(1 0 0 1 2933.4 322)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:middle;">Black</text>
  <line y2="1903" y1="1903" x2="3036" x1="263" style="fill:none;stroke:black;opacity:1;stroke-width:0.5;"></line>
  <g transform="matrix(0.2 0 0 0.2 263 1933)">
   <path d="m46.2402 4.15039c21.7773 0 39.4531-17.627 39.4531-39.4043s-17.6758-39.4043-39.4531-39.4043c-21.7285 0-39.4043 17.627-39.4043 39.4043s17.6758 39.4043 39.4043 39.4043Zm0-7.42188c-17.6758 0-31.9336-14.3066-31.9336-31.9824s14.2578-31.9824 31.9336-31.9824 31.9824 14.3066 31.9824 31.9824-14.3066 31.9824-31.9824 31.9824Zm-17.9688-31.9824c0 2.14844 1.51367 3.61328 3.75977 3.61328h10.498v10.5957c0 2.19727 1.46484 3.71094 3.61328 3.71094 2.24609 0 3.71094-1.51367 3.71094-3.71094v-10.5957h10.5957c2.19727 0 3.71094-1.46484 3.71094-3.61328 0-2.19727-1.51367-3.71094-3.71094-3.71094h-10.5957v-10.5469c0-2.24609-1.46484-3.75977-3.71094-3.75977-2.14844 0-3.61328 1.51367-3.61328 3.75977v10.5469h-10.498c-2.24609 0-3.75977 1.51367-3.75977 3.71094Z"></path>
  </g>
  <g transform="matrix(0.2 0 0 0.2 281.506 1933)">
   <path d="m58.5449 14.5508c27.4902 0 49.8047-22.3145 49.8047-49.8047s-22.3145-49.8047-49.8047-49.8047-49.8047 22.3145-49.8047 49.8047 22.3145 49.8047 49.8047 49.8047Zm0-8.30078c-22.9492 0-41.5039-18.5547-41.5039-41.5039s18.5547-41.5039 41.5039-41.5039 41.5039 18.5547 41.5039 41.5039-18.5547 41.5039-41.5039 41.5039Zm-22.6562-41.5039c0 2.39258 1.66016 4.00391 4.15039 4.00391h14.3555v14.4043c0 2.44141 1.66016 4.15039 4.05273 4.15039 2.44141 0 4.15039-1.66016 4.15039-4.15039v-14.4043h14.4043c2.44141 0 4.15039-1.61133 4.15039-4.00391 0-2.44141-1.70898-4.15039-4.15039-4.15039h-14.4043v-14.3555c0-2.49023-1.70898-4.19922-4.15039-4.19922-2.39258 0-4.05273 1.70898-4.05273 4.19922v14.3555h-14.3555c-2.49023 0-4.15039 1.70898-4.15039 4.15039Z"></path>
  </g>
  <g transform="matrix(0.2 0 0 0.2 304.924 1933)">
   <path d="m74.8535 28.3203c35.1074 0 63.623-28.4668 63.623-63.5742s-28.5156-63.623-63.623-63.623-63.5742 28.5156-63.5742 63.623 28.4668 63.5742 63.5742 63.5742Zm0-9.08203c-30.127 0-54.4922-24.3652-54.4922-54.4922s24.3652-54.4922 54.4922-54.4922 54.4922 24.3652 54.4922 54.4922-24.3652 54.4922-54.4922 54.4922Zm-28.8574-54.4922c0 2.58789 1.85547 4.39453 4.58984 4.39453h19.7266v19.7754c0 2.68555 1.85547 4.58984 4.44336 4.58984 2.68555 0 4.54102-1.85547 4.54102-4.58984v-19.7754h19.7754c2.68555 0 4.58984-1.80664 4.58984-4.39453 0-2.73438-1.85547-4.58984-4.58984-4.58984h-19.7754v-19.7266c0-2.73438-1.85547-4.63867-4.54102-4.63867-2.58789 0-4.44336 1.9043-4.44336 4.63867v19.7266h-19.7266c-2.73438 0-4.58984 1.85547-4.58984 4.58984Z"></path>
  </g>
  <text transform="matrix(1 0 0 1 263 1953)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;">Design Variations</text>
  <text transform="matrix(1 0 0 1 263 1971)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Symbols are supported in up to nine weights and three scales.</text>
  <text transform="matrix(1 0 0 1 263 1989)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">For optimal layout with text and other symbols, vertically align</text>
  <text transform="matrix(1 0 0 1 263 2007)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">symbols with the adjacent text.</text>
  <line y2="1933" y1="1919" x2="776" x1="776" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;"></line>
  <g transform="matrix(0.2 0 0 0.2 776 1933)">
   <path d="m16.5527 0.78125c2.58789 0 3.85742-0.976562 4.78516-3.71094l6.29883-17.2363h28.8086l6.29883 17.2363c0.927734 2.73438 2.19727 3.71094 4.73633 3.71094 2.58789 0 4.24805-1.5625 4.24805-4.00391 0-0.830078-0.146484-1.61133-0.537109-2.63672l-22.9004-60.9863c-1.12305-2.97852-3.125-4.49219-6.25-4.49219-3.02734 0-5.07812 1.46484-6.15234 4.44336l-22.9004 61.084c-0.390625 1.02539-0.537109 1.80664-0.537109 2.63672 0 2.44141 1.5625 3.95508 4.10156 3.95508Zm13.4766-28.3691 11.8652-32.8613h0.244141l11.8652 32.8613Z"></path>
  </g>
  <line y2="1933" y1="1919" x2="792.836" x1="792.836" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;"></line>
  <text transform="matrix(1 0 0 1 776 1953)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;">Margins</text>
  <text transform="matrix(1 0 0 1 776 1971)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Leading and trailing margins on the left and right side of each symbol</text>
  <text transform="matrix(1 0 0 1 776 1989)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">can be adjusted by modifying the x-location of the margin guidelines.</text>
  <text transform="matrix(1 0 0 1 776 2007)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Modifications are automatically applied proportionally to all</text>
  <text transform="matrix(1 0 0 1 776 2025)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">scales and weights.</text>
  <g transform="matrix(0.2 0 0 0.2 1289 1933)">
   <path d="m14.209 9.32617 8.49609 8.54492c4.29688 4.3457 9.22852 4.05273 13.8672-1.07422l53.4668-58.9355-4.83398-4.88281-53.0762 58.3984c-1.75781 2.00195-3.41797 2.49023-5.76172 0.146484l-5.85938-5.81055c-2.34375-2.29492-1.80664-4.00391 0.195312-5.81055l57.373-54.0039-4.88281-4.83398-57.959 54.4434c-4.93164 4.58984-5.32227 9.47266-1.02539 13.8184Zm32.0801-90.9668c-2.09961 2.05078-2.24609 4.93164-1.07422 6.88477 1.17188 1.80664 3.4668 2.97852 6.68945 2.14844 7.32422-1.70898 14.9414-2.00195 22.0703 2.68555l-2.92969 7.27539c-1.70898 4.15039-0.830078 7.08008 1.85547 9.81445l11.4746 11.5723c2.44141 2.44141 4.49219 2.53906 7.32422 2.05078l5.32227-0.976562 3.32031 3.36914-0.195312 2.7832c-0.195312 2.49023 0.439453 4.39453 2.88086 6.78711l3.80859 3.71094c2.39258 2.39258 5.46875 2.53906 7.8125 0.195312l14.5508-14.5996c2.34375-2.34375 2.24609-5.32227-0.146484-7.71484l-3.85742-3.80859c-2.39258-2.39258-4.24805-3.17383-6.64062-2.97852l-2.88086 0.244141-3.22266-3.17383 1.2207-5.61523c0.634766-2.83203-0.146484-5.0293-3.07617-7.95898l-10.9863-10.9375c-16.6992-16.6016-38.8672-16.2109-53.3203-1.75781Zm7.4707 1.85547c12.1582-8.88672 28.6133-7.37305 39.7461 3.75977l12.1582 12.0605c1.17188 1.17188 1.36719 2.09961 1.02539 3.80859l-1.61133 7.42188 7.51953 7.42188 4.93164-0.292969c1.26953-0.0488281 1.66016 0.0488281 2.63672 1.02539l2.88086 2.88086-12.207 12.207-2.88086-2.88086c-0.976562-0.976562-1.12305-1.36719-1.07422-2.68555l0.341797-4.88281-7.4707-7.42188-7.61719 1.26953c-1.61133 0.341797-2.34375 0.195312-3.56445-0.976562l-10.0098-10.0098c-1.26953-1.17188-1.41602-2.00195-0.634766-3.85742l4.39453-10.4492c-7.8125-7.27539-17.9688-10.4004-28.125-7.42188-0.78125 0.195312-1.07422-0.439453-0.439453-0.976562Z"></path>
  </g>
  <text transform="matrix(1 0 0 1 1289 1953)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;font-weight:bold;">Exporting</text>
  <text transform="matrix(1 0 0 1 1289 1971)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Symbols should be outlined when exporting to ensure the</text>
  <text transform="matrix(1 0 0 1 1289 1989)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">design is preserved when submitting to Xcode.</text>
  <text transform="matrix(1 0 0 1 3036 1933)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" id="template-version">Template v.6.0</text>
  <text transform="matrix(1 0 0 1 3036 1951)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;">Requires Xcode 16 or greater</text>
  <text transform="matrix(1 0 0 1 3036 1969)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;" id="descriptive-name">Generated from clock.arrow.trianglehead.clockwise.rotate.90</text>
  <text transform="matrix(1 0 0 1 3036 1987)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;text-anchor:end;">Typeset at 100.0 points</text>
  <text transform="matrix(1 0 0 1 263 726)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Small</text>
  <text transform="matrix(1 0 0 1 263 1156)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Medium</text>
  <text transform="matrix(1 0 0 1 263 1586)" style="stroke:none;fill:black;font-family:sans-serif;font-size:13;">Large</text>
 </g>
 <g id="Guides">
  <g transform="matrix(1 0 0 1 339 696)" style="fill:#27AAE1;stroke:none;" id="H-reference">
   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"></path>
  </g>
  <line y2="696" y1="696" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Baseline-S"></line>
  <line y2="625.541" y1="625.541" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Capline-S"></line>
  <g transform="matrix(1 0 0 1 339 1126)" style="fill:#27AAE1;stroke:none;" id="H-reference">
   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"></path>
  </g>
  <line y2="1126" y1="1126" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Baseline-M"></line>
  <line y2="1055.54" y1="1055.54" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Capline-M"></line>
  <g transform="matrix(1 0 0 1 339 1556)" style="fill:#27AAE1;stroke:none;" id="H-reference">
   <path d="M0.993654 0L3.63775 0L29.3281-67.1323L30.0303-67.1323L30.0303-70.459L28.1226-70.459ZM11.6885-24.4799L46.9815-24.4799L46.2315-26.7285L12.4385-26.7285ZM55.1196 0L57.7637 0L30.6382-70.459L29.4326-70.459L29.4326-67.1323Z"></path>
  </g>
  <line y2="1556" y1="1556" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Baseline-L"></line>
  <line y2="1485.54" y1="1485.54" x2="3036" x1="263" style="fill:none;stroke:#27AAE1;opacity:1;stroke-width:0.5;" id="Capline-L"></line>
  <line y2="720.121" y1="600.785" x2="2982.23" x1="2982.23" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" id="right-margin-Black-S"></line>
  <line y2="720.121" y1="600.785" x2="2884.57" x1="2884.57" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" id="left-margin-Black-S"></line>
  <line y2="720.121" y1="600.785" x2="1496.11" x1="1496.11" style="fill:none;stroke:#FF3B30;stroke-width:0.5;opacity:1.0;" id="right-margin-Regular-S"></line>
  <line y2="720.121" y1="600.785" x2="1403.58" x1="1403.58" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" id="left-margin-Regular-S"></line>
  <line y2="720.121" y1="600.785" x2="603.773" x1="603.773" style="fill:none;stroke:#FF3B30;stroke-width:0.5;opacity:1.0;" id="right-margin-Ultralight-S"></line>
  <line y2="720.121" y1="600.785" x2="515.649" x1="515.649" style="fill:none;stroke:#00AEEF;stroke-width:0.5;opacity:1.0;" id="left-margin-Ultralight-S"></line>
 </g>
 <g id="Symbols">
  <g transform="matrix(1 0 0 1 2884.57 696)" id="Black-S">
   <path d="M48.822 6.784C25.629 6.784 6.83-12.014 6.83-35.208C6.83-58.401 25.629-77.2 48.822-77.2C72.015-77.2 90.814-58.401 90.814-35.208L76.654-35.208C76.654-50.589 64.203-63.04 48.822-63.04C33.441-63.04 20.99-50.589 20.99-35.208C20.99-19.827 33.441-7.376 48.822-7.376C56.049-7.376 62.103-9.866 67.523-14.554C70.795-17.434 75.14-18.362 78.314-15.237C81.098-12.454 80.951-8.304 77.484-4.495C71.381 2.243 58.832 6.784 48.822 6.784ZM92.621-43.753C95.99-43.753 96.82-40.335 95.014-38.089L84.515-24.856C83.392-23.391 81.146-23.391 79.974-24.856L69.525-38.089C67.767-40.335 68.549-43.753 71.869-43.753L92.621-43.753Z" class="monochrome-0 multicolor-0:tintColor hierarchical-0:secondary SFSymbolsPreviewWireframe"></path>
   <path d="M48.828-56.543C46.777-56.543 45.068-54.834 45.068-52.783L45.068-33.203C45.068-32.275 45.41-31.348 46.094-30.42L54.492-19.385C56.006-17.383 58.154-17.041 60.107-18.359C61.865-19.531 62.012-21.875 60.645-23.731L46.826-42.432L52.588-24.805L52.588-52.783C52.588-54.834 50.879-56.543 48.828-56.543Z" class="monochrome-1 multicolor-1:tintColor hierarchical-1:primary SFSymbolsPreviewWireframe"></path>
  </g>
  <g transform="matrix(1 0 0 1 1403.58 696)" id="Regular-S">
   <path d="M46.173 4.15C24.396 4.15 6.72-13.477 6.72-35.254C6.72-57.031 24.396-74.658 46.173-74.658C67.902-74.658 85.577-57.031 85.577-35.254L78.107-35.254C78.107-52.93 63.849-67.236 46.173-67.236C28.497-67.236 14.191-52.93 14.191-35.254C14.191-17.578 28.497-3.271 46.173-3.271C56.574-3.271 65.802-8.252 71.564-15.869C72.931-17.676 75.031-18.213 76.837-17.09C78.595-16.016 79.132-13.525 77.619-11.621C70.343-1.904 58.869 4.15 46.173 4.15ZM90.021-42.871C93.097-42.871 93.829-40.772 92.169-38.428L83.478-26.074C82.111-24.17 80.06-24.17 78.742-26.074L70.05-38.477C68.439-40.772 69.171-42.871 72.199-42.871L90.021-42.871Z" class="monochrome-0 multicolor-0:tintColor hierarchical-0:secondary SFSymbolsPreviewWireframe"></path>
   <path d="M45.716-58.008C43.812-58.008 42.249-56.445 42.249-54.492L42.249-32.813C42.249-31.885 42.542-31.055 43.226-30.078L52.503-17.871C53.968-15.967 56.019-15.625 57.825-16.846C59.486-17.969 59.632-20.117 58.265-21.924L45.179-39.697L49.232-27.197L49.232-54.492C49.232-56.445 47.669-58.008 45.716-58.008Z" class="monochrome-1 multicolor-1:tintColor hierarchical-1:primary SFSymbolsPreviewWireframe"></path>
  </g>
  <g transform="matrix(1 0 0 1 515.649 696)" id="Ultralight-S">
   <path d="M44.079 1.949C23.528 1.949 6.851-14.724 6.851-35.275C6.851-55.827 23.528-72.5 44.079-72.5C64.627-72.5 81.304-55.827 81.304-35.275L79.1-35.275C79.1-54.631 63.435-70.255 44.079-70.255C24.723-70.255 9.1-54.631 9.1-35.275C9.1-15.92 24.723-0.296 44.079-0.296C56.977-0.296 68.476-7.411 74.328-17.752C74.697-18.288 75.343-18.461 75.924-18.201C76.41-17.899 76.584-17.225 76.205-16.592C70.02-5.649 57.91 1.949 44.079 1.949ZM87.155-41.667C88.46-41.667 88.965-40.748 88.077-39.539L80.112-28.139C79.426-27.098 78.465-27.098 77.783-28.139L69.818-39.497C68.933-40.748 69.438-41.667 70.74-41.667L87.155-41.667Z" class="monochrome-0 multicolor-0:tintColor hierarchical-0:secondary SFSymbolsPreviewWireframe"></path>
   <path d="M44.061-55.722C43.155-55.722 42.501-55.022 42.501-54.159L42.501-32.797C42.501-31.869 42.703-31.448 43.114-30.971L52.392-18.764C53.13-17.768 54.227-17.789 54.853-18.374C55.423-18.861 55.615-19.738 54.929-20.637L44.795-34.369L45.624-31.723L45.624-54.159C45.624-55.022 44.924-55.722 44.061-55.722Z" class="monochrome-1 multicolor-1:tintColor hierarchical-1:primary SFSymbolsPreviewWireframe"></path>
  </g>
 </g>
 <g id="Anchors">
  <circle style="fill:#FFCC00; opacity:1.0;" r="1" id="Black-S-rotate-anchor" cy="660.561" cx="2933.4"></circle>
  <circle style="fill:#FFCC00; opacity:1.0;" r="1" id="Regular-S-rotate-anchor" cy="660.515" cx="1449.75"></circle>
  <circle style="fill:#FFCC00; opacity:1.0;" r="1" id="Ultralight-S-rotate-anchor" cy="660.494" cx="559.71"></circle>
 </g>
</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),
])
Replies  2
Boosts  0
Views  624
Participants  2
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
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
iOS 18 rotate animation not working by layer for custom icon
First post date Last post date
 
 
Q