• Administrator
  •  
    Support Ukraine
    If you experience any problems with the forum (it is not visible, there is no way to post messages, or some functionality does not work), please let us know. If you have problems with registration or you did not receive confirmation letter, let us know and we will activate your account manually.
    If you get an "The submitted form was invalid. Try submitting again" error, delete cookies, then try again.
     

[GTR 3 ] 《圣诞倒计时》动态表盘-源码

在此板块讨论GT系列产品的任何主题,型号包括:GTR 1, GTR 2, GTR 2e, GTR 3, GTR 3 Pro, GTR 4 / GTS 1, GTS 2, GTS 2 mini, GTS 3, GTS 4, GTS 4 mini 等,发布主题贴时,请在标题上标注【手表型号】。

Moderator: Amazfit 跃我

Forum rules
1. 不能在此板块中发表含有猥亵、色情、人身攻击和反政府言论等非法或侵权言论的信息
2. 不能在相关版面内中发表不符合版面主题,或者无内容的灌水文章
3. 不能发布侵权的创作内容
Post Reply
User avatar
TXK
Posts: 299
Joined: 10 Apr 2018, 05:15
Location: china
Has thanked: 149 times
Been thanked: 97 times
Contact:

[GTR 3 ] 《圣诞倒计时》动态表盘-源码

Post by TXK »

今天上线了一款圣诞表盘,加入了倒计时交互、雪花飞舞的动画效果,是一个尝试,给大家一个实例做参考。抛砖引玉,欢迎多多交流。开发出更多个性化的表盘。

圣诞表盘动态效果图
Snow390.gif
Snow390.gif (2.52 MiB) Viewed 1282 times

表盘各时间段静态图
image.png
image.png (150.27 KiB) Viewed 1282 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

提前祝大家今年的圣诞节玩得开心!
Post Reply

Return to “GT系列”

Who is online

Users browsing this forum: No registered users and 1 guest