kanzi指针旋转效果实现-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

kanzi指针旋转效果实现

简介: 下面开始讲解如何实现如下指针转动的效果:   1.导入图片相关素材。 已经导入的素材位置 /Tutorials/Demo/Assets. 手动调节如下来调整大小。


下面开始讲解如何实现如下指针转动的效果:

 

1.导入图片相关素材。

已经导入的素材位置 <KanziWorkspace>/Tutorials/Demo/Assets.

手动调节如下来调整大小。

2.添加定时器触发

timer的触发设置:

用脚本来响应触发,

3.脚本程序编写:

 
// Get the SpeedNeedle node.
var speedNeedleNode = node.lookupNode('#SpeedNeedle');
// Set the highest value for the speed needle.
var maxSpeed = 240;
// Set the number of seconds it takes for the needle to go from the lowes to the highest value and back
var cycleTimeSpeed = 10;
var timeOffsetSpeed = 0;

var fuelNeedleNode = node.lookupNode('#FuelNeedle');
var maxFuel = 100;
var cycleTimeFuel = 10;
var timeOffsetFuel = 3;

var batteryNeedleNode = node.lookupNode('#BatteryNeedle');
var maxBattery = 100;
var cycleTimeBattery = 10;
var timeOffsetBattery = 0;

function calculateNeedlePosition (maxValue, cycleTime, timeOffset)
{
    var halfCycleTime = cycleTime / 2;
    var now = (Date.now() + timeOffset * 1000) / 1000;
    
    var needleValue = 0;
    var percentOfHalfCycle = (now % halfCycleTime) / halfCycleTime;
    if (now % cycleTime < halfCycleTime)
    {
        needleValue = maxValue * percentOfHalfCycle;
    }
    else
    {
        needleValue = maxValue - maxValue * percentOfHalfCycle;
    }
    
    return needleValue;
}

speedNeedleNode.setProperty('Demo.Speed', calculateNeedlePosition(maxSpeed, cycleTimeSpeed, timeOffsetSpeed));
fuelNeedleNode.setProperty('Demo.Fuel', calculateNeedlePosition(maxFuel, cycleTimeFuel, timeOffsetFuel));
batteryNeedleNode.setProperty('Demo.Battery', calculateNeedlePosition(maxBattery, cycleTimeBattery, timeOffsetBattery));
 

编写完程序,保存。

 

 在下面的路径下可以找到自己所保存的程序。

这样就完成了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章