基于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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js 目录列举函数
Nov 06 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
Python中os和shutil模块实用方法集锦
2014/05/13 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python追加元素到列表的方法
2015/07/28 Python
scrapy爬虫实例分享
2017/12/28 Python
Linux下python制作名片示例
2018/07/20 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Python爬取梨视频的示例
2021/01/29 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
导游个人求职信
2014/04/25 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
2015年中个人总结范文
2015/03/10 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
python字符串常规操作大全
2021/05/02 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android