javascript - 使用 Canvas 制作圆圈动画 - 如何扩展以填充整个视口(viewport)？

Question

密码本

http://codepen.io/tconroy/pen/RPzxgz

基本设置:

我正在尝试创建一个页面，该页面在居中容器内包含 2 列，最大宽度为 1600 像素。

左列包含页面内容。右栏包含一个广告单元(例如，640x480 像素宽)。

在 768 像素或更低的媒体断点处，2 列应该堆叠(这样内容在上面，广告在它下面)。

问题

当页面加载时，应该有一个 400x400 像素的 Canvas 元素，在屏幕中心(绝对中心 - 垂直和水平)包含一个白色圆圈。

Circle 动画到左列内容正后方的位置。

在此之后，圆圈应该“扩展”以填充整个用户的视口(viewport)，不会覆盖内容或导致出现滚动条。

如我下面的 fiddle 所示，我已经获得了初始圆圈/运动动画，但是我在尝试找出扩展部分时遇到了问题。我需要圆圈出现增长/扩展，直到它覆盖整个视口(viewport)，但所有文本内容/广告单元不应被遮挡，并且不应因动画而出现滚动条。

我对 Canvas 非常陌生，所以如果有人能在不破坏初始动画的情况下帮助我，我将不胜感激。 :)

http://codepen.io/tconroy/pen/RPzxgz

HTML:

<div class="container">
  <div class="navigation row">
    <h1 style="float:right;"><a href="#">Continue</a></h1>
  </div>
  <div class="content row">
    <div class="circle-wrap">

      <canvas class="circle" width="400" height="400"></canvas>

      <div class="template-output">
        <h1 class="title">
              <span class="upper">Title TopLine</span>
              <span class="lower">Title Bottom</span>
            </h1>
        <div class="body">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum distinctio nesciunt nostrum magni neque. Iusto et delectus iure distinctio cupiditate, a sint doloremque ratione saepe sunt quisquam assumenda, eaque velit?</p>
          <p class="byline">- Author Name</p>
        </div>
      </div>

    </div>
  </div>


  <div class="ads row">
    <figure class="ad">
      <figcaption>Advertisement</figcaption>
      <div id="welcome"></div>
    </figure>
  </div>


</div>
</div>

CSS:

/* BASE STYLES */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: gray;
  overflow: hidden;
}

/* END BASE STYLES */
/* LAYOUT */
.container {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  outline: 1px solid black;
}

.row {
  width: 50%;
  height: 100%;
  float: left;
  display: block;
}
.row.content {
  border: 1px solid blue;
}
.row.ads {
  border: 1px solid red;
}
.row.navigation {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .row {
    width: 100%;
    height: auto;
  }
}

/* END LAYOUT STYLES */
/* ADVERTISEMENT */
.ad {
  display: table;
  margin: 0 auto;
}
.ad figcaption {
  text-align: center;
  margin: 0 auto;
}
.ad #welcome {
  outline: 1px solid black;
  background: darkgray;
  width: 640px;
  height: 480px;
  margin: 0 auto;
}

/* END ADVERTISEMENT STYLES */
/* CONTENT */
.content {
  min-height: 400px;
}
.content .template-output {
  width: 400px;
  position: relative;
}
.content .template-output .title {
  font-size: 4em;
}
.content .template-output .title span {
  display: block;
  text-transform: uppercase;
}
.content .template-output .title .upper {
  text-align: left;
}
.content .template-output .title .lower {
  text-align: right;
}
.content .template-output .body {
  position: relative;
}
.content .circle-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.content .circle-wrap .circle {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0%, 0%);
}
.content .circle-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

/* END CONTENT STYLES */

JAVASCRIPT(包括:jQuery 和 GSAP TweenMax 库)

/*
  I have successfully created the canvas element in the center 
  of the screen and animate it to the left column. Now, I want the circle to "expand" behind the content, and fill the entire viewport.
  It should not cause scrollbars to appear or cover the text content.
*/
(function () {

    var tl = new TimelineMax();

    var $canvas = $('.circle'),
        $canvas_wrap = $('.circle-wrap'),
        canvas = $canvas[0],
        context = canvas.getContext('2d'),
        canvas_width = canvas.width,
        canvas_height = canvas.height;
        context.globalCompositeOperation='destination-over';
    draw(context);


    /* TIMELINE STUFF */
    var canvas_opts = {
        'center-to-destination': {
            xPercent: -50,
            yPercent: -50,
            top: '50%',
            left: '100%',
            delay: 1.5
        }
    };
    tl.from(canvas, 1, canvas_opts['center-to-destination']);


})();

Answer 1

This 是我根据自己的理解得出的结果，我可能是错的。

以下是您的代码发生的变化:

• canvas HTML 元素已提升并移出，放在 container 开始之前 HTML 元素。
• 两者都是 canvas和 container已获得 position: absolute 与 z-index 0 的值和 1分别通过使用 .set() TweenMax 的方法在 JavaScript 中。
• canvas的 width 和 height 也设置为 innerWidth和 innerHeight的 window对象。
• 连续运行 render 方法被创建，它被挂接到 tick 由 ticker 触发的事件内部存在物体 TweenLite对象。
• 动画的初始属性在 canvasProps 中设置对象。
• 这canvasProps然后使用对 .to() 的三个调用对对象进行动画处理。 TweenMax 的方法.
• 最后， render 方法不断刷新 Canvas 并根据 canvasProps 中不断变化的值绘制一个圆圈方法。

JavaScript:

(function() {
  var container = $('.container');
  var canvas = $('.circle')[0];
  var context = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  TweenMax.set(container, { position: 'absolute', zIndex: 1 });
  TweenMax.set(canvas, { position: 'absolute', zIndex: 0 });

  var canvasProps = {
    currX: window.innerWidth * 0.5,
    currY: window.innerHeight * 0.5,
    currRadius: 0
  };

  TweenLite.ticker.addEventListener('tick', render, false);
  TweenMax.to(canvasProps, 1, { currRadius: 200, ease: Expo.easeInOut });
  TweenMax.to(canvasProps, 1, { delay: 1, currX: 200, ease: Expo.easeInOut });
  TweenMax.to(canvasProps, 1, { delay: 2, currRadius: window.innerWidth, ease: Expo.easeInOut });

  function render() {
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
    context.beginPath();
    context.arc(canvasProps.currX, canvasProps.currY, canvasProps.currRadius, 0, Math.PI * 2, true);
    context.fillStyle = 'white';
    context.fill();
  }
})();

希望这对您有所帮助。