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


Posted in Javascript onNovember 06, 2017

一、什么是two.js?

Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。

Two.js 有一个内置的动画循环,可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中。

二、导入two.js

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

三、用two.js实现动画

1)一个简单的小dome

<script type="text/javascript">
 //在整个body中绘制绘图区
 var two = new Two({
  fullscreen:true,//设置是否全屏
  autostart:true,//是否自动启动动画 
 }).appendTo(document.body);
   
 var star = two.makeStar(two.width/2,two.height/2,50,125);
 //two.update();//映射到页面上
 two.bind('update',function(frameCount){
  star.rotation +=0.03;
 })
   
</script>

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

2)实现一个比较复杂一些的

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   svg{
    background-color: black;
   }
  </style>
  <script src="js/two.JS.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <!--创建div绘图区-->
  <div id="draw-shapes">
   
  </div>
  <script type="text/javascript">
   var elem = document.getElementById("draw-shapes");
   var params = {width:400,height:400};
   var two = new Two(params).appendTo(elem);
   var circle = two.makeCircle(-72,0,50);//前两个是x轴y轴,然后是圆的半径
   var star = two.makeStar(75,0,75,35,5);
//   var ss = two.makeCurve(250,30,46,50,465,48,79,36,94);
   
   circle.fill = "#ccd0d5";//填充颜色
   circle.lineWidth = 15;//边线的宽度
   circle.stroke = "#FED519";//边线的颜色
   
   star.fill = "yellow";
   star.opacity = 0.5;//设置透明度
   circle.noStroke();//去掉边线
   
   var group = two.makeGroup(circle,star);//将两个图形合并到一个组中
//   group.fill = "#ffffff";
   
   group.translation.set(two.width/2,two.height/2);
   group.rotation = Math.PI;
   group.scale = 0.1;
   
   two.update();
   
   two.bind('update',function(frameCount){
    if(group.scale>0.99999){
     //将缩放与旋转的度数变成0
     group.scale = group.rotation = 0;
    }
    var t = (1- group.scale) * 0.3;
    group.scale +=t;
    group.rotation +=t *3*Math.PI;
   }).play();
  </script>
 </body>
</html>

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

其中的背景是这个函数makeCurve会改变为什么样的背景取决于所给的数是多大以及多少个

 四、two.js官网链接

https://two.js.org/

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

Javascript 相关文章推荐
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
Python内建模块struct实例详解
2018/02/02 Python
Python Requests库基本用法示例
2018/08/20 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
3种python调用其他脚本的方法
2020/01/06 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
护理专业的自荐信
2013/10/22 职场文书
社团文化节邀请函
2014/01/10 职场文书
高二生物教学反思
2014/01/27 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
顶岗实习计划书
2015/01/16 职场文书
研讨会致辞
2015/07/31 职场文书