码迷,mamicode.com
首页 > Web开发 > 详细

H5JS二维动画制作!two.js的基本操作class1

时间:2017-06-17 18:38:17      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:order   stroke   点赞   旋转   over   pes   rip   技术   white   

今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作

two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果

下载网址如下: https://two.js.org/#download

class1:

一:如何使用:

首先在页面中引入js文件:

    <script src="js/two.js" type="text/javascript" charset="utf-8"></script>

打开网页控制台console,输入Two,如果返回一个数组,证明已生效,如图:

技术分享

创建一个div,作为选区

<div id="draw-shapes"></div>
        <style type="text/css">
            
            #draw-shapes{
                border: 1px  solid blue;
                width: 400px;
                height: 300px;
                background-color: green;
            }
            
    </style>    

在JS中选取上面的div

var elem = document.getElementById(draw-shapes);//选中页面上的div

二:创建空间与空间中的形状:

完成上述操作以后,进行创建二维空间操作

var params = { width: 300, height: 200 };//二维空间宽高(overflow hidden) 

var two = new Two(params).appendTo(elem);//新建一个在div中的二维空间

创建图形:

var circle = two.makeCircle(72, 100, 50);//创建圆形(x坐标,y坐标,半径)
var rect = two.makeRectangle(213, 100, 100, 100);//创建矩形(x,y,宽,高)

三:调整图形属性:

// 具体设置不同的属性
        circle.fill = #FF8000;//fill填充色
        circle.stroke = red; // 边线颜色
        circle.linewidth = 5;//边线宽
        circle.opacity = 0.5;//透明度
        
        rect.fill = blue;
        rect.opacity = 0.75;
        rect.stroke = "white";
        rect.linewidth = 5;
     rect.noStroke();//去掉边线

四:投射到网页上:

将生成的空间,图形投射到网页上,需要输入如下指令:

two.update();

在网页中的效果如图所示

技术分享

五:组的作用与建立:

组可以将数个图形合并到一个组中,一个组可以设置相同的属性与效果

在创建完图形之后,可以执行如下代码:

var group = two.makeGroup(circle, rect);

将两个图形放到一个组中

// 可以对组内所有形状进行属性设定
        group.translation.set(two.width / 2, two.height / 2);//让一个组内所有的形状位移,使中心保持在二维空间的什么位置
        group.rotation = Math.PI;//旋转
        group.scale = 0.75;//缩放
        
        group.linewidth = 7;//统一设置线宽

通过以上指令对组内所有形状进行相同的操作

技术分享

 

 上图为操作后的两个形状的效果。

今天就先介绍这么多,下次会详细说明如何形成动画效果

学会了的小伙伴记得点赞哦!

 

H5JS二维动画制作!two.js的基本操作class1

标签:order   stroke   点赞   旋转   over   pes   rip   技术   white   

原文地址:http://www.cnblogs.com/Lmey/p/7040740.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!