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中暂停功能的实现代码
Mar 04 Javascript
超级退弹代码
Jul 07 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
require.js中的define函数详解
Jul 10 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
vue日历/日程提醒/html5本地缓存功能
Sep 02 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
javascript的函数
2007/01/31 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python 中的with关键字使用详解
2016/09/11 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
局域网定义和特性
2016/01/23 面试题
检讨书范文500字
2015/01/28 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
入伍通知书
2015/04/23 职场文书
公司管理制度范本
2015/08/03 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL