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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JS解析XML实例分析
Jan 30 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序之数据绑定原理解析
Aug 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
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JS全局变量和局部变量最新解析
2016/06/24 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Pytorch中.new()的作用详解
2020/02/18 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
单位人事专员介绍信
2014/01/11 职场文书
安全教育第一课观后感
2015/06/17 职场文书
培训感想范文
2015/08/07 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS