swift实现颜色渐变以及转换动画
更新时间：2022年01月26日 11:07:56 作者：LinShunIos
这篇文章主要为大家详细介绍了swift实现颜色渐变以及转换动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文是通过结合使用CAGradientLayer、CABasicAnimation以及CAAnimationDelegate来达到颜色渐变以及转换的动画，下面是今天要达成的效果图：
首先创建一个CAGradientLayer和几个自己喜欢的颜色，让VC持有。
let colorOne = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1).cgColor let colorTwo = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1).cgColor let colorThree = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1).cgColor let gradient = CAGradientLayer()
接下来为gradient赋值，将其frame等同于视图的大小，然后颜色先设置为colorOne和colorTwo，起始点和结束点分别为CGPoint(x:0, y:0)和CGPoint(x:1, y:1)，并设置让其在后台线程异步绘制，最后添加到view的layer的sublayer中。
gradient.frame = self.view.bounds gradient.colors = [colorOne,colorTwo] gradient.startPoint = CGPoint(x:0, y:0) gradient.endPoint = CGPoint(x:1, y:1) gradient.drawsAsynchronously = true self.view.layer.insertSublayer(gradient, at: 0)
现在运行后会得到下面的结果：
颜色渐变是做到了，那么如何做到颜色渐变的转换呢?这里还是需要用到CABasicAnimation.
在gradient创建完之后，添加并调用一个方法animateGradient，在里面添加一个keyPath为colors的CABasicAnimation，设置动画时长为3s，设置结束值等一系列属性。
func animateGradient() {
let gradientChangeAnimation = CABasicAnimation(keyPath: "colors")
gradientChangeAnimation.duration = 3.0
gradientChangeAnimation.toValue = [colorTwo,colorThree]
gradientChangeAnimation.fillMode = CAMediaTimingFillMode.forwards
gradientChangeAnimation.isRemovedOnCompletion = false
gradient.add(gradientChangeAnimation, forKey: "gradientChangeAnimation")
}这里就完成了转换动画。但是这里有个问题就是这里只转换了一次，无法转换多次颜色。那么这里就需要设置好toValue，让每次的toValue都不一样。
创建一个currentGradient和gradientSet让VC持有。
var currentGradient: Int = 0 var gradientSet = [[CGColor]]()
在animateGradient中每次调用的时候，都对currentGradient的值进行判断和处理。
if currentGradient < gradientSet.count - 1 {
currentGradient += 1
} else {
currentGradient = 0
}并修改gradientChangeAnimation的toValue：
let gradientChangeAnimation = CABasicAnimation(keyPath: "colors") gradientChangeAnimation.duration = 3.0 gradientChangeAnimation.toValue = gradientSet[currentGradient] gradientChangeAnimation.fillMode = CAMediaTimingFillMode.forwards gradientChangeAnimation.isRemovedOnCompletion = false gradientChangeAnimation.repeatCount = Float.infinity gradient.add(gradientChangeAnimation, forKey: "gradientChangeAnimation")
这里运行后发现还是不行，还是只有一种颜色的转换，这是因为这里只调用了一次animateGradient()。那么如何在合适的时机，也就是动画结束的时候再调用一次animateGradient呢？这里就需要用到CAAnimationDelegate。
在CAAnimationDelegate的animationDidStop方法中重新调用animateGradient。注意这里的gradient.colors 也要改变，否则就会一直是[colorOne, colorTwo]到其他颜色的变换。
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
// if our gradient animation ended animating, restart the animation by changing the color set
if flag {
gradient.colors = gradientSet[currentGradient]
animateGradient()
}
}完整代码：
import UIKit
class ViewController: UIViewController, CAAnimationDelegate {
let colorOne = #colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1).cgColor
let colorTwo = #colorLiteral(red: 0.8078431487, green: 0.02745098062, blue: 0.3333333433, alpha: 1).cgColor
let colorThree = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1).cgColor
let gradient = CAGradientLayer()
var currentGradient: Int = 0
var gradientSet = [[CGColor]]()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
NotificationCenter.default.addObserver(self, selector: #selector(handleEnterForeground), name: UIApplication.willEnterForegroundNotification, object: nil)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
createGradientView()
}
@objc private func handleEnterForeground() {
animateGradient()
}
func animateGradient() {
// cycle through all the colors, feel free to add more to the set
if currentGradient < gradientSet.count - 1 {
currentGradient += 1
} else {
currentGradient = 0
}
// animate over 3 seconds
let gradientChangeAnimation = CABasicAnimation(keyPath: "colors")
gradientChangeAnimation.duration = 3.0
gradientChangeAnimation.toValue = gradientSet[currentGradient]
gradientChangeAnimation.fillMode = CAMediaTimingFillMode.forwards
gradientChangeAnimation.isRemovedOnCompletion = false
//gradientChangeAnimation.repeatCount = Float.infinity
gradientChangeAnimation.delegate = self
gradient.add(gradientChangeAnimation, forKey: "gradientChangeAnimation")
}
func createGradientView() {
// overlap the colors and make it 3 sets of colors
gradientSet.append([colorOne, colorTwo])
gradientSet.append([colorTwo, colorThree])
gradientSet.append([colorThree, colorOne])
// set the gradient size to be the entire screen
gradient.frame = self.view.bounds
gradient.colors = gradientSet[currentGradient]
gradient.startPoint = CGPoint(x:0, y:0)
gradient.endPoint = CGPoint(x:1, y:1)
gradient.drawsAsynchronously = true
self.view.layer.insertSublayer(gradient, at: 0)
animateGradient()
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
// if our gradient animation ended animating, restart the animation by changing the color set
if flag {
gradient.colors = gradientSet[currentGradient]
animateGradient()
}
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了用Swift编写自动录音器，有需要的朋友可以借鉴下2015-07-07
在swift中，extension与Objective-C的category有点类似，但是extension比起category来说更加强大和灵活，它不仅可以扩展某种类型或结构体的方法，同时它还可以与protocol等结合使用，编写出更加灵活和强大的代码2022-09-09
这篇文章主要为大家详细介绍了swift实现webview加载网页进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本篇文章主要介绍了在swift中实现NSCoding的自动归档和解档，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这是我在网上上看到的答案，复制粘贴过来和大家分享一下，因为我和很多人一样很关心Swift的出现对Mac开发的影响和对Objective-C的影响。2014-09-09
Swift利用Decodable解析JSON的一个小问题详解
这篇文章主要给大家介绍了关于Swift利用Decodable解析JSON的一个小问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
这篇文章主要介绍了用Swift语言实现地图坐标弹跳动画的方法主要应用iOS7来实现此功能,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了解决openstack重启swift服务后报错,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了Swift 指针底层探索分析，主要包括指针的基本使用，以及指针的内存绑定进行详细分析，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
缓存就是一个存储器,常用 Redis作为缓存数据库,本文主要介绍了SpringBoot3.0集成Redis缓存的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
最新评论