基于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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js arguments对象应用介绍
Nov 28 Javascript
JavaScript中使用document.write向页面输出内容实例
Oct 16 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Javascript中With语句用法实例
May 14 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
微信小程序用户授权最佳实践指南
May 08 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中几个常用的魔术常量
2012/02/23 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
简单了解Django模板的使用
2017/12/20 Python
Python socket聊天脚本代码实例
2020/01/02 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python容器类型公共方法总结
2020/08/19 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
如何查看python关键字
2021/01/17 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
招商经理岗位职责
2013/11/16 职场文书
户外活动总结范文
2014/04/30 职场文书
公积金贷款承诺书
2015/04/30 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技