如何在 Swift 中为 UIImages 创建闪烁的指针效果
How to create a flashing pointer effect to UIImages in Swift
我正在尝试在 Swift 中创建指针效果。我有六个 UIImageView,每个都有一个以循环方式排序的 UIImage。我想创建一个动画,让每个图像在一定时间内闪烁(好像它是指针指示)。
我想用图像的透明版本创建一个数组,然后从中创建一个动画序列,但持续时间搞混了。
这就是我想要实现的想法。我希望图像有这种闪烁的效果,一张一张。
这就是我如何完成将视图放置在一个圆圈中并使它们成为 "flash"..
首先我创建了常规视图(我不想使用 ImageView,但您可以随意更改代码)..
我计算了视图需要围绕具有一定半径的中心点放置的角度..以使它们放置在一个圆圈中。
接下来我创建一个动画函数,它有正向和反向动画(我无法使 autoreverses
标志起作用)..
为了让一个接一个显示,我只需添加一个延迟(x2 因为正向 + 反向)..
为了弄清楚所有动画何时完成,我将整个函数包装在 CATransaction
.
中
注意:如果您不需要循环放置代码,只需将其删除即可。 AFAIK,你只需要动画代码。
//
// ViewController.swift
// TestSO
//
// Created by Brandon on 2018-03-03.
// Copyright © 2018 XIO. All rights reserved.
//
import UIKit
extension UIColor {
class func random() -> UIColor {
let rand = { (max: CGFloat) -> CGFloat in
let rnd = CGFloat(arc4random()) / CGFloat(UInt32.max)
return rnd * max
}
return UIColor(red: rand(1.0), green: rand(1.0), blue: rand(1.0), alpha: 1.0)
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let makeView = { () -> UIView in
let view = UIView()
view.backgroundColor = UIColor.random()
view.frame = CGRect(x: 0.0, y: 0.0, width: 50.0, height: 50.0)
self.view.addSubview(view)
return view
}
let imageViews = [
makeView(),
makeView(),
makeView(),
makeView(),
makeView(),
makeView()
]
let locationForView = { (angle: CGFloat, center: CGPoint, radius: CGFloat) -> CGPoint in
let angle = angle * CGFloat.pi / 180.0
return CGPoint(x: center.x - radius * cos(angle), y: center.y + radius * sin(angle))
}
for i in 0..<imageViews.count {
let center = self.view.center
let radius = ((150.0 + imageViews[i].bounds.size.width) / 2.0)
let count = imageViews.count
imageViews[i].center = locationForView(((360.0 / CGFloat(count)) * CGFloat(i)) + 90.0, center, radius)
}
self.animate(views: imageViews.reversed(), duration: 3.0, intervalDelay: 0.5)
}
private func animate(views: [UIView], duration: TimeInterval, intervalDelay: TimeInterval) {
CATransaction.begin()
CATransaction.setCompletionBlock {
print("COMPLETED ALL ANIMATIONS")
}
var delay: TimeInterval = 0.0
let interval = duration / TimeInterval(views.count)
for view in views {
let colour = view.backgroundColor
let transform = view.transform
UIView.animate(withDuration: interval, delay: delay, options: [.curveEaseIn], animations: {
view.backgroundColor = UIColor.red
view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}, completion: { (finished) in
UIView.animate(withDuration: interval, delay: 0.0, options: [.curveEaseIn], animations: {
view.backgroundColor = colour
view.transform = transform
}, completion: { (finished) in
})
})
delay += (interval * 2.0) + intervalDelay
}
CATransaction.commit()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
我正在尝试在 Swift 中创建指针效果。我有六个 UIImageView,每个都有一个以循环方式排序的 UIImage。我想创建一个动画,让每个图像在一定时间内闪烁(好像它是指针指示)。
我想用图像的透明版本创建一个数组,然后从中创建一个动画序列,但持续时间搞混了。
这就是我想要实现的想法。我希望图像有这种闪烁的效果,一张一张。
这就是我如何完成将视图放置在一个圆圈中并使它们成为 "flash"..
首先我创建了常规视图(我不想使用 ImageView,但您可以随意更改代码)..
我计算了视图需要围绕具有一定半径的中心点放置的角度..以使它们放置在一个圆圈中。
接下来我创建一个动画函数,它有正向和反向动画(我无法使
autoreverses
标志起作用)..为了让一个接一个显示,我只需添加一个延迟(x2 因为正向 + 反向)..
为了弄清楚所有动画何时完成,我将整个函数包装在
CATransaction
. 中
注意:如果您不需要循环放置代码,只需将其删除即可。 AFAIK,你只需要动画代码。
//
// ViewController.swift
// TestSO
//
// Created by Brandon on 2018-03-03.
// Copyright © 2018 XIO. All rights reserved.
//
import UIKit
extension UIColor {
class func random() -> UIColor {
let rand = { (max: CGFloat) -> CGFloat in
let rnd = CGFloat(arc4random()) / CGFloat(UInt32.max)
return rnd * max
}
return UIColor(red: rand(1.0), green: rand(1.0), blue: rand(1.0), alpha: 1.0)
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let makeView = { () -> UIView in
let view = UIView()
view.backgroundColor = UIColor.random()
view.frame = CGRect(x: 0.0, y: 0.0, width: 50.0, height: 50.0)
self.view.addSubview(view)
return view
}
let imageViews = [
makeView(),
makeView(),
makeView(),
makeView(),
makeView(),
makeView()
]
let locationForView = { (angle: CGFloat, center: CGPoint, radius: CGFloat) -> CGPoint in
let angle = angle * CGFloat.pi / 180.0
return CGPoint(x: center.x - radius * cos(angle), y: center.y + radius * sin(angle))
}
for i in 0..<imageViews.count {
let center = self.view.center
let radius = ((150.0 + imageViews[i].bounds.size.width) / 2.0)
let count = imageViews.count
imageViews[i].center = locationForView(((360.0 / CGFloat(count)) * CGFloat(i)) + 90.0, center, radius)
}
self.animate(views: imageViews.reversed(), duration: 3.0, intervalDelay: 0.5)
}
private func animate(views: [UIView], duration: TimeInterval, intervalDelay: TimeInterval) {
CATransaction.begin()
CATransaction.setCompletionBlock {
print("COMPLETED ALL ANIMATIONS")
}
var delay: TimeInterval = 0.0
let interval = duration / TimeInterval(views.count)
for view in views {
let colour = view.backgroundColor
let transform = view.transform
UIView.animate(withDuration: interval, delay: delay, options: [.curveEaseIn], animations: {
view.backgroundColor = UIColor.red
view.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
}, completion: { (finished) in
UIView.animate(withDuration: interval, delay: 0.0, options: [.curveEaseIn], animations: {
view.backgroundColor = colour
view.transform = transform
}, completion: { (finished) in
})
})
delay += (interval * 2.0) + intervalDelay
}
CATransaction.commit()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}