iphone - una - no se pudo verificar la app tutuapp

Crear una propiedad animable personalizada

Question

En UIView puedes cambiar el UIView fondo animado. Y en un UISlideView puedes cambiar el valor animado.

¿Puedes agregar una propiedad personalizada a tu propia subclase UIView para que pueda ser animada?

Si tengo un CGPath dentro de mi UIView entonces puedo animar su dibujo cambiando el porcentaje dibujado de la ruta.

¿Puedo encapsular esa animación en la subclase.

es decir, tengo un UIView con un CGPath que crea un círculo.

Si el círculo no está allí, representa el 0%. Si el círculo está lleno, representa el 100%. Puedo dibujar cualquier valor cambiando el porcentaje dibujado de la ruta. También puedo animar el cambio (dentro de la subclase UIView) animando el porcentaje de CGPath y CGPath dibujar la ruta.

¿Puedo establecer alguna propiedad (es decir, porcentaje) en la UIView para poder pegar el cambio en un bloque UIView animateWithDuration y animar el cambio del porcentaje de la ruta?

Espero haber explicado lo que me gustaría hacer bien.

Esencialmente, todo lo que quiero hacer es algo como ...

[UIView animateWithDuration:1.0
animations:^{
myCircleView.percentage = 0.7;
}
completion:nil];

y el camino del círculo anima al porcentaje dado.

Answer 1

Para los que necesitan más detalles sobre eso como yo lo hice:

Hay un buen ejemplo de Apple que cubre esta pregunta.

Por ejemplo, gracias a él, descubrí que no es necesario agregar la capa personalizada como subcapa (como sugiere @Tom van Zummeren ). En su lugar, es suficiente agregar un método de clase a tu clase de Vista:

+ (Class)layerClass
{
return [CustomLayer class];
}

Espero que ayude a alguien.

Answer 2

Si extiendes CALayer e implementas tu personalizado

- (void) drawInContext:(CGContextRef) context

Puedes hacer una propiedad animable anulando needsDisplayForKey (en tu clase CALayer personalizada) de esta manera:

+ (BOOL) needsDisplayForKey:(NSString *) key {
if ([key isEqualToString:@"percentage"]) {
return YES;
}
return [super needsDisplayForKey:key];
}

Por supuesto, también debe tener un percentage llamado @property . A partir de ahora, puede animar la propiedad de porcentaje utilizando la animación central. No verifiqué si funciona también usando la [UIView animateWithDuration...] . Podría funcionar. Pero esto funcionó para mí:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"percentage"];
animation.duration = 1.0;
animation.fromValue = [NSNumber numberWithDouble:0];
animation.toValue = [NSNumber numberWithDouble:100];
[myCustomLayer addAnimation:animation forKey:@"animatePercentage"];

Ah, y para usar yourCustomLayer con myCircleView , haz esto:

[myCircleView.layer addSublayer:myCustomLayer];

Answer 3

Tendrá que implementar la parte porcentual usted mismo. puede anular el código de dibujo de capa para dibujar su cgpath según el valor de porcentaje establecido. Verifique la guía de programación de animación principal y los tipos de animación y guía de sincronización.

Answer 4

Ejemplo completo de Swift 3:

public class CircularProgressView: UIView {
public dynamic var progress: CGFloat = 0 {
didSet {
progressLayer.progress = progress
}
}
fileprivate var progressLayer: CircularProgressLayer {
return layer as! CircularProgressLayer
}
override public class var layerClass: AnyClass {
return CircularProgressLayer.self
}
override public func action(for layer: CALayer, forKey event: String) -> CAAction? {
if event == #keyPath(CircularProgressLayer.progress),
let action = action(for: layer, forKey: #keyPath(backgroundColor)) as? CAAnimation {
let animation = CABasicAnimation()
animation.keyPath = #keyPath(CircularProgressLayer.progress)
animation.fromValue = progressLayer.progress
animation.toValue = progress
animation.beginTime = action.beginTime
animation.duration = action.duration
animation.speed = action.speed
animation.timeOffset = action.timeOffset
animation.repeatCount = action.repeatCount
animation.repeatDuration = action.repeatDuration
animation.autoreverses = action.autoreverses
animation.fillMode = action.fillMode
animation.timingFunction = action.timingFunction
animation.delegate = action.delegate
self.layer.add(animation, forKey: #keyPath(CircularProgressLayer.progress))
}
return super.action(for: layer, forKey: event)
}
}
/*
* Concepts taken from:
* https://.com/a/37470079
*/
fileprivate class CircularProgressLayer: CALayer {
@NSManaged var progress: CGFloat
let startAngle: CGFloat = 1.5 * .pi
let twoPi: CGFloat = 2 * .pi
let halfPi: CGFloat = .pi / 2
override class func needsDisplay(forKey key: String) -> Bool {
if key == #keyPath(progress) {
return true
}
return super.needsDisplay(forKey: key)
}
override func draw(in ctx: CGContext) {
super.draw(in: ctx)
UIGraphicsPushContext(ctx)
//Light Grey
UIColor.lightGray.setStroke()
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let strokeWidth: CGFloat = 4
let radius = (bounds.size.width / 2) - strokeWidth
let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: twoPi, clockwise: true)
path.lineWidth = strokeWidth
path.stroke()
//Red
UIColor.red.setStroke()
let endAngle = (twoPi * progress) - halfPi
let pathProgress = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle , clockwise: true)
pathProgress.lineWidth = strokeWidth
pathProgress.lineCapStyle = .round
pathProgress.stroke()
UIGraphicsPopContext()
}
}
let circularProgress = CircularProgressView(frame: CGRect(x: 0, y: 0, width: 80, height: 80))
UIView.animate(withDuration: 2, delay: 0, options: .curveEaseInOut, animations: {
circularProgress.progress = 0.76
}, completion: nil)

Aquí hay un gran artículo de objc, que incluye detalles sobre cómo funciona esto.

Así como un proyecto de objc que usa los mismos conceptos here :

Esencialmente, se llamará a action (for layer :) cuando un objeto se esté animando desde un bloque de animación, podemos comenzar nuestras propias animaciones con las mismas propiedades (robadas de la propiedad backgroundColor) y animar los cambios.