现如今越来越多人关注可视化,可视化效果的展现不仅能帮助用户更好的展示企业,还可以帮助员工更好的开展工作。作为技术开发人员你一定很关心做可视化应用的开发用何种编程语言呢?说到编程语言,我们都知道其中几种,例如php、Javascript 、java、python等等。thingjs平台作为物联网可视化pass平台,使用最热门的Javascript,基于webgl标准,可以通过平台的框架代码、快捷代码实现可视化应用的开发。建议开发人员尝试一下哦~
缩放动画.js
/**
* 说明:物体缩放动画(scaleTo)
* 操作:点击按钮 控制相应物体缩放
* 教程:ThingJS教程——>控制对象——>位移/旋转/缩放动画
* 难度:★★☆☆☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse'
});
app.on('load', function () {
// 创建Box
var box = app.create({
type: 'Box',
width: 5.0, // 宽度
height: 5.0, // 高度
depth: 5.0, // 深度
center: 'Bottom', // 中心点
});
new THING.widget.Button('缩放Box', function () {
box.scaleTo({
scale: [1, 5, 1], // 缩放倍数
time: 1000, // 动画时间
complete: function () {
console.log('缩放完成');
}
})
})
var car01 = app.query('car01')[0];
// 以 car 为父物体 创建Marker
var marker = app.create({
type: "Marker",
offset: [0, 2, 0],
size: 4,
url: "https://thingjs.com/static/images/warning1.png",
parent: car01
});
new THING.widget.Button('缩放Marker', function () {
marker.scaleTo({
scale: [1.5, 1.5, 1.5], // 缩放倍数
time: 1000, // 动画时间
loopType: THING.LoopType.PingPong // 循环类型 设置循环后 无回调函数
})
})
new THING.widget.Button('停止缩放Maker', function () {
marker.stopScaling();
})
});