kanzi指针旋转效果实现

  1. 云栖社区>
  2. 博客>
  3. 正文

kanzi指针旋转效果实现

大连瓦匠 2018-03-08 14:08:17 浏览586
展开阅读全文


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

 

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

编写完程序,保存。

 

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

这样就完成了。

网友评论

登录后评论
0/500
评论
大连瓦匠
+ 关注