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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
js简单时间比较的方法
Aug 02 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
JS简易计算器实例讲解
Jun 30 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js获取域名的方法
2015/01/27 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python实现泊松图像融合
2018/07/26 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
如何理解Python中的变量
2020/06/01 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
2014年工程工作总结
2014/11/25 职场文书
2015年公司新年寄语
2014/12/08 职场文书
会议通知范文
2015/04/15 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
生日祝酒词大全
2015/08/10 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
Nginx反向代理、重定向
2022/04/13 Servers