基于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中判断控件是否存在
Aug 25 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
asm.js使用示例代码
Nov 28 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
webpack优化的深入理解
Dec 10 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
node.js通过url读取文件
2020/10/16 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python查找指定具有相同内容文件的方法
2015/06/28 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
北大自主招生自荐信
2013/10/19 职场文书
动物科学专业求职信
2014/07/27 职场文书
超市创意活动方案
2014/08/15 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
vue里使用create, mounted调用方法
2022/04/26 Vue.js