qml 带时钟效果
qt 自带源码样例:在样例中输入clock,找到名叫Qt Quick Demo Clocks。
这个样例写的不错,还是带时差的。不过我们其实不需要这么复杂的功能。
timer启动这个就不用说了:
Timer {
interval: 100; running: true; repeat: true;
onTriggered: clock.timeChanged()
}
下面这三个才是最最重要的,时针,分针,秒针的转动。其中的x,y,origin.x,origin.y都是要重新调整坐标的。
x,y的设定要把timer停止。把时针,分针,秒针调整到重合即可。
然后把timer启动,origin.x一定要是引用的图片的资源的宽度的一半。origin.y我还没有找到规律,每次调试都是用眼睛看,汗~~~~
一定要注意时针,分针,秒针的偏转角。
Image {
x: 92.5; y: 27
source: "hour.png"
transform: Rotation {
id: hourRotation
origin.x: 7.5; origin.y: 73;
angle: (clock.hours * 30) + (clock.minutes * 0.5)
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
Image {
x: 93.5; y: 17
source: "minute.png"
transform: Rotation {
id: minuteRotation
origin.x: 6.5; origin.y: 83;
angle: clock.minutes * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
Image {
x: 97.5; y: 20
source: "second.png"
transform: Rotation {
id: secondRotation
origin.x: 2.5; origin.y: 80;
angle: clock.seconds * 6
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.2; modulus: 360 }
}
}
}
qml 带时钟效果的更多相关文章
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- Flash AS实现时钟效果(全脚本实现)
最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...
- transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
随机推荐
- js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?
setTimeout()是js中的一类重要函数,将一段代码延迟一定时间并异步执行.但是这个函数经常不听话.在实践中,可能经常有人碰到类似下面的这种情况: for (var i = 1; i <= ...
- [2011-3-9 12:59 ]As3.0中的位图(Bitmap/BitmapData)用法
1.位图使用(模糊)滤镜 //创建一个矩形区域的BitmapData var bmd:BitmapData = new BitmapData(80, 30, false, 0xefefef); //画 ...
- CSS 图片
CSS 图片 一.圆角图片 img { border-radius: 8px; } 二.缩略图 border 属性来创建缩略图. img { border: 1px solid #ddd; borde ...
- 2705: [SDOI2012]Longge的问题
Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 1898 Solved: 1191[Submit][Status][Discuss] Descripti ...
- Metasploit 学习
知识准备:CCNA/CCNP基础计算机知识框架:操作系统.汇编.数据库.网络.安全 木马.灰鸽子.口令破解.用后门拷贝电脑文件 渗透测试工程师 penetration test engineer &l ...
- 从零开始玩转JMX(二)——Condition
Notification 一个MBean提供的管理接口允许代理对其管理资源进行控制和配置.然而,对管理复杂的分布式系统来说,这些接口知识提供了一部分功能.通常,管理应用程序需要对状态变化或者当特别情况 ...
- CentOS7系统安装及环境初始化
操作系统安装: 将网卡名称设置为eth*,不使用CentOS 7默认的网卡命名规则.所以需要在安装的时候,增加内核参数.1. 光标选择“Install CentOS 7” 2. 点击Tab,打开 ...
- bootstrap-datetimepicker日期控件下载
bootstrap-datetimepicker.js bootstrap-datetimepicker.zh-CN.js bootstrap-datetimepicker.min.css 下载网站: ...
- HTop 防止进程重复显示
按F2 选择 Display options 选择 Hide userland threads 比Top更加好用!
- 轻量级 HTTP(s) 代理 TinyProxy
J CentOS 下安装 TinyProxy yum install -y tinyproxy 启动.停止.重启 # 启动service tinyproxy start# 停止service ti ...