基于Two.js实现星球环绕动画效果的示例

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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • two.js之实现动画效果示例

    一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 二.导入two.js 三.用two.js实现动画 1)

  • 基于Two.js实现星球环绕动画效果的示例

    Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 效果如下: 下面是核心js code HTML就不贴了,需要引入two.js文件

  • 如何利用JS实现时间轴动画效果

    目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {

  • anime.js 实现带有描边动画效果的复选框(推荐)

    anime.js anime.js是一个灵活的轻型JavaScript动画库. 它与CSS,个别变换,SVG,DOM属性和JS对象. 特征 具体的动画参数 具体目标值 多个定时值 播放控制 运动路径 在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的标准,变得越来越重要.特别是在一些和用户交互的地方,使用动画能更好的給用户以反馈,提升用户的操作体验

  • JS实现图片旋转动画效果封装与使用示例

    本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.

  • js canvas实现写字动画效果

    本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t

  • js定时器+简单的动画效果实例

    1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc

  • js实现盒子移动动画效果

    本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m

  • js实现盒子滚动动画效果

    本文实例为大家分享了js实现盒子滚动动画效果的具体代码,供大家参考,具体内容如下 1.效果图1: 2.效果图2: 3.源代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

  • three.js 实现露珠滴落动画效果的示例代码

    前言 大家好,这里是 CSS 魔法使--alphardex. 本文我们将用three.js来实现一种很酷的光学效果--露珠滴落.我们知道,在露珠从一个物体表面滴落的时候,会产生一种粘着的效果.2D平面中,这种粘着效果其实用css滤镜就可以轻松实现.但是到了3D世界,就没那么简单了,这时我们就得依靠光照来实现,其中涉及到了一个关键算法--光线步进(Ray Marching).以下是最终实现的效果图 撒,哈吉马路由! 准备工作 笔者的 three.js模板 :点击右下角的fork即可复制一份 正片

  • JS Canvas接口和动画效果大全

    概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id

随机推荐