基于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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
js 颜色选择插件
2017/01/23 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python计算时间差的方法
2015/05/20 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python实现简单颜色识别程序
2020/02/19 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
2014年乡镇植树节活动方案
2014/02/28 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
银行授权委托书格式
2014/10/10 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
化妆品促销活动总结
2015/05/07 职场文书
辞职信格式范文
2015/05/13 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript