流畅的动画效果，在iOS应用计时器和循环

我的ViewController与星级看起来像这样（除了有10个星）流畅的动画效果，在iOS应用计时器和循环

当用户打开视图控制器的一些对象没有评级我想用非常简单的方式将用户的注意力指向这颗明星：突出显示动画的星星（每个字母一个接一个地突出显示时，您可以在现实世界中的某些广告上看到这种行为）。

一星强调
两星强调
三颗星高亮
......
关闭所有的人都

因此，这是怎样的方式我正在做

func delayWithSeconds(_ seconds: Double, completion: @escaping() ->()) { 
    DispatchQueue.main.asyncAfter(deadline: .now() + seconds) { 
     completion() 
    } 
} 

func ratingStarsAnimation() { 
    for i in 1...11 { 
     var timer : Double = 0.6 + Double(i)*0.12 
     delayWithSeconds(timer) { 
      ratingStars.rating = (i < 10) ? Double(i) : 0 
     } 
    } 
}

这是怎么回事？我有一个名为delayWithSeconds的函数来延迟动作，我使用这个函数来延迟每个星形突出显示。 0.6是动画开始之前的初始延迟。在所有星星都被突出显示之后 - 最后一步是关闭所有星星的突出显示。这段代码有效，但我不能说它很流畅。

我的问题是：

我怎样才能改变0.6 +双（I）* 0.12获得流畅的动画有什么感觉？
我认为我的延迟解决方案并不好 - 我如何才能更好地解决突出显示任务的流畅星星？

来源

2017-04-19 moonvader

您可以显示动画，你迄今取得并要了一个。 –

我如何显示它？ – moonvader

通过dropBox分享视频。 –

查看CADisplaylink类。它是一个链接到屏幕刷新率的专用计时器，在iOS上是60fps。它是许多第三方动画库的支柱。

用例：

var displayLink: CADisplayLink? 
let start: Double = 0 
let end: Double = 10 
let duration: CFTimeInterval = 5 // seconds 
var startTime: CFTimeInterval = 0 

let ratingStars = RatingView() 

func create() { 
    displayLink = CADisplayLink(target: self, selector: #selector(tick)) 
    displayLink?.add(to: .main, forMode: .defaultRunLoopMode) 
} 

func tick() { 
    guard let link = displayLink else { 
     cleanup() 
     return 
    } 

    if startTime == 0 { // first tick 
     startTime = link.timestamp 
     return 
    } 

    let maxTime = startTime + duration 
    let currentTime = link.timestamp 

    guard currentTime < maxTime else { 
     finish() 
     return 
    } 

    // Add math here to ease the animation 

    let progress = (currentTime - startTime)/duration 
    let progressInterval = (end - start) * Double(progress) 

    // get value =~ 0...10 
    let normalizedProgress = start + progressInterval 


    ratingStars.rating = normalizedProgress 
} 

func finish() { 
    ratingStars.rating = 0 
    cleanup() 
} 

func cleanup() { 
    displayLink?.remove(from: .main, forMode: .defaultRunLoopMode) 
    displayLink = nil 
    startTime = 0 
}

作为一个开始，这将让你的动画更加顺畅。如果你想添加缓动，你仍然需要添加一些三角函数，但这不应该太难。

CADisplaylink： https://developer.apple.com/reference/quartzcore/cadisplaylink
缓解曲线：http://gizma.com/easing/

来源

2017-04-19 08:11:18 AlexLittlejohn

流畅的动画效果，在iOS应用计时器和循环

回答

相关问题