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 带时钟效果的更多相关文章

  1. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  3. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  4. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  5. Flash AS实现时钟效果(全脚本实现)

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  6. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  7. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

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

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

随机推荐

  1. js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?

    setTimeout()是js中的一类重要函数,将一段代码延迟一定时间并异步执行.但是这个函数经常不听话.在实践中,可能经常有人碰到类似下面的这种情况: for (var i = 1; i <= ...

  2. [2011-3-9 12:59 ]As3.0中的位图(Bitmap/BitmapData)用法

    1.位图使用(模糊)滤镜 //创建一个矩形区域的BitmapData var bmd:BitmapData = new BitmapData(80, 30, false, 0xefefef); //画 ...

  3. CSS 图片

    CSS 图片 一.圆角图片 img { border-radius: 8px; } 二.缩略图 border 属性来创建缩略图. img { border: 1px solid #ddd; borde ...

  4. 2705: [SDOI2012]Longge的问题

    Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1898  Solved: 1191[Submit][Status][Discuss] Descripti ...

  5. Metasploit 学习

    知识准备:CCNA/CCNP基础计算机知识框架:操作系统.汇编.数据库.网络.安全 木马.灰鸽子.口令破解.用后门拷贝电脑文件 渗透测试工程师 penetration test engineer &l ...

  6. 从零开始玩转JMX(二)——Condition

    Notification 一个MBean提供的管理接口允许代理对其管理资源进行控制和配置.然而,对管理复杂的分布式系统来说,这些接口知识提供了一部分功能.通常,管理应用程序需要对状态变化或者当特别情况 ...

  7. CentOS7系统安装及环境初始化

    操作系统安装:    将网卡名称设置为eth*,不使用CentOS 7默认的网卡命名规则.所以需要在安装的时候,增加内核参数.1. 光标选择“Install CentOS 7” 2. 点击Tab,打开 ...

  8. bootstrap-datetimepicker日期控件下载

    bootstrap-datetimepicker.js bootstrap-datetimepicker.zh-CN.js bootstrap-datetimepicker.min.css 下载网站: ...

  9. HTop 防止进程重复显示

    按F2 选择 Display options 选择 Hide userland threads 比Top更加好用!

  10. 轻量级 HTTP(s) 代理 TinyProxy

      J CentOS 下安装 TinyProxy yum install -y tinyproxy 启动.停止.重启 # 启动service tinyproxy start# 停止service ti ...