基于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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
JS实现继承的几种常用方式示例
Jun 22 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
GD输出汉字的函数的分析
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python编程中类与类的关系详解
2019/08/08 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python 如何实现遗传算法
2020/09/22 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
什么时候用assert
2015/05/08 面试题
企业标语大全
2014/07/01 职场文书
项目工作说明书
2014/07/29 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android