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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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中看实例学正则表达式
2006/12/25 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
js中作用域的实例解析
2017/03/16 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python中tell()方法的使用详解
2015/05/24 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
文秘自荐信
2013/10/20 职场文书
企业党员个人自我评价
2014/09/20 职场文书
感恩教师主题班会
2015/08/12 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python基础入门之字典和集合
2021/06/13 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis