zoukankan      html  css  js  c++  java
  • two.js之实现动画效果

    一、什么是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 = {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/

     

  • 相关阅读:
    关于这个 blog
    P6499 [COCI2016-2017#2] Burza 题解
    CF1172F Nauuo and Bug 题解
    CF1479D Odd Mineral Resource 题解
    CF1442E Black, White and Grey Tree 题解
    CF1442D Sum 题解
    CF1025D Recovering BST 题解
    CF1056E Check Transcription 题解
    CF1025F Disjoint Triangles 题解
    红包算法的PHP实现
  • 原文地址:https://www.cnblogs.com/junwuyao/p/7789177.html
Copyright © 2011-2022 走看看