cómo animar arco/carrera segmento donut y cambio de longitud

Question

necesito para animar arcos (aka segmentos de rosquilla) en los siguientes escenarios donde el arco mantiene un radio constante r al centro de círculo imaginario (el arco se sienta justo fuera del círculo).

1) Anime el ancho del trazo del arco de xa y, manteniendo un radio ry el ángulo alfa.

2) Anime el ángulo del arco de alfa a beta mientras mantiene un ancho y un radio de trazo constantes.

3) hacer 1 y 2 juntos, pero posiblemente con animaciones/temporizaciones independientes.

Esto es lo que tengo hasta ahora:

He implementado el arco dibujo como una vista personalizada que simplemente dibuja el arco con CGContextAddArc. Esto está bien para un arco estático pero no anima nada.

Además, sé cómo dibujar imágenes recortadas con cosas como [UIBezierPath addClip].

Esto último es interesante porque creo que para el escenario 1, puedo lograr el efecto deseado de dos maneras: seguir dibujando un arco y modificar tanto el trazo como el radio para mantener el mismo radio interno percibido (que soy no optimista, me temo que el radio "vibrará"), o dibujar un segmento de un círculo que crece en tamaño (tal vez simplemente modificando la escala con una transformación afín) y luego es recortado por una máscara circular estática.

Ahora, ¿cómo tomo todos estos conceptos y los selecciono en algún código de dibujo real? No necesito código real (aunque eso también estaría bien), pero más como un enfoque conceptual, como, ¿puedo hacer esto todo con un UIView con dibujo personalizado, o tenemos que hablar sobre animaciones de teclas personalizadas que entiendo involucrar a CALayers y tal. En otras palabras, ¿cuál es la arquitectura adecuada para hacer todo esto que sería más fácil de codificar y, al mismo tiempo, ser eficiente desde una perspectiva de composición para una animación fluida?

Answer 1

Ya puede hacer esto con un CAShapeLayer al crear la ruta para el arco y luego animar diferentes propiedades de trazo. Puede crear la ruta para el círculo completo y usar las propiedades strokeStart y strokeEnd para trazar solo una determinada parte del círculo. Vale la pena señalar que la capa de forma está centrada, por lo que aumentan igualmente hacia adentro y hacia afuera a medida que aumenta el ancho de la línea. Para contrarrestar esto, puede enmascararlo con la misma forma de círculo y doblar el ancho de línea o animar la ruta para que el radio aumente a la mitad del ancho de línea, de modo que el punto más interno tenga la misma distancia al centro en todo momento .

El primer ejemplo se puede hacer por la animación de la propiedad anchoLinea y la segunda se puede hacer por la animación de las propiedades strokeStart y strokeEnd

Answer 2

Debe implementar esto usando propiedades animables personalizadas en una subclase CALayer. This tutorial (con fuente here) es para crear gráficos circulares animados y se ve bastante bien. Debería poder modificarlo para sus requisitos.