模拟时钟


课程内容

时钟包含时、分、秒3个指针,分别控制3个指针旋转,指针旋转角度根据时间进行转换,可获取当前时间或根据输入的任意时间走时,可设置闹铃时间

课程目标

  • 了解时间工具的使用
  • 了解设置角色不同中心点效果
  • 知道如何将时间和角度进行转换
  • 了解循环嵌套的使用
  • 掌握时分秒间的转换

课程概要

  1. 制作时钟面板
    • 点击绘制新角色
    • 在位图编辑模式下,绘制浅蓝色实心圆形
    • 切换到矢量图编辑模式,绘制十字交叉的线,将中心设为交叉点
    • 挑战实心圆位置,使其中心对准到十字交叉线
    • 在中心点绘制浅蓝色(比刚才的颜色深一些)空心外边框
    • 在中心点绘制空心暗浅蓝色圆形
    • 当小绿旗被点击时,移到x:0 y:0
  2. 制作时钟大刻度
    • 复制面板角色,此时可删除面板的十字交叉线
    • 删除面板边框、中心圆孔
    • 在面板正上方内侧绘制暗浅蓝色小矩形
    • 删除面板
    • 将角色命名为大刻度
  3. 编写大刻度生成代码
    • 添加位置变量
    • 当小绿旗被点击时,移到x:0 y:0
    • 将位置设定为1
    • 重复执行11次
      • 克隆自己
      • 将位置增加1
    • 当作为克隆体启动时
    • 右转 位置*(360/12) 度
  4. 制作时钟小刻度
    • 复制时钟大刻度,命名为小刻度
    • 点击造型,适当缩小角色
    • 修改代码,将重复执行次数修改为59次
    • 将 360/12 修改为 360/60
  5. 制作时针
    • 复制小刻度,删除代码,此时可删除大小刻度的十字交叉线
    • 选择线段工具,设置白色,设置线段大小
    • 绘制原点到正上方大刻度的直线,缩短直线底部,留一些距离
    • 复制直线,适当减小线段粗细,放置于原点到直线之间垂直对齐
    • 在原点处绘制空心圆形,调整到适当大小
    • 当小绿旗被点击时,移到x:0 y:0
  6. 编写时针代码
    • 面向90度方向
    • 重复执行(不柔和旋转)
      • 等待60*60秒
      • 右转360/12度
    • 重复执行(优化,使其柔和旋转)
      • 等待1秒
      • 右转360/12/60/60度
  7. 制作分针
    • 复制时针,命名为分针,此时可删除时针的十字交叉线
    • 点击造型,修改直线长度到刚好碰到小刻度
    • 修改右转为360/60/60度
  8. 制作秒针
    • 复制分针,命名为秒针,此时可删除分针的十字交叉线
    • 点击造型,删除顶部直线,延长原来较细的直线,刚好碰到小刻度外围
    • 同时反向延长直线,使其另一端露出一些距离
    • 适当减小线段粗细,使其粗细刚好合适
    • 删除十字交叉线(若继续步骤9则先不删除)
    • 修改脚本,将右转设置为360/60
  9. 制作刻度字(练习1)
    • 复制秒针,命名为刻度字,此时可删除秒针的十字交叉线
    • 点击造型,删除直线及空心圆圈
    • 添加文字,写上1,调整大小及位置
    • 复制11次文字,分别修改为2到12,调整好水平位置
    • 删除十字交叉线
  10. 编写刻度字代码(练习1)
    • 当小绿旗被点击时
    • 移到x:0 y:0
    • 面向90度方向
    • 将造型切换为造型12
    • 将位置设定为1,时针、分针、秒针的位置变量可删除
    • 重复执行11次
      • 克隆自己
      • 将位置增加1
    • 当作为克隆体启动时
    • 将造型切换为位置
    • 右转 位置*(360/12)度
  11. 同步时针与当前时间的小时(练习2)
    • 在面向90度后添加代码
    • 右转 360/12 * 当前时间的时
    • 右转 360/12/60 * 当前时间的分
    • 右转 360/12/60/60 * 当前时间的秒
  12. 同步分针与当前时间的分数(练习2)
    • 在面向90度后添加代码
    • 右转 360/60 * 当前时间的分
    • 右转 360/60/60 * 当前时间的秒
  13. 同步秒针与当前时间的秒数(练习2)
    • 在面向90度后添加代码
    • 右转 360/60 * 当前时间的秒
  14. 添加闹铃功能(练习3)
    • 新建全局列表
    • 列表支持添加字符串元素:例如1102,代表11时02分
    • 在舞台中添加代码循环判断当前时间是否与列表中某个时间一致
    • 若时间一致,则显示弹窗播放铃声

课后练习

  1. 为时钟增加刻度字,从1到12
  2. 为时钟的各个表针添加初始化代码,使其跟当前时间对应
  3. 为时钟添加闹铃功能,闹铃到了弹出窗口并播放铃声
Copyright © zhengxiangqi 2018 all right reserved,powered by Gitbook该文件修订时间: 2019-09-30 02:14:29

results matching ""

    No results matching ""