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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
javascript实现随机抽奖功能
Dec 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
php 购物车实例(申精)
2009/05/11 PHP
PHP获取url的函数代码
2011/08/02 PHP
初识PHP
2014/09/28 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
用javascript实现画板的代码
2007/09/05 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python安装本地whl的实例步骤
2019/10/12 Python
python实现logistic分类算法代码
2020/02/28 Python
python实现超级玛丽游戏
2020/03/18 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
天游软件面试
2013/11/23 面试题
新学期班主任寄语
2014/01/18 职场文书
婚礼主持词开场白
2014/03/13 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
授权委托书(完整版)
2014/09/10 职场文书