基于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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 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
实用函数2
2007/11/08 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python:接口间数据传递与调用方法
2018/12/17 Python
python协程之动态添加任务的方法
2019/02/19 Python
python实现维吉尼亚加密法
2019/03/20 Python
了解一下python内建模块collections
2020/09/07 Python
python Cartopy的基础使用详解
2020/11/01 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
五型班组建设方案
2014/02/10 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
小学教师党员承诺书
2015/04/27 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
毕业论文致谢范文
2015/05/14 职场文书
妇产科护理心得体会
2016/01/22 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Django drf请求模块源码解析
2021/06/08 Python
详解Python为什么不用设计模式
2021/06/24 Python