分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

iOS 动画十二:Gradient Animations

  • 时间:2018-08-21 23:10 作者:_浅墨_ 来源:_浅墨_ 阅读:254
  • 扫一扫,手机访问
摘要:现在,我们要写一个 Gradient Animations demo, 其最终效果是这样的:Slide to reveal实现步骤如下:1. Drawing your first gradient// Configure the gradient here gradientLayer.startPo

现在,我们要写一个 Gradient Animations demo, 其最终效果是这样的:


Slide to reveal

实现步骤如下:

1. Drawing your first gradient
// Configure the gradient here gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

定义 gradient 的 start 和 end 位置:

let colors = [ UIColor.black.cgColor, UIColor.white.cgColor, UIColor.black.cgColor ] gradientLayer.colors = colors

gradient 渐变,先由黑色到白色,再由白色到黑色。

let locations: [NSNumber] = [0.25,0.5,0.75 ] gradientLayer.locations = locations

设置渐变关键位置

以上操作后,现在效果是这样的:

2. Animating gradients

现在我们要为渐变增加动画。

CAGradientLayer 继承自 CALayer ,它有几个可动画属性:

? colors: 渐变颜色色彩。
? locations: 颜色渐变关键位置,使颜色在渐变中移动。
? startPoint and endPoint: 设置渐变开始、结束位置。

实现动画效果:

let gradientAnimation = CABasicAnimation(keyPath: "locations") gradientAnimation.fromValue = [0.0, 0.0, 0.25] gradientAnimation.toValue = [0.75, 1.0, 1.0] gradientAnimation.duration = 3.0 gradientAnimation.repeatCount = Float.infinity

在这 layer 动画中,你首先将三个颜色渐变 start 位置设置在渐变 frame 的左边缘,并在动画结束时将所有三个元素推向右边缘:

动画持续三秒,并无限循环。

3. Creating a text mask

增加 text mask 。
以下为项目主要代码。text mask 位置自己找吧。

import UIKitimport QuartzCore@IBDesignableclass AnimatedMaskLabel: UIView {    let gradientLayer: CAGradientLayer = {    let gradientLayer = CAGradientLayer()        // Configure the gradient here    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)    // let colors = [ UIColor.black.cgColor, UIColor.white.cgColor, UIColor.black.cgColor ]    let colors = [        UIColor.yellow.cgColor,        UIColor.green.cgColor,        UIColor.orange.cgColor,        UIColor.cyan.cgColor,        UIColor.red.cgColor,        UIColor.yellow.cgColor    ]    gradientLayer.colors = colors    //    let locations: [NSNumber] = [//        0.25,//        0.5,//        0.75 ]    let locations: [NSNumber] = [        0.0, 0.0, 0.0, 0.0, 0.0, 0.25    ]    gradientLayer.locations = locations        return gradientLayer  }()    let textAttributes: [NSAttributedStringKey: Any] = {        let style = NSMutableParagraphStyle()    style.alignment = .center    return [        NSAttributedStringKey.font: UIFont(           name: "HelveticaNeue-Thin",           size: 28.0)!,        NSAttributedStringKey.paragraphStyle: style]  }()              @IBInspectable var text: String! {    didSet {      setNeedsDisplay()              let image = UIGraphicsImageRenderer(size: bounds.size) .image { _ in        text.draw(in: bounds, withAttributes: textAttributes) }      let maskLayer = CALayer()      maskLayer.backgroundColor = UIColor.clear.cgColor      maskLayer.frame = bounds.offsetBy(dx: bounds.size.width, dy: 0)      maskLayer.contents = image.cgImage      gradientLayer.mask = maskLayer    }  }    override func layoutSubviews() {    layer.borderColor = UIColor.green.cgColor    // gradientLayer.frame = bounds    gradientLayer.frame = CGRect(        x: -bounds.size.width,        y: bounds.origin.y,        width: 3 * bounds.size.width,        height: bounds.size.height)  }    override func didMoveToWindow() {    super.didMoveToWindow()    layer.addSublayer(gradientLayer)        let gradientAnimation = CABasicAnimation(keyPath: "locations")//    gradientAnimation.fromValue = [0.0, 0.0, 0.25]//    gradientAnimation.toValue = [0.75, 1.0, 1.0]    gradientAnimation.fromValue = [0.0, 0.0, 0.0, 0.0, 0.0, 0.25]    gradientAnimation.toValue = [0.65, 0.8, 0.85, 0.9, 0.95, 1.0]    gradientAnimation.duration = 3.0    gradientAnimation.repeatCount = Float.infinity        gradientLayer.add(gradientAnimation, forKey: nil)  } }

demo 下载

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部