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的$命名冲突详细解析
Dec 28 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js判断元素是否隐藏的方法
2014/06/09 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
JS判断数组那点事
2017/10/10 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Python yield 小结和实例
2014/04/25 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python使用turtle绘制分形树
2018/06/22 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Python配置文件处理的方法教程
2019/08/29 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
python判断元素是否存在的实例方法
2020/09/24 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
给女朋友的道歉信
2014/01/10 职场文书
空乘英文求职信
2014/04/13 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
优秀员工自荐书
2015/03/06 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书