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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
jQuery 页面 Mask实现代码
Jan 09 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
javascript常用函数(1)
Nov 04 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
使用uni-app开发微信小程序的实现
Dec 13 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网站基础优化方法小结
2008/09/29 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
在Django中创建动态视图的教程
2015/07/15 Python
Python中的super()方法使用简介
2015/08/14 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python守护线程用法实例
2017/06/23 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python3.7 的新特性详解
2019/07/25 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python树的同构学习笔记
2019/09/14 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python数据类型强制转换实例详解
2020/06/22 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
篮球赛口号
2014/06/18 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技