使用ivx制作模拟时钟的经验总结

之前的帖子里已经使用时间轴和轨迹实现了很多的效果,今天我们来做一个模拟时钟。主要思路是用一个作为表盘,三个矩形分别作为时针,分针和秒针,通过各自轨迹设置他们在同一时间轴下的转动圈数成一定比例关系。

1.表盘
首先是添加椭圆组件,这里我们需要设置它的原点横纵坐标都是50%,这样椭圆组件的XY坐标就是它的中心店坐标,这个XY坐标在我们设置指针的时候也要用到。

2.添加指针
指针使用矩形来展示的,由于指针要绕着表盘的中心点旋转,所以我们要将矩形的坐标原点与椭圆的坐标原点设置在同一个位置。因此先设置矩形的原点横坐标是50%,原点纵坐标是100%,即矩形下边界中间的位置,然后设置矩形的坐标与椭圆组件一样(50,50)。分针和秒针也是同理,只不过矩形的形状和颜色有所变动。

3.轨迹
最后就是轨迹的设置了,我们在时间轴里统一管理时针,分针和秒针的轨迹。这一步其实更多的是数值上的计算,以时针转一整圈360°为基准,则给时针的轨迹添加两个关键帧,0s时时针处于初始状态,在时间轴末尾的10s时表示时针的矩形的旋转角度是360°。分针和秒针的轨迹也是同理添加两个关键帧,而时针旋转360°的过程中一共历时12小时,一小时分针旋转360°,所以分针总共旋转4320°,而12小时也就是720分钟,一分钟秒针旋转360°,则秒针共旋转259200°。



现在我们让时间轴自动循环播放就可以看到模拟时钟的效果啦。

总结
要注意的是我们的时间轴只有10s,而我们demo中时针转360所代表的时长是12小时即43200s,所以可能就会想到将时间轴的实际时长改为43200,但是可以看到填入后播放速度就变成了0,这是因为计算后的播放速度过于小而被系统判定为0了,我们要是希望可以1比1达到真实时钟的效果,可以将时间轴的原始时长增大一些,至少为实际时长的0.5%(四舍五入)。

原文地址:https://blog.51cto.com/14556317/2484425

时间: 2024-10-09 14:32:57

使用ivx制作模拟时钟的经验总结的相关文章

WPF模拟时钟制作

近日因为项目需求,所以才花了一个晚上的时间来学习和制作WPF模拟时钟.本想着参考网上的WPF模拟时钟控件,但多数过于简单.也有一些模拟时钟确实制作的非常精美,但使用了GDI+技术,而非我需要的WPF时钟控件.好了,下面给出我制作的WPF模拟时钟的运行截图吧: 色彩方面只是用了黑色,白色,蓝色等鲜明的颜色,看起来没有特别绚丽,当然,如果需要,可以设置成需要的绚丽的颜色等. 以下是该模拟时钟的XAML代码部分: 1 <Window x:Class="AnalogClockProject.Mai

使用ivx制作音乐播放器的经验总结

今天我们要使用ivx制作一个音乐播放器,功能包括控制音乐的播放.暂停,能够通过点击或者拖拽调节音乐的播放进度,下面说一下具体的实现方法.一.demo布局首先看一下demo的结构,横幅下两个文本组件用于展示音乐信息,其余内容放置在画布中,布局上可以分为一个播放/暂停模块和一个进度条模块,分别放置在两个对象组中,另外还有一些变量.动作组和触发器.二.音乐组件既然是音乐播放器,自然就需要添加一个音乐组件啦.在素材资源地址里上传我们的音乐素材,这里注意一下如果音频素材比较大的话不建议开启预加载模式.三.

模拟时钟

1 #include <Windows.h> 2 #include <tchar.h> 3 #include <math.h> 4 typedef struct Time 5 { 6 int hour, min, sec; 7 }TimeStructure; 8 BOOLEAN InitWindowClass(HINSTANCE hInstance, int nCmdShow); 9 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM

JS模拟时钟

<html> <head> <title>js模拟时钟</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body onLoad="setInterval(setTimeSpan,1000);"> <span style="fon

模拟时钟(AnalogClock)和数字时钟(DigitalClock)

Demo2\clock_demo\src\main\res\layout\activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 and

纯js+html+css实现模拟时钟

前几天没事写的个模拟时钟,代码仅供小白参考,大神请自动绕过. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟时钟</title> 6 <style> 7 body { 8 margin: 0; 9 padding: 0; 10 } 11 12 #blockDial {

模拟时钟(AnalogClock)

显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity //模拟时钟 public class AnalogClockActivity extends Activity { private TextView timeTextView; private Handler handler; protected void onCreate(Bundle savedInstanceState) {

WinForm学习 --简单的模拟时钟程序

今天学习GDI+,试着想写一个模拟时钟的小程序,原以为很简单实现:但其实还有些复杂,特别是利用三角函数的那部分,让我四处找资料恶补了一下高中数学才算弄清楚,现在就回顾一下这个程序吧. 程序的目的是要模拟出时钟的效果,那首先就是要画出这个时钟的样子.不考虑美观,一个时钟最简单的组成是一个圆形的表盘,三根直线代表的时针.分针和秒针. <img缺失> 看起来很简单吧,但要怎么样画呢?让我们一步一步来吧: 1.画表盘 Graphics g = this.CreateGraphics(); //创建一个

利用html5制作一个时钟动画

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function dra