基于Two.js实现星球环绕动画效果的示例
2017-11-06 09:38
537 查看
Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。
Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 基于Two.js实现的一个小demo,星球环绕动画效果
- 分别在XML文件、Java代码中实现动画效果 Animation(带示例)
- jQuery实现的鼠标响应缓冲动画效果示例
- JS实现的简单折叠展开动画效果示例
- 利用swift实现卡片横向滑动动画效果的方法示例
- jQuery实现鼠标响应式透明度渐变动画效果示例
- jQuery实现的背景颜色渐变动画效果示例
- jquery Ajax 实现加载数据前动画效果的示例代码
- jQuery实现鼠标响应式淘宝动画效果示例
- jQuery实现的下雪动画效果示例【附源码下载】
- JS实现图片旋转动画效果封装与使用示例
- JS实现的透明度渐变动画效果示例
- JS实现匀速与减速缓慢运动的动画效果封装示例
- JS实现自定义状态栏动画文字效果示例
- two.js之实现动画效果示例
- jquery Ajax 实现加载数据前动画效果的示例代码
- 原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
- 利用CSS3实现平移动画效果示例代码
- jQuery实现动画、消失、显现、渐出、渐入效果示例
- Python3实现的画图及加载图片动画效果示例