[GTR 3 ] 《圣诞倒计时》动态表盘－源码
Posted: 02 Dec 2021, 04:26
今天上线了一款圣诞表盘，加入了倒计时交互、雪花飞舞的动画效果，是一个尝试，给大家一个实例做参考。抛砖引玉，欢迎多多交流。开发出更多个性化的表盘。
圣诞表盘动态效果图
表盘各时间段静态图
表盘源码
表盘下载：
https://amazfitwatchfaces.com/gtr/view/19672
提前祝大家今年的圣诞节玩得开心！
圣诞表盘动态效果图
- Snow390.gif (2.52 MiB) Viewed 1283 times
表盘各时间段静态图
- image.png (150.27 KiB) Viewed 1283 times
表盘源码
Code: Select all
try {
(() => {
var __$$app$$__ = __$$hmAppManager$$__.currentApp;
var __$$module$$__ = __$$app$$__.current;
var h = new DeviceRuntimeCore.WidgetFactory(new DeviceRuntimeCore.HmDomApi(__$$app$$__, __$$module$$__), 'drink');
/*
* hugray_small_numiOS bundle tool v1.0.17
* Copyright © Hugray_small_numi. All Rights Reserved
*/
'use strict';
let rootPath = null
let timeArray = null
let dateWhiteArr = null
let bg = null
let aodBg = null
let snowAnimate = null
let weekArr = null
let bgPath = "img/bg1.png"
let countDownTimer = null
let dateImg = null
let countArray = null
let timeSensor = null
let day1 = null
let day2 = null
let timeText = null
let weekImg = null
let heartIcon = null
let heartTxt = null
const logger = DeviceRuntimeCore.HmLogger.getLogger("default2");
__$$module$$__.module = DeviceRuntimeCore.WatchFace({
init_view() {
//表盘图片素材路径
rootPath = "images/",
timeArray = [
rootPath + "time/time_0.png",
rootPath + "time/time_1.png",
rootPath + "time/time_2.png",
rootPath + "time/time_3.png",
rootPath + "time/time_4.png",
rootPath + "time/time_5.png",
rootPath + "time/time_6.png",
rootPath + "time/time_7.png",
rootPath + "time/time_8.png",
rootPath + "time/time_9.png",
]
//日期素材
dateWhiteArr = [
rootPath + "date_white/white_0.png",
rootPath + "date_white/white_1.png",
rootPath + "date_white/white_2.png",
rootPath + "date_white/white_3.png",
rootPath + "date_white/white_4.png",
rootPath + "date_white/white_5.png",
rootPath + "date_white/white_6.png",
rootPath + "date_white/white_7.png",
rootPath + "date_white/white_8.png",
rootPath + "date_white/white_9.png",
]
//星期素材
weekArr = [
rootPath + "week/week_1.png",
rootPath + "week/week_2.png",
rootPath + "week/week_3.png",
rootPath + "week/week_4.png",
rootPath + "week/week_5.png",
rootPath + "week/week_6.png",
rootPath + "week/week_7.png",
]
//倒计时天数素材
countArray= [
rootPath + "countDown/0.png",
rootPath + "countDown/1.png",
rootPath + "countDown/2.png",
rootPath + "countDown/3.png",
rootPath + "countDown/4.png",
rootPath + "countDown/5.png",
rootPath + "countDown/6.png",
rootPath + "countDown/7.png",
rootPath + "countDown/8.png",
rootPath + "countDown/9.png",
]
//时间传感器获取当前：年月日时分秒
timeSensor = hmSensor.createSensor(hmSensor.id.TIME);
//息屏时背景
aodBg = hmUI.createWidget(hmUI.widget.FILL_RECT, {
x: 0,
y: 0,
w: 390,
h: 450,
color: 0x000000,
show_level: hmUI.show_level.ONLY_AOD,
});
//亮屏背景
bg = hmUI.createWidget(hmUI.widget.IMG,{
x: 0,
y: 0,
w: 390,
h: 450,
src: rootPath + bgPath,
show_level: hmUI.show_level.ONLY_NORMAL,
});
// 背景雪花动画
snowAnimate = hmUI.createWidget(hmUI.widget.IMG_ANIM, {
x: 0,
y: 0,
anim_path: rootPath + "snow",
anim_prefix: "snow",
anim_ext: "png",
anim_fps: 25,
anim_size: 75,
anim_repeat: true,
repeat_count: 0, //设置循环播放
anim_status: 1,
display_on_restart:true, //返回表盘后从0播放
show_level: hmUI.show_level.ONLY_NORMAL, //仅亮屏显示
});
//息屏亮屏共用数据项
weekImg = hmUI.createWidget(hmUI.widget.IMG_WEEK);
dateImg = hmUI.createWidget(hmUI.widget.IMG_DATE);
timeText = hmUI.createWidget(hmUI.widget.IMG_TIME);
heartIcon = hmUI.createWidget(hmUI.widget.IMG);
heartTxt = hmUI.createWidget(hmUI.widget.TEXT_IMG);
var screenType = hmSetting.getScreenType();
if(screenType == hmSetting.screen_type.AOD){
//息屏设置
}else{
// 亮屏数据设置
day1= hmUI.createWidget(hmUI.widget.IMG,{
x: 117,
y: 328,
w: 35,
h: 46,
src: countArray[0],
show_level: hmUI.show_level.ONLY_NORMAL
});
day2= hmUI.createWidget(hmUI.widget.IMG,{
x: 152,
y: 328,
w: 35,
h: 46,
src: countArray[0],
show_level: hmUI.show_level.ONLY_NORMAL,
});
}
showTime(); //时间数据
showHeart();//心率数据
function showTime(){
timeText.setProperty(hmUI.prop.MORE, {
hour_startX: 39,
hour_startY: 38,
hour_array: timeArray,
hour_space: 2,
hour_zero: 1,
hour_unit_sc: rootPath+"img/colon.png", //单位
hour_unit_tc: rootPath+"img/colon.png",
hour_unit_en: rootPath+"img/colon.png",
hour_align: hmUI.align.LEFT,
minute_zero: 1, //是否补零 1为补零
minute_startX: 182,
minute_startY: 38,
minute_array: timeArray,
minute_space: 2, //两个图片间隔 对应GT2的interval
minute_follow: 0, //是否跟随
minute_align: hmUI.align.LEFT,
show_level: hmUI.show_level.ALL,
});
weekImg.setProperty(hmUI.prop.MORE,{
x: 182,
y: 128,
week_en: weekArr,
week_tc: weekArr,
week_sc: weekArr,
show_level: hmUI.show_level.ONLY_NORMAL | hmUI.show_level.ONLY_AOD,
});
dateImg.setProperty(hmUI.prop.MORE,{
month_startX: 94,
month_startY: 128 ,
month_align: hmUI.align.LEFT,
month_space: 0,
month_zero: 1,
month_follow: 0,
month_is_character: false,
month_en_array: dateWhiteArr,
month_sc_array: dateWhiteArr,
month_tc_array: dateWhiteArr,
month_unit_sc: rootPath + "img/white_dot.png",//单位
month_unit_tc: rootPath + "img/white_dot.png",//单位
month_unit_en:rootPath + "img/white_dot.png",//单位
day_startX: 138,
day_startY: 128 ,
day_align: hmUI.align.LEFT,
day_space: 0,
day_zero: 1,
day_follow: 0,
day_en_array: dateWhiteArr,
day_sc_array: dateWhiteArr,
day_tc_array: dateWhiteArr,
show_level: hmUI.show_level.ONLY_NORMAL | hmUI.show_level.ONLY_AOD,
});
}
//获取当前日期，显示节前节后节中
function getCurrentDate()
{
//time 传感器
var currentDay= timeSensor.day; //currentDay=21;
var currentMonth=timeSensor.month; // currentMonth=12
var countDown= 25-currentDay;
if(currentMonth==12 && (currentDay<=24))//12.1-12.24 倒计时
{
bgPath = "img/bg1.png";
day1.setProperty(hmUI.prop.VISIBLE,true);
day2.setProperty(hmUI.prop.VISIBLE,true);
showCountDown(countDown);
}else if(currentMonth==12 && (currentDay>=25 && currentDay<=30)){ //12.25-12.30 节中
bgPath = "img/bg2.png";
hideCountDown();
}else{
bgPath = "img/bg3.png";//12.31 ago----- 节后
hideCountDown();
}
bg.setProperty(hmUI.prop.SRC,rootPath + bgPath);
}
// 启动倒计时，更新天数据
function startCountDown(sec)
{ // 0点更新倒计时天数，+100,延迟100ms,规避数据延迟
countDownTimer = timer.createTimer((60-sec)*1000+100, 1, (function (option) {
getCurrentDate();
timer.stopTimer(countDownTimer);
}));
}
//show countdown day
function showCountDown(days)
{
var n1= parseInt(days/10) ;
day1.setProperty(hmUI.prop.SRC,countArray[n1]);
var n2 = parseInt(days%10) ;
day2.setProperty(hmUI.prop.SRC,countArray[n2]);
}
// hide count down day
function hideCountDown()
{
day1.setProperty(hmUI.prop.VISIBLE,false);
day2.setProperty(hmUI.prop.VISIBLE,false);
}
//显示心率icon及数据
function showHeart()
{
heartIcon.setProperty(hmUI.prop.MORE,{
x: 318,
y: 43,
w: 32,
h: 32,
src: rootPath + "img/heart.png",
show_level: hmUI.show_level.ONLY_NORMAL | hmUI.show_level.ONLY_AOD,
});
heartTxt.setProperty(hmUI.prop.MORE,{
x: 307,
y: 86,
font_array: dateWhiteArr,
h_space: 0,
align_h: hmUI.align.CENTER_H,
padding: false,
isCharacter: true,
type: hmUI.data_type.HEART,
invalid_image: rootPath + "img/invalid_white.png",
show_level: hmUI.show_level.ONLY_NORMAL | hmUI.show_level.ONLY_AOD,
});
}
const widgetDelegate = hmUI.createWidget(hmUI.widget.WIDGET_DELEGATE, {
resume_call: (function () { //返回表盘
var hour = timeSensor.hour;
var min= timeSensor.minute;
var sec = timeSensor.second;
getCurrentDate();
//返回亮屏，最大亮屏时间是30s, 接近0点，启动倒计时
if(timeSensor.month ==12 && (hour==23 || hour==11) && min == 59 && sec >=30)
{
startCountDown(sec);
}
}),
pause_call: (function () {//滑出表盘
timer.stopTimer(countDownTimer);
}),
});
},
onInit() {
this.init_view();
},
onReady() {
},
onShow() {
},
onHide() {
},
onDestory() {
timer.stopTimer(clock_timer);
},
});
/*
* end js
*/
})()
} catch (e) {
}
https://amazfitwatchfaces.com/gtr/view/19672
提前祝大家今年的圣诞节玩得开心！