基于Two.js实现星球环绕动画效果的示例


Posted in Javascript onNovember 06, 2017

Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。

Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中。

效果如下:

基于Two.js实现星球环绕动画效果的示例

下面是核心js code HTML就不贴了,需要引入two.js文件:

var elem = document.getElementById('draw-animation');

var two = new Two({ width: 700, height: 700 }).appendTo(elem);

//外层大运行轨迹

var track = two.makeCircle(0, 0, 200);

track.fill='transparent';

track.stroke='#3366FF';

track.linewidth=3;

//sun

var sun = two.makeCircle(0,0,80);

sun.fill='#FF8000';

sun.stroke='#FF0000';

sun.linewidth=5;

//earth

var earth = two.makeCircle(0,0,50);

earth.fill='#9ACD32';

//moon

var moon = two.makeCircle(100,0,30);

moon.fill='#1C75BC';

//inline 小的运行轨迹

var inline = two.makeCircle(0,0,100);

inline.stroke='#3366FF';

inline.fill='transparent';

inline.linewidth=3;

//group 分组 一类型为一组

var group = two.makeGroup(inline,earth,moon);

console.dir(group);

var group1 = two.makeGroup(sun,track,group);

 

group1.translation.set(two.width / 2, two.height / 2); //平移(x,y)父元素的一半

group.translation.set(200, 0); 

group.scale = 0.8; //比例

two.bind('update', function(frameCount) {//执行动画

  group1.rotation += 0.01 *2* Math.PI;

  group.rotation += 0.01 * Math.PI;

}).play();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
JS实现图片放大镜插件详解
Nov 06 #Javascript
js定时器实现倒计时效果
Nov 05 #Javascript
Vuejs实现购物车功能
Nov 05 #Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 #Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
You might like
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
基于python log取对数详解
2018/06/08 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
中年人生感言
2014/02/04 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
大学生心理活动总结
2014/07/04 职场文书
2015年教研工作总结
2015/05/23 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers