Bermu

two.js初尝

2018-07-31

我们都知道页面上的图形绘制大体分为几种，一种是由html+css，还有就是canvas、svg、甚至webgl的实现方式，其实现难度也随之构造变得复杂。

这里我们介绍一个框架two.js，是不是联想到了webgl的threejs框架，哈哈哈，没错，不过这里的two.js是做二维图像与动画用。

其使用还是相当方便的，为此放上我们的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var aim = document.getElementById('lesson-1');
  var two = new Two({
    width: 285,
    height: 200,
    // autostart:true,
    // fullscreen:true
  })

  // 追加到dom
  two.appendTo(aim);

  // circle与rect 绘制
  var circle = two.makeCircle(-70, 0, 50);
  var rect = two.makeRectangle(70, 0, 100, 100);

  circle.fill = '#ff8000';
  rect.fill = 'rgba(0, 255, 255, 0.75)';

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

  group.translation.set(two.width / 2, two.height / 2);
  group.scale = 0;
  group.noStroke();

  two.bind('update', function(frameCount) {
    if (group.scale > 0.9999) {
      group.scale = group.rotation = 0;
    }

    var t = (1 - group.scale) * 0.125;
    group.scale += t;
    group.rotation += t * 4 * Math.PI;


  }).play();

由此我们可以得到旋转的图形组，其实这里动用的有效api主要是makeGroup，选择让两个元素成组，再对它们的render进行定制，动画可以采取渐变的策略，针对大小、位移、甚至透明度。官方还提供了其他的有用api，有能力者可以多多尝试makeStar之类的，创造出有意思的视觉效果。

Tags: js生态
← 摘录集（一） 项目打包之rollup →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章