使用 Canvas 制作圆圈动画 - 如何扩展以填满整个视口？
animating a circle with Canvas - how to expand to fill entire viewport?
Codepen
http://codepen.io/tconroy/pen/RPzxgz
基本设置：
我正在尝试创建一个页面，该页面在居中容器内包含 2 列，最大宽度为 1600 像素。
左栏包含页面内容。右栏包含一个广告单元（例如，640x480 像素宽）。
在 768 像素或更低的媒体断点处，2 列应该堆叠（这样内容在上面，广告在下面）。
问题
页面加载时，应该有一个 400x400px canvas 元素，在屏幕中心（绝对中心 -- 垂直和水平）包含一个白色圆圈。
Circle 动画到左列内容正后方的位置。
在此之后，圆圈应该"expand" 填满整个用户的视口，不会覆盖内容或导致出现滚动条。
如下图 fiddle 所示，我的初始圆圈/运动动画已经开始工作，但是我 运行 遇到了试图找出展开部分的问题。我需要圆圈出现 grow/expand 直到它覆盖整个视口，但所有文本内容/广告单元不应被遮挡，并且不应因动画而出现滚动条。
我对 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']);
})();
This 是我根据我的理解能够产生的，我可能是错的。
以下是您的代码发生的变化：
canvas HTML元素已经被提升移出，放在container[=打开之前72=] HTML 元素.canvas 和 container 都被赋予 position: absolute 和 z-index 0 和 1 的值分别通过使用 JavaScript 中 TweenMax 的 .set() 方法。 canvas的width和height也设置为innerWidth 和 innerHeight 分别属于 window 对象。- 创建了一个连续的运行
render方法，该方法挂接到tick事件由 TweenLite 对象中存在的 ticker 对象触发。
- 动画的初始属性在
canvasProps 对象中设置。
- 此
canvasProps 对象然后使用对 TweenMax. 的 .to() 方法的三个调用进行动画处理
- 最后，
render方法不断刷新canvas，并根据[中不断变化的值绘制一个圆圈] =31=]方法.
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();
}
})();
希望这对您有所帮助。
如果你扩展你有 canvas 选项和 t1.from 的部分，你可以完成你正在寻找的东西（我确实在你的 [=18] 中添加了 "var" =] 定义，以便我以后可以访问该变量）：
var newWidth = $('#left_column').width();
var growBy = newWidth/canvas_width;
var grow_opts = {
'grow': {
scale: growby,
transformOrigin "0px 0px",
delay: 1.5
}
};
tl.to(canvas, 1, grow_opts['grow']);
这里有你的codepen代码的分支：https://gist.github.com/rddill-IBM/1b92bf6c03d427259a06
Codepen
http://codepen.io/tconroy/pen/RPzxgz
基本设置：
我正在尝试创建一个页面，该页面在居中容器内包含 2 列，最大宽度为 1600 像素。
左栏包含页面内容。右栏包含一个广告单元（例如，640x480 像素宽）。
在 768 像素或更低的媒体断点处，2 列应该堆叠（这样内容在上面，广告在下面）。
问题
页面加载时，应该有一个 400x400px canvas 元素，在屏幕中心（绝对中心 -- 垂直和水平）包含一个白色圆圈。
Circle 动画到左列内容正后方的位置。
在此之后，圆圈应该"expand" 填满整个用户的视口，不会覆盖内容或导致出现滚动条。
如下图 fiddle 所示，我的初始圆圈/运动动画已经开始工作，但是我 运行 遇到了试图找出展开部分的问题。我需要圆圈出现 grow/expand 直到它覆盖整个视口，但所有文本内容/广告单元不应被遮挡，并且不应因动画而出现滚动条。
我对 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']);
})();
This 是我根据我的理解能够产生的，我可能是错的。
以下是您的代码发生的变化：
canvasHTML元素已经被提升移出，放在container[=打开之前72=] HTML 元素.canvas和container都被赋予position: absolute和z-index0和1的值分别通过使用 JavaScript 中TweenMax的.set()方法。canvas的width和height也设置为innerWidth和innerHeight分别属于window对象。- 创建了一个连续的运行
render方法，该方法挂接到tick事件由TweenLite对象中存在的ticker对象触发。 - 动画的初始属性在
canvasProps对象中设置。 - 此
canvasProps对象然后使用对TweenMax. 的 - 最后，
render方法不断刷新canvas，并根据[中不断变化的值绘制一个圆圈] =31=]方法.
.to() 方法的三个调用进行动画处理
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();
}
})();
希望这对您有所帮助。
如果你扩展你有 canvas 选项和 t1.from 的部分，你可以完成你正在寻找的东西（我确实在你的 [=18] 中添加了 "var" =] 定义，以便我以后可以访问该变量）：
var newWidth = $('#left_column').width();
var growBy = newWidth/canvas_width;
var grow_opts = {
'grow': {
scale: growby,
transformOrigin "0px 0px",
delay: 1.5
}
};
tl.to(canvas, 1, grow_opts['grow']);
这里有你的codepen代码的分支：https://gist.github.com/rddill-IBM/1b92bf6c03d427259a06