iOS实现简单时钟效果

实现的效果图如下 :

实现代码如下:

#import "ViewController.h"

//将旋转角度转换为弧度制
#define angleToRadion(angle) ((angle) / 180.0 * M_PI)

//秒针每秒钟转过的角度
#define perSecondAngle 6
//分针每分钟转过的角度
#define perMinuteAngle 6
//时针每小时转过的角度
#define perHourAngle 30
//时针每分钟转过的角度
#define perMuniteHourAngle 0.5

#define kClockWidth 300
#define kClockHeight 250

@interface ViewController ()

//底盘
@property (weak, nonatomic) IBOutlet UIImageView *imgView;

@property (nonatomic, weak) CALayer *secondLayer;//秒
@property (nonatomic, weak) CALayer *minuteLayer;//分
@property (nonatomic, weak) CALayer *hourLayer;//时

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //时钟
    [self setUpHourLayer];
    
    //分钟
    [self setUpMinuteLayer];
    
    //秒钟
    [self setUpSecondLayer];
    
    //创建定时器
    [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];
    
}

- (void)setUpHourLayer
{
    //创建图层
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor blackColor].CGColor;
    layer.cornerRadius = 8;
    
    //设置图层的锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    //设置图层的位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 5, kClockWidth * 0.5 - 44);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.hourLayer = layer;
}

- (void)setUpMinuteLayer
{
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor blackColor].CGColor;
    layer.cornerRadius = 4;
    
    //设置锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    //设置位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 3, kClockWidth * 0.5 - 34);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.minuteLayer = layer;
}

- (void)setUpSecondLayer
{
    CALayer *layer = [CALayer layer];
    layer.backgroundColor = [UIColor redColor].CGColor;
    
    //设置锚点
    layer.anchorPoint = CGPointMake(0.5, 1);
    
    //设置位置和尺寸
    layer.position = CGPointMake(kClockWidth * 0.5, kClockHeight * 0.5);
    layer.bounds = CGRectMake(0, 0, 1, kClockWidth * 0.5 - 24);
    
    //将图层添加到父图层中
    [self.imgView.layer addSublayer:layer];
    self.secondLayer = layer;
}

- (void)timeChange
{
    //获取日历对象
    NSCalendar *calendar = [NSCalendar currentCalendar];
    //NSLog(@"calendar = %",calendar);
    
    //获取日期组件
    NSDateComponents *components = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
    
    //获取当前的时分秒值
    NSInteger second = components.second;
    NSInteger munite = components.minute;
    NSInteger hour = components.hour;
    
    //计算当前时分秒表针转过的角度(弧度制)
    CGFloat secondAngle = angleToRadion(second * perSecondAngle);
    CGFloat muniteAngle = angleToRadion(munite * perMinuteAngle);
    CGFloat hourAngle = angleToRadion(hour *perHourAngle + munite * perMuniteHourAngle);
    
    //修改时分秒表针位于的图层的transform属性,执行隐式动画
    self.secondLayer.transform = CATransform3DMakeRotation(secondAngle, 0, 0, 1);
    self.minuteLayer.transform = CATransform3DMakeRotation(muniteAngle, 0, 0, 1);
    self.hourLayer.transform = CATransform3DMakeRotation(hourAngle, 0, 0, 1);

}
@end

在实现的过程中,有些小瑕疵...希望可以和大家一起学习!!!

时间: 2024-11-05 18:32:36

iOS实现简单时钟效果的相关文章

1.1 结合date()和setTimeOut()实现简单的时钟效果

一.简单的时钟效果 首先要熟悉日期函数date()以及其常用的方法 getFullYear()  返回完整的年份 比如:2016 getMonth()  返回月份(从0开始,需+1) getDate()  返回日期 getHours()  返回小时数 getMinutes()  返回分钟数 getSeconds()  返回秒数 getDay() 返回星期几 (0-6,0是星期天,1是星期一) 写一个简单的html页面,用来展示时钟效果 <!DOCTYPE html> <html>

iOS开发——实用技术OC篇&amp;简单抽屉效果的实现

简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一些功夫了,我们这里知识简单的介绍怎么去实现,不过一般我们开发都是找别人做好的,也没必要烂肺时间,除非你真的是大牛或者闲的蛋疼. 其实关于抽屉效果就是界面有三个View,其实一个主View其他两个分别是左边和右边的View,我们分别为他们添加手势,实现左右滑动显示对应的View. 一:所以,首先我们需

ios开发核心动画三:隐式动画与时钟效果

一:隐式动画 #import "ViewController.h" @interface ViewController () /** <#注释#> */ @property (nonatomic, weak) CALayer *layer; @property (weak, nonatomic) IBOutlet UIView *redView; @end @implementation ViewController - (void)viewDidLoad { [super

原生javascript实现网页显示日期时钟效果

刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几时几分几秒 先看代码效果 <script type="text/javascript"> window.onload=function(){ showDate(); countdown(); } function showDate(){ var myDate=new Date(

IOS 霓虹灯简单小程序

在RootViewController.m文件中 - (void)viewDidLoad//视图加载方法 - (void)viewDidLoad { //设置红色 UIView *viewRed = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 120, 30)]; viewRed.backgroundColor = [UIColor redColor]; [self.view addSubview:viewRed]; //设置橙色 UIVi

iOS 烟花撒花效果,图层渐变,图层倒影特效。CAEmitterLayer粒子发射器

iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些用法,具体看这里,就是我们在处理视图的时候要对他的图层来进行修改,需要注意的几个地方,还有锚点的介绍,然后这篇主要说一个利用CALayer里面的一个类来实现一个烟花的特效. 这个就是利用了CAEmitterLayer粒子发射器图层来制作的一个效果,这个动态截图工具也是下面的朋友推荐的,效果很好很不错mac版地址,就是通过一个发射点来发射一

第35天:时钟效果

时钟效果案例 1.得到现在的时分秒2.旋转角度原理一圈360°   60s   1s/6°旋转second.style.WebkitTransform="rotate(60deg)";//每秒旋转60度 案例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>时钟效果</

自定义实现ExpandableListView收缩的简单动画效果

以下是 ExpandableListView 收缩的简单动画效果 1 /* 2 * Copyright (C) 2014 Gary Guo 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the L

转CSS3+js实现多彩炫酷旋转圆环时钟效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多彩炫酷环形时钟效果</title> <style type="text/css"> #fancyClock{ margin:40px auto; he