流暢的動畫效果，在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應用計時器和循環

回答

相關問題