美文网首页
时钟效果

时钟效果

作者: child_cool | 来源:发表于2018-04-25 14:07 被阅读9次

demo在这里

时钟.gif
  • layer 动画时钟,计算了分钟和小时的具体角度,运行看起来不那么生硬
import UIKit

class ViewController: UIViewController {
    //      注意:这里imageview不能设置等比约束,否则指针显示不准
    @IBOutlet weak var imageView: UIImageView!
    
    lazy var hour: CALayer = {
        let hour = CALayer()
        hour.backgroundColor = UIColor.black.cgColor
        hour.bounds = CGRect(x: 0, y: 0, width: 1, height: imageView.frame.width/4)
        // 设置锚点
        hour.anchorPoint = CGPoint(x: 0.5, y: 1)
        // 锚点的定位
        hour.position = CGPoint(x: imageView.frame.width/2, y: imageView.frame.width/2)
        self.imageView.layer.addSublayer(hour)
        return hour
    }()
    
    lazy var mintue: CALayer = {
        let mintue = CALayer()
        mintue.backgroundColor = UIColor.gray.cgColor
        mintue.bounds = CGRect(x: 0, y: 0, width: 1, height: imageView.frame.width/3)
        // 设置锚点
        mintue.anchorPoint = CGPoint(x: 0.5, y: 1)
        // 锚点的定位
        mintue.position = CGPoint(x: imageView.frame.width/2, y: imageView.frame.width/2)
        self.imageView.layer.addSublayer(mintue)
        return mintue
    }()
    
    lazy var second: CALayer = {
        let second = CALayer()
        second.backgroundColor = UIColor.orange.cgColor
        second.bounds = CGRect(x: 0, y: 0, width: 1, height: imageView.frame.width/2 - 20)
        // 设置锚点
        second.anchorPoint = CGPoint(x: 0.5, y: 1)
        // 锚点的定位
        second.position = CGPoint(x: imageView.frame.width/2, y: imageView.frame.width/2)
        self.imageView.layer.addSublayer(second)
        return second
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (_) in
//            return
            let calender = Calendar.current
            let components = Set<Calendar.Component>([.year, .month, .day, .hour, .minute, .second])
            
            let comp = calender.dateComponents(components, from: Date())
            
            /// 计算精细的度数 不会让指针走的那么僵硬
            
            /// 1秒 = 6度
            let s = CGFloat(comp.second ?? 0) * 6 / 180 * CGFloat.pi
            
            /// 1分钟 = 6度 , 1秒 = 0.1度
            let m = (CGFloat(comp.minute ?? 0) * 6 + CGFloat(comp.second ?? 0) * 0.1 ) / 180 * CGFloat.pi
            
            /// 1h = 30度 ,1分钟 = 0.5度,1秒 = 0.5/60度
            let h = (CGFloat(comp.hour ?? 0) * 30 +  CGFloat(comp.minute ?? 0) * 0.5 + CGFloat(comp.second ?? 0) * 0.5 / 60) / 180 * CGFloat.pi
            
            /// 按照z轴旋转一定的角度
            self.second.transform = CATransform3DMakeRotation(s, 0, 0, 1)
            self.mintue.transform = CATransform3DMakeRotation(m, 0, 0, 1)
            self.hour.transform = CATransform3DMakeRotation( h, 0, 0, 1)
        }
    }
}

相关文章

  • 时钟效果

    demo在这里 layer 动画时钟,计算了分钟和小时的具体角度,运行看起来不那么生硬

  • Canvas绘制时钟效果

    Cnavas绘制时钟 背景图的绘制(大圆、数字、小圆点),掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算...

  • canvas实现时钟效果

    HTML5的canvas的实用入门小实例,一步步一起来。学习的最好方法就是实践,参考HTML 5 Canvas 参...

  • 自定义时钟效果

    自定义的ClockView类 调用

  • CSS和js时钟效果

  • 【Canvas 03】 Canvas时钟效果

    在前一篇文章中,我已经写了canvas如何制作一个百行代码Canvas酷炫倒计时 下面由此衍生出canvas动画时...

  • 【页面练习】话说时钟这个东西

    are kiding me?下方时钟效果图,因为是用ps自己照着网上的时钟图画的,╮(╯▽╰)╭,大家就不要介意啦...

  • 使用css和js实现时钟

    效果如下:程序实际的效果是最新的时钟,我这里只是录屏了几秒钟。

  • Swift-时钟

    时钟的实现主要功能点有时针,分针,秒针旋转的角度,定时刷新,实现效果如下: 时钟布局: 定时刷新:

  • 制作CSS3时钟

    0. 前言 今天,用CSS3做一个小小的时钟,跟现实中的时钟,功能一样,都能实现看时间的效果。 1. 简介 时钟:...

网友评论

      本文标题:时钟效果

      本文链接:https://www.haomeiwen.com/subject/hrejlftx.html