¿Manejo correcto/limpieza/etc de CADisplayLink en animación personalizada Swift?

animation

Question

Considera esta animación de sincronización trivial usando CADisplayLink ,

var link:CADisplayLink?
var startTime:Double = 0.0
let animTime:Double = 0.2
let animMaxVal:CGFloat = 0.4
private func yourAnim()
{
if ( link != nil )
{
link!.paused = true
//A:
link!.removeFromRunLoop(
NSRunLoop.mainRunLoop(), forMode:NSDefaultRunLoopMode)
link = nil
}
link = CADisplayLink(target: self, selector: #selector(doorStep) )
startTime = CACurrentMediaTime()
link!.addToRunLoop(
NSRunLoop.currentRunLoop(), forMode:NSDefaultRunLoopMode)
}
func doorStep()
{
let elapsed = CACurrentMediaTime() - startTime
var ping = elapsed
if (elapsed > (animTime / 2.0)) {ping = animTime - elapsed}
let frac = ping / (animTime / 2.0)
yourAnimFunction(CGFloat(frac) * animMaxVal)
if (elapsed > animTime)
{
//B:
link!.paused = true
link!.removeFromRunLoop(
NSRunLoop.mainRunLoop(), forMode:NSDefaultRunLoopMode)
link = nil
yourAnimFunction(0.0)
}
}
func killAnimation()
{
// for example if the cell disappears or is reused
//C:
????!!!!
}

Parece que hay varios problemas.

En (A :), aunque el link no es nulo, puede que no sea posible eliminarlo de un bucle de ejecución. (Por ejemplo, alguien puede haberlo inicializado con link = link:CADisplayLink() - inténtalo para un fallo).

En segundo lugar, en (B :) parece ser un desastre ... seguramente hay una forma mejor (y más rápida), y ¿qué pasa si es nula a pesar de que el tiempo acaba de expirar?

Finalmente en (C :) si quieres romper la animación ... Me deprimí y no tengo idea de qué es lo mejor.

Y realmente el código en A: y B: debería ser el mismo derecho de llamada, una especie de llamada de limpieza.

Answer 1

Aquí hay un ejemplo simple que muestra cómo me gustaría implementar un CADisplayLink (en Swift 3):

class C { // your view class or whatever
private var displayLink: CADisplayLink?
private var startTime = 0.0
private let animLength = 5.0
func startDisplayLink() {
stopDisplayLink() // make sure to stop a previous running display link
startTime = CACurrentMediaTime() // reset start time
// create displayLink & add it to the run-loop
let displayLink = CADisplayLink(
target: self, selector: #selector(displayLinkDidFire)
)
displayLink.add(to: .main, forMode: .commonModes)
self.displayLink = displayLink
}
@objc func displayLinkDidFire(_ displayLink: CADisplayLink) {
var elapsed = CACurrentMediaTime() - startTime
if elapsed > animLength {
stopDisplayLink()
elapsed = animLength // clamp the elapsed time to the anim length
}
// do your animation logic here
}
// invalidate display link if it''s non-nil, then set to nil
func stopDisplayLink() {
displayLink?.invalidate()
displayLink = nil
}
}

Puntos a tener en cuenta:

• Estamos utilizando nil aquí para representar el estado en el que no se está ejecutando el enlace de visualización, ya que no hay una manera fácil de obtener esta información de un enlace de visualización invalidado.
• En lugar de usar removeFromRunLoop() , estamos usando invalidate() , que no se bloqueará si el enlace de visualización no se ha agregado a un ciclo de ejecución. Sin embargo, esta situación nunca debería surgir en primer lugar, ya que siempre estamos agregando inmediatamente el enlace de visualización al ciclo de ejecución después de crearlo.
• Hemos hecho que el displayLink privado para evitar que las clases externas lo pongan en un estado inesperado (p. Ej., Anularlo pero no configurarlo en nil ).
• Tenemos un solo método stopDisplayLink() que invalida el enlace de visualización (si no es nulo) y lo establece en nil , en lugar de copiar y pegar esta lógica.
• No estamos configurando paused como true antes de invalidar el enlace de pantalla, ya que esto es redundante.
• En lugar de forzar el desenvolvimiento del displayLink después de verificar que no sea nulo, estamos usando un encadenamiento opcional, por ejemplo, displayLink?.invalidate() (que llamará invalidate() si el enlace del display no es nulo). Si bien el desenvolvimiento de fuerza puede ser ''seguro'' en su situación dada (ya que no está comprobando), es potencialmente peligroso cuando se trata de refactorizar en el futuro, ya que puede reestructurar su lógica sin tener en cuenta el impacto que esto tiene en la fuerza .
• Estamos limitando el tiempo elapsed a la duración de la animación para garantizar que la lógica de la animación posterior no genere un valor fuera del rango esperado.
• Nuestro método de actualización displayLinkDidFire(_:) toma un solo argumento de tipo CADisplayLink , como lo requiere la documentación .

Answer 2

El ejemplo anterior es el mejor ejemplo de cómo usar CADisplayLink con eficiencia. Gracias a @Fattie y @digitalHound

No pude resistirme a agregar mi uso de las clases CADisplayLink y DisplayUpdater mediante ''digitalHound'' en PdfViewer usando WKWebView. Mi requisito era continuar con el desplazamiento automático del pdf a la velocidad seleccionable por el usuario.

Puede que la respuesta aquí no sea el lugar correcto, pero intento mostrar el uso de CADisplayLink aquí. (para otros como yo, que pueden implementar sus requisitos).

//
// PdfViewController.swift
//
import UIKit
import WebKit
class PdfViewController: UIViewController, DisplayUpdateReceiver {
@IBOutlet var mySpeedScrollSlider: UISlider! // UISlider in storyboard
var displayLinker: DisplayUpdateNotifier?
var myPdfFileName = ""
var myPdfFolderPath = ""
var myViewTitle = "Pdf View"
var myCanAnimate = false
var mySlowSkip = 0.0
// 0.125<=slow, 0.25=normal, 0.5=fast, 0.75>=faster
var cuScrollSpeed = 0.25
fileprivate var myPdfWKWebView = WKWebView(frame: CGRect.zero)
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.title = myViewTitle
let leftItem = UIBarButtonItem(title: "Back", style: .plain, target: self, action: #selector(PdfViewController.PdfBackClick))
navigationItem.leftBarButtonItem = leftItem
self.view.backgroundColor = UIColor.white.cgColor
mySpeedScrollSlider.minimumValue = 0.05
mySpeedScrollSlider.maximumValue = 4.0
mySpeedScrollSlider.isContinuous = true
mySpeedScrollSlider.addTarget(self, action: #selector(PdfViewController.updateSlider), for: [.valueChanged])
mySpeedScrollSlider.setValue(Float(cuScrollSpeed), animated: false)
mySpeedScrollSlider.backgroundColor = UIColor.white.cgColor
self.configureWebView()
let folderUrl = URL(fileURLWithPath: myPdfFolderPath)
let url = URL(fileURLWithPath: myPdfFolderPath + myPdfFileName)
myPdfWKWebView.loadFileURL(url, allowingReadAccessTo: folderUrl)
}
//MARK: - Button Action
@objc func PdfBackClick()
{
_ = self.navigationController?.popViewController(animated: true)
}
@objc func updateSlider()
{
if ( mySpeedScrollSlider.value <= mySpeedScrollSlider.minimumValue ) {
myCanAnimate = false
} else {
myCanAnimate = true
}
cuScrollSpeed = Double(mySpeedScrollSlider.value)
}
fileprivate func configureWebView() {
myPdfWKWebView.frame = view.bounds
myPdfWKWebView.translatesAutoresizingMaskIntoConstraints = false
myPdfWKWebView.navigationDelegate = self
myPdfWKWebView.isMultipleTouchEnabled = true
myPdfWKWebView.scrollView.alwaysBounceVertical = true
myPdfWKWebView.layer.backgroundColor = UIColor.red.cgColor //test
view.addSubview(myPdfWKWebView)
myPdfWKWebView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor ).isActive = true
myPdfWKWebView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
myPdfWKWebView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
myPdfWKWebView.bottomAnchor.constraint(equalTo: mySpeedScrollSlider.topAnchor).isActive = true
}
//MARK: - DisplayUpdateReceiver delegate
func displayWillUpdate(deltaTime: CFTimeInterval) {
guard myCanAnimate == true else {
return
}
var maxSpeed = 0.0
if cuScrollSpeed < 0.5 {
if mySlowSkip > 0.25 {
mySlowSkip = 0.0
} else {
mySlowSkip += cuScrollSpeed
return
}
maxSpeed = 0.5
} else {
maxSpeed = cuScrollSpeed
}
let scrollViewHeight = self.myPdfWKWebView.scrollView.frame.size.height
let scrollContentSizeHeight = self.myPdfWKWebView.scrollView.contentSize.height
let scrollOffset = self.myPdfWKWebView.scrollView.contentOffset.y
let xOffset = self.myPdfWKWebView.scrollView.contentOffset.x
if (scrollOffset + scrollViewHeight >= scrollContentSizeHeight)
{
return
}
let newYOffset = CGFloat( max( min( deltaTime , 1 ), maxSpeed ) )
self.myPdfWKWebView.scrollView.setContentOffset(CGPoint(x: xOffset, y: scrollOffset+newYOffset), animated: false)
}
}
extension PdfViewController: WKNavigationDelegate {
// MARK: - WKNavigationDelegate
public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
//print("didStartProvisionalNavigation")
}
public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//print("didFinish")
displayLinker = DisplayUpdateNotifier.init(listener: self)
myCanAnimate = true
}
public func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
//print("didFailProvisionalNavigation error:/(error)")
}
public func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
//print("didFail")
}
}

Ejemplo Llamar desde otra vista es como debajo.

Para cargar el archivo PDF desde la carpeta de documentos.

func callPdfViewController( theFileName:String, theFileParentPath:String){
if ( !theFileName.isEmpty && !theFileParentPath.isEmpty ) {
let pdfViewController = self.storyboard!.instantiateViewController(withIdentifier: "PdfViewController") as? PdfViewController
pdfViewController?.myPdfFileName = theFileName
pdfViewController?.myPdfFolderPath = theFileParentPath
self.navigationController!.pushViewController(pdfViewController!, animated: true)
} else {
// Show error.
}
}

Este ejemplo puede ser ''modificado'' para cargar la página web y desplazarse automáticamente a la velocidad seleccionada por el usuario.

Saludos

Sanjay

Answer 3

Me doy cuenta de que esta pregunta ya tiene una buena respuesta, pero aquí hay otro enfoque ligeramente diferente que ayuda a implementar animaciones suaves independientemente de la velocidad de cuadros del enlace de pantalla.

** (Enlace al proyecto de demostración disponible en la parte inferior de esta respuesta - ACTUALIZACIÓN: el código fuente del proyecto de demostración ahora se ha actualizado a Swift 4)

Para mi implementación, opté por envolver el enlace de visualización en su propia clase y configurar una referencia de delegado que se llamará con el tiempo delta (el tiempo entre la última llamada del enlace de visualización y la llamada actual) para que podamos realizar nuestras animaciones un poco más suavemente.

Actualmente estoy usando este método para animar ~ 60 vistas en la pantalla simultáneamente en un juego.

Primero vamos a definir el protocolo de delegado al que llamará nuestro contenedor para notificar los eventos de actualización.

// defines an interface for receiving display update notifications
protocol DisplayUpdateReceiver: class {
func displayWillUpdate(deltaTime: CFTimeInterval)
}

A continuación vamos a definir nuestra clase de contenedor de enlace de visualización. Esta clase tomará una referencia de delegado en la inicialización. Cuando se inicie, iniciará automáticamente nuestro enlace de pantalla y lo limpiará en deinit.

import UIKit
class DisplayUpdateNotifier {
// **********************************************
// MARK: Variables
// **********************************************
/// A weak reference to the delegate/listener that will be notified/called on display updates
weak var listener: DisplayUpdateReceiver?
/// The display link that will be initiating our updates
internal var displayLink: CADisplayLink? = nil
/// Tracks the timestamp from the previous displayLink call
internal var lastTime: CFTimeInterval = 0.0
// **********************************************
// MARK: Setup & Tear Down
// **********************************************
deinit {
stopDisplayLink()
}
init(listener: DisplayUpdateReceiver) {
// setup our delegate listener reference
self.listener = listener
// setup & kick off the display link
startDisplayLink()
}
// **********************************************
// MARK: CADisplay Link
// **********************************************
/// Creates a new display link if one is not already running
private func startDisplayLink() {
guard displayLink == nil else {
return
}
displayLink = CADisplayLink(target: self, selector: #selector(linkUpdate))
displayLink?.add(to: .main, forMode: .commonModes)
lastTime = 0.0
}
/// Invalidates and destroys the current display link. Resets timestamp var to zero
private func stopDisplayLink() {
displayLink?.invalidate()
displayLink = nil
lastTime = 0.0
}
/// Notifier function called by display link. Calculates the delta time and passes it in the delegate call.
@objc private func linkUpdate() {
// bail if our display link is no longer valid
guard let displayLink = displayLink else {
return
}
// get the current time
let currentTime = displayLink.timestamp
// calculate delta (
let delta: CFTimeInterval = currentTime - lastTime
// store as previous
lastTime = currentTime
// call delegate
listener?.displayWillUpdate(deltaTime: delta)
}
}

Para usarlo, simplemente inicialice una instancia del contenedor, pasando la referencia del oyente delegado, luego actualice sus animaciones en función del tiempo delta. En este ejemplo, el delegado pasa la llamada de actualización a la vista animable (de esta manera usted podría rastrear múltiples vistas animadas y hacer que cada una actualice sus posiciones a través de esta llamada).

class ViewController: UIViewController, DisplayUpdateReceiver {
var displayLinker: DisplayUpdateNotifier?
var animView: MoveableView?
override func viewDidLoad() {
super.viewDidLoad()
// setup our animatable view and add as subview
animView = MoveableView.init(frame: CGRect.init(x: 150.0, y: 400.0, width: 20.0, height: 20.0))
animView?.configureMovement()
animView?.backgroundColor = .blue
view.addSubview(animView!)
// setup our display link notifier wrapper class
displayLinker = DisplayUpdateNotifier.init(listener: self)
}
// implement DisplayUpdateReceiver function to receive updates from display link wrapper class
func displayWillUpdate(deltaTime: CFTimeInterval) {
// pass the update call off to our animating view or views
_ = animView?.update(deltaTime: deltaTime)
// in this example, the animatable view will remove itself from its superview when its animation is complete and set a flag
// that it''s ready to be used. We simply check if it''s ready to be recycled, if so we reset its position and add it to
// our view again
if animView?.isReadyForReuse == true {
animView?.reset(center: CGPoint.init(x: CGFloat.random(low: 20.0, high: 300.0), y: CGFloat.random(low: 20.0, high: 700.0)))
view.addSubview(animView!)
}
}
}

Nuestra función de actualización de vistas móviles se ve así:

func update(deltaTime: CFTimeInterval) -> Bool {
guard canAnimate == true, isReadyForReuse == false else {
return false
}
// by multiplying our x/y values by the delta time new values are generated that will generate a smooth animation independent of the framerate.
let smoothVel = CGPoint(x: CGFloat(Double(velocity.x)*deltaTime), y: CGFloat(Double(velocity.y)*deltaTime))
let smoothAccel = CGPoint(x: CGFloat(Double(acceleration.x)*deltaTime), y: CGFloat(Double(acceleration.y)*deltaTime))
// update velocity with smoothed acceleration
velocity.adding(point: smoothAccel)
// update center with smoothed velocity
center.adding(point: smoothVel)
currentTime += 0.01
if currentTime >= timeLimit {
canAnimate = false
endAnimation()
return false
}
return true
}

Si desea ver un proyecto de demostración completo, puede descargarlo desde GitHub aquí: Proyecto de demostración CADisplayLink