基于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 学习笔记(一)DOM基本操作
Apr 08 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python深入学习之闭包
2014/08/31 Python
跟老齐学Python之dict()的操作方法
2014/09/24 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
深入理解Python中的内置常量
2017/05/20 Python
python生成excel的实例代码
2017/11/08 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python使用type动态创建类操作示例
2020/02/29 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
工会工作先进事迹
2014/08/18 职场文书
求职自我推荐信
2015/03/24 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis