ThingJS:仅需不到5行代码,实现炫酷3D动画

简介: 在物联网领域,Thing都有哪些动效呢?

在物联网领域,Thing都有哪些动效呢?调用ThingJS API看看。

对于 Thing 类的对象,是通过 url 加载的模型,很多模型在制作阶段就内置了动画。

如果模型有内置动画,则可以在 ThingJS 中利用 API 调用播放这些动画。
如果是动态创建的物体,由于模型加载是异步的,则必须在模型加载完成后才能调用动画。

1. 获取模型动画
首先我们通过 animationNames 属性获取上图中的模型都有什么动画。
示例:

输出:

  1. 播放模型动画
    我们使用 playAnimation 接口进行动画播放。

• 简单播放动画

    name: "animation",
    reverse: true//反转数组
}); 

• 可以反向播放动画

obj.playAnimation("animation");
• 可以循环播放动画,并且可以同 loopType ,来控制循环类型

obj.playAnimation({
    name: "open1",
    loopType: THING.LoopType.Repeat
}); 

• 还可以同时播放多个动画;

    name: ["open1", "open2"],
    loopType: THING.LoopType.PingPong,
    speed: 0.4
}); 
  1. 停止播放模型动画
    我们使用 stopAnimation 接口来停止动画播放

`//当物体带有多个动画时,stopAnimation接口将会停止所有动画播放
obj.stopAnimation();
//指定停止哪个动画
obj.stopAnimation("open1");


### 官方模型动画介绍
我们有提供各个行业的模型供用户选择,这些模型有部分在制作阶段就内置了动画。例如:
仓储
以下面的粮仓为例:
在CamBuilder中我们可以通过选中该模型,查看模型是否带有动画,例如这个粮仓动画名为‘CloseRoof’和‘OpenRoof’,分别控制粮仓开盖关盖动画。
 ![](https://img2020.cnblogs.com/blog/1494719/202008/1494719-20200828181710705-691213668.png)
相关文章
|
4月前
|
前端开发 JavaScript 开发者
【QML进阶 进度条设计】打造动态弧形进度条特效
【QML进阶 进度条设计】打造动态弧形进度条特效
299 2
|
11月前
|
存储
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
261 0
|
图形学
unity3d UGUI常用游戏进度条实现方式
测试.png 直接将脚本挂载到进度条image对象上即可,这种方式可以解决当进度条使用图片的时候,防止图片拉伸变形 using UnityEngine; using UnityEngine.
2933 0
|
26天前
|
移动开发 前端开发 JavaScript
HTML+CSS动画打造酷炫轮播图!(含源码)
HTML+CSS动画打造酷炫轮播图!(含源码)
|
17天前
|
C# UED 开发者
WPF动画大揭秘:掌握动画技巧,让你的界面动起来,告别枯燥与乏味!
【8月更文挑战第31天】在WPF应用开发中,动画能显著提升用户体验,使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法,包括平移、缩放、旋转等常见类型,并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外,还将介绍动画触发器的使用,帮助开发者更好地控制动画效果,提升应用的吸引力。
37 0
|
3月前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
128 0
|
4月前
|
XML Java Android开发
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
253 0
|
11月前
|
数据安全/隐私保护
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(1)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
115 0
|
11月前
|
数据安全/隐私保护 iOS开发 MacOS
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果(2)
CocosCreator3.8研究笔记(二十四)CocosCreator 动画系统-动画编辑器实操-关键帧实现动态水印动画效果
123 0
|
移动开发 前端开发 JavaScript
【前端动画】实现动画的6种方式
【前端动画】实现动画的6种方式
1138 0