一、什么是two.js？

Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。

Two.js 有一个内置的动画循环，可搭配其他动画库。Two.js 包含可伸缩矢量图形解释器，这意味着开发人员和设计人员都可以在商业应用中，如 Adobe Illustrator 中创建 SVG 元素，并把它引入 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>

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>

其中的背景是这个函数makeCurve会改变为什么样的背景取决于所给的数是多大以及多少个

四、two.js官网链接

https://two.js.org/

two.js之实现动画效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  3. js判断css动画效果是否结束

    <!-- css样式 --> <style> .test{ width: 100px; height: 100px; transition: all 5s; backgroun ...

  4. 通过JS完成电梯动画效果

    实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果 用JS写了一个 <!DOCTYPE html> <html> <head> <met ...

  5. js +1的动画效果

    var fnPlusAnimate = function(str, options){ if (typeof str === 'object') { options = str; str = unde ...

  6. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  7. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  8. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

随机推荐

  1. String的内存模型，为什么String被设计成不可变的

    String是Java中最常用的类,是不可变的(Immutable), 那么String是如何实现Immutable呢,String为什么要设计成不可变呢? 前言 关于String,收集一波基础,来源 ...

  2. python基础之五大标准数据类型

    学习一门语言,往往都是从Hello World开始. 但是笔者认为,在一个黑框框中输出一个"你好,世界"并没有什么了不起,要看透事物的本质,熟悉一门语言,就要了解其底层,就是我们常 ...

  3. Python dict operation introduce

    字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 ,格式如下所示: d = ...

  4. 51nod 1536不一样的猜数游戏 思路：O（n）素数筛选法。同Codeforces 576A Vasya and Petya's Game。

    废话不多说,先上题目. 51nod Codeforces 两个其实是一个意思,看51nod题目就讲的很清楚了,题意不再赘述. 直接讲我的分析过程:刚开始拿到手有点蒙蔽,看起来很难,然后......然后 ...

  5. SQL server2005学习笔记（一）数据库的基本知识、基本操作（分离、脱机、收缩、备份、还原、附加）和基本语法

    在软件测试中,数据库是必备知识,假期闲里偷忙,整理了一点学习笔记,共同探讨. 阅读目录 基本知识 数据库发展史 数据库名词 SQL组成 基本操作 登录数据库操作 数据库远程连接操作 数据库分离操作 数 ...

  6. C++PrimerPlus第6版 第四章——复合类型

    1,复合类型主要包含:数组.结构.联合.枚举.类.指针.引用等. 2,数组.长度必须确定.即编译阶段,数组的长度就得确定好.所以只能使用常量(#define.const)声明数组长度.如果使用变量声明 ...

  7. 在Java环境上运行redis

    首先你得有Java环境,不多说,参考http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 下载redis驱动包 链接:http: ...

  8. Ubuntu16.04 install OpenJDK8

    1.按Ctrl + Alt + T打开终端.打开后,运行下面的命令来添加PPA:sudo add-apt-repository ppa:openjdk-r/ppa2.之后,更新系统包缓存并安装Open ...

  9. Rx 入门指引 （一）

    自学 Rx 快有一个周了, 它非常适合处理复杂的异步场景.结合自己所学,决定写系列教程. 我认为, Rx 中强大的地方在于两处 管道思想,通过管道,我们订阅了数据的来源,并在数据源更新时响应 . 强大 ...

  10. Sql Server 数据库中调用dll文件

    1.首先新建一个空的解决方案,并添加一个类库,代码如下,编译并生产dll using System; using System.Collections.Generic; using System.Da ...