一、什么是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. Postman高级应用——流程控制、调试、公共函数、外部数据文件

    postman客户端下载地址:https://www.getpostman.com/apps 目录 流程控制 调试 公共函数 外部数据文件 流程控制 流程控制简言之就是设置接口的执行顺序,流程控制只有 ...

  2. 分享基于分布式Http长连接框架--设计模型

    追求简单的设计. 也许你的设计功能很强大,但能够在满足你需求的前提下尽量简单明了设计. 当你的设计过于复杂的时候想想是不是有其它路可以走,你站在别人的角度想下,如果别人看了你的设计会不会心领神会,还是 ...

  3. Average of Levels in Binary Tree

    Given a non-empty binary tree, return the average value of the nodes on each level in the form of an ...

  4. windows phone 模拟器

    window phone 模拟器启动报错 修改Bios设置,我的是yoga pro 2,只修改 即可.启动成功

  5. sqlserver 2005连接超时采用bat命令解决

    将以下内容保存为 openSql.bat 双击运行即可 @echo ========= SQL Server Ports =================== @echo Enabling SQLS ...

  6. MVVM -- CallMethodAction 和 InvokeCommandAction

    MVVM实践教程   算算,从事Silverlight和WPF的开发也有1年多的时间了,虽然时间不算长,虽然还没有突出的成就,但是感觉也还算一般. 但是,从头至今都没有去认真研究和使用过MVVM,虽然 ...

  7. WPF自定义命令和处发命令

    接实现ICommand接口的命令.在介绍之前,先看一下ICommand接口的原型: event EventHandler CanExecuteChanged; bool CanExecute(obje ...

  8. Linux用户角色划分

    在Linux系统中,用户是分角色的,角色不同,对应权限不同.用户角色通过UID和GID识别. 大致分为三种:超级用户,普通用户,虚拟用户. 超级用户:默认是root用户,其UID和GID都是0.roo ...

  9. Python学习笔记（九）

    Python学习笔记(九): 装饰器(函数) 内置函数 1. 装饰器 1. 作用域 2. 高阶函数 3. 闭包 如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就 ...

  10. Android基础知识笔记01—框架结构与四大组件

    -----------Andriod 01--------------->>> Andriod系统架构    linux内核与驱动层. 系统运行库层. 应用框架层. 应用层 内核驱动 ...