kanzi指针旋转效果实现

最新推荐文章于 2024-03-11 13:11:24 发布

转载最新推荐文章于 2024-03-11 13:11:24 发布 · 475 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/603014

文章标签：

#嵌入式

本文介绍了一种使用定时器和脚本编程实现仪表盘指针自动旋转的方法。具体步骤包括：导入图片素材，设置定时器触发，编写脚本来计算指针的位置，并通过属性设置更新指针显示。

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

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));

编写完程序，保存。