来源:GBin1.com

two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现:

  • webgl
  • svg
  • 2d画布

使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Types.canvas, Two.Types.svg, or Two.Types.webgl

下面是使用two.js生成的一个动画效果:

http://www.gbtags.com/gb/debug/592abb4d-6449-4654-a824-0232c0c3b110.htm

相关JS代码如下:

    var el = document.getElementById("main"),
two = new Two({
width: '800',
height: '600'
});
two.appendTo(el); var earthAngle = 0,
moonAngle = 0,
distance = 30,
radius = 50,
padding = 100,
orbit = 200,
offset = orbit + padding,
orbits = two.makeGroup(); var earthOrbit = two.makeCircle(offset, offset, orbit);
earthOrbit.noFill();
earthOrbit.linewidth = 2;
earthOrbit.stroke = "#EFEFEF";
orbits.add(earthOrbit);
two.update(); var pos = getPositions(earthAngle++, orbit),
earth = two.makeCircle(pos.x + offset, pos.y + offset, radius);
earth.stroke = "#444";
earth.linewidth = 3;
earth.fill = "#CCCCCC"; var moonOrbit = two.makeCircle(earth.translation.x, earth.translation.y, radius + distance);
moonOrbit.noFill();
moonOrbit.linewidth = 2;
moonOrbit.stroke = "#ccc";
orbits.add(moonOrbit);
var pos = getPositions(moonAngle, radius + distance),
moon = two.makeCircle(earth.translation.x + pos.x, earth.translation.y + pos.y, radius / 4);
moonAngle += 5;
moon.fill = "#474747"; two.bind("update", function (frameCount) {
var pos = getPositions(earthAngle++, orbit);
earth.translation.x = pos.x + offset;
earth.translation.y = pos.y + offset; var moonPos = getPositions(moonAngle, radius + distance);
moon.translation.x = earth.translation.x + moonPos.x;
moon.translation.y = earth.translation.y + moonPos.y;
moonAngle += 5;
moonOrbit.translation.x = earth.translation.x;
moonOrbit.translation.y = earth.translation.y;
}); function getPositions(angle, orbit) {
return {
x: Math.cos(angle * Math.PI / 180) * orbit,
y: Math.sin(angle * Math.PI / 180) * orbit
};
}
two.play();

网站地址:http://jonobr1.github.io/two.js

via 极客标签

来源:使用two.js生成的卫星环绕动画效果

使用two.js生成的卫星环绕动画效果的更多相关文章

  1. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  2. js原生实现链式动画效果

    // 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...

  3. 基于Two.js实现的一个小demo,星球环绕动画效果

    下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...

  4. h5+js随机拖动鼠标产生动画效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. d3.js制作蜂巢图表带动画效果

    以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六 ...

  6. 使用SVG生成的奔跑吧兄弟的动画效果

    在线演示 本地下载 缩放一下在线演示效果窗口,看看不同大小下的动画是不是都显示的非常完美? 体验一下SVG的强大之处吧!

  7. js实现jquery函数animate动画效果

    <script> function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); function ge ...

  8. window.requestAnimationFrame()的使用,处理更流畅的动画效果

    https://blog.csdn.net/w2765006513/article/details/53843169 window.requestAnimationFrame()的使用 2016年12 ...

  9. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

随机推荐

  1. SpringMVC调用过程

    SpringMVC中的四大组件: 1.前端控制器(DispatcherServlet)      =>[无需程序员开发] 主要是负责request和response对象的转发和响应. 2.处理器 ...

  2. CodeForces 779B Weird Rounding

    简单题. 删去结尾的不是$0$的数字,保证结尾连续的$k$个都是$0$,如果不能做到,就保留一个$0$. #include<map> #include<set> #includ ...

  3. 【我要学python】爬虫准备之了解基本的html标签

    HTML 标题 <h1>This is a heading</h1> HTML 段落 <p>This is a paragraph.</p> HTML ...

  4. 洛谷——P1208 [USACO1.3]混合牛奶 Mixing Milk

    P1208 [USACO1.3]混合牛奶 Mixing Milk 题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业 ...

  5. java-多线程-一道阿里面试题分析

    这段代码大多数情况下运行正常,但是某些情况下会出问题.什么时候会出现什么问题?如何修正?可见博客 http://yueyemaitian.iteye.com/blog/1387901 1.public ...

  6. 【数论】【莫比乌斯反演】【线性筛】hdu6134 Battlestation Operational

    看这个题解吧:http://blog.csdn.net/wubaizhe/article/details/77338332 代码里顺便把几个常用的线性筛附上了. Key:1.gcd(i,j)==1利用 ...

  7. [BalkanOI2016]Lefkaritika

    题目大意: 一个n*m的格子上有b个障碍物,现在让你往上面放正方形(长宽在格线上).问可以放多少种边长.位置不同的正方形? 思路: 很容易想到一个O(n^3)的暴力: 首先前缀和,然后枚举某一个顶点和 ...

  8. javascript字符串与数组练习

    <html> <head> </head> <body> <script type="text/javascript"> ...

  9. rocketmq,zookeeper,redis分别持久化的方式

    1.rocketmq持久化: RocketMQ 的所有消息都是持久化的, 先写入系统 PAGECACHE, 然后刷盘, 可以保证内存与磁盘都有一份数据,访问时,直接从内存读取. RocketMQ 的所 ...

  10. redis节点管理-新增从节点

    原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg12.html 新增从节点 新增一个节点7008节点,使用add-node --slave命令. [pl ...