Skip to content

Instantly share code, notes, and snippets.

@towry

towry/index.html

Created November 27, 2018 09:42
Show Gist options
  • Save towry/8a926361fabdcb3469fcca2c5786e2c9 to your computer and use it in GitHub Desktop.
Save towry/8a926361fabdcb3469fcca2c5786e2c9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/cumiwiv
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.min.js"></script>
<style id="jsbin-css">
.box {
width: 40px;
height: 40px;
border: 1px solid red;
position: absolute;
top: 0;
background-color: red;
}
canvas {
background-color: transparent;
width: 100%;
height: 100%;
}
body {
height: 100%;
}
</style>
</head>
<body>
<button type="button" id="btn" style="position: absolute; top: 10px; font-size: 18px;">Begin anime !!!!!!</button>
<canvas id="myCanvas" resize></canvas>
<div class="box">这是div</div>
<script id="jsbin-javascript">
var Path = paper.Path;
var Segment = paper.Segment;
var Point = paper.Point;
var PointText = paper.PointText;
paper.install(window);
paper.setup(document.querySelector('canvas'));
paper.view.viewSize.width = window.innerWidth;
paper.view.viewSize.height = window.innerHeight;
var t = new paper.Tool();
// draw your path
var path = new Path({
strokeColor: '#1B5578',
strokeWidth: 4,
strokeCap: 'round'
});
path.add(new Point(138.5, 397.03));
path.add(new Segment(new Point(324.07, 310.75), new Point(8.09, 67.84), new Point(-22.91, -52.23)));
var middleVector = new Segment(new Point(106.78, 235.2), new Point(30.18, 66.69), new Point(-30.19, -66.7));
path.add(middleVector);
var lastVector = new Point(204.11, 120);
path.add(lastVector);
path.dashArray = [10, 10];
var dis = lastVector.getDistance(middleVector.point);
console.log('dis', dis);
// make a clone with a dash array equal to path length
var clone = path.clone();
clone.dashArray = [clone.length, clone.length];
// add offset so path is hidden
clone.dashOffset = clone.length;
clone.strokeColor = '#3DBBF7';
var animationStart = false;
var duration = 2000;
// on frame...
function onFrame() {
// ...if animation has started...
if (animationStart && clone.dashOffset) {
if (clone.dashOffset <= dis) {
return;
}
// ...calculate time between 0 and 1...
var t = Math.min((Date.now() - animationStart) / duration, 1);
// ...update offset to graudally show path
clone.dashOffset = clone.length * (1 - t);
}
}
paper.view.onFrame = onFrame;
// on mouse down...
function onMouseDown() {
// ...start animation
animationStart = Date.now();
clone.dashOffset = clone.length;
}
document.querySelector('#btn').addEventListener('click', function () {
onMouseDown();
})
// -------------- HTML --------------
var box = document.querySelector('.box');
var boxHeight = 40;
var boxWidth = 40;
box.style.left = middleVector.point.x - boxWidth / 2 + 'px';
box.style.top = middleVector.point.y - boxHeight / 2 + 'px';
</script>
<script id="jsbin-source-css" type="text/css">.box {
width: 40px;
height: 40px;
border: 1px solid red;
position: absolute;
top: 0;
background-color: red;
}
canvas {
background-color: transparent;
width: 100%;
height: 100%;
}
body {
height: 100%;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var Path = paper.Path;
var Segment = paper.Segment;
var Point = paper.Point;
var PointText = paper.PointText;
paper.install(window);
paper.setup(document.querySelector('canvas'));
paper.view.viewSize.width = window.innerWidth;
paper.view.viewSize.height = window.innerHeight;
var t = new paper.Tool();
// draw your path
var path = new Path({
strokeColor: '#1B5578',
strokeWidth: 4,
strokeCap: 'round'
});
path.add(new Point(138.5, 397.03));
path.add(new Segment(new Point(324.07, 310.75), new Point(8.09, 67.84), new Point(-22.91, -52.23)));
var middleVector = new Segment(new Point(106.78, 235.2), new Point(30.18, 66.69), new Point(-30.19, -66.7));
path.add(middleVector);
var lastVector = new Point(204.11, 120);
path.add(lastVector);
path.dashArray = [10, 10];
var dis = lastVector.getDistance(middleVector.point);
console.log('dis', dis);
// make a clone with a dash array equal to path length
var clone = path.clone();
clone.dashArray = [clone.length, clone.length];
// add offset so path is hidden
clone.dashOffset = clone.length;
clone.strokeColor = '#3DBBF7';
var animationStart = false;
var duration = 2000;
// on frame...
function onFrame() {
// ...if animation has started...
if (animationStart && clone.dashOffset) {
if (clone.dashOffset <= dis) {
return;
}
// ...calculate time between 0 and 1...
var t = Math.min((Date.now() - animationStart) / duration, 1);
// ...update offset to graudally show path
clone.dashOffset = clone.length * (1 - t);
}
}
paper.view.onFrame = onFrame;
// on mouse down...
function onMouseDown() {
// ...start animation
animationStart = Date.now();
clone.dashOffset = clone.length;
}
document.querySelector('#btn').addEventListener('click', function () {
onMouseDown();
})
// -------------- HTML --------------
var box = document.querySelector('.box');
var boxHeight = 40;
var boxWidth = 40;
box.style.left = middleVector.point.x - boxWidth / 2 + 'px';
box.style.top = middleVector.point.y - boxHeight / 2 + 'px';
</script></body>
</html>
Raw
jsbin.cumiwiv.css
.box {
width: 40px;
height: 40px;
border: 1px solid red;
position: absolute;
top: 0;
background-color: red;
}
canvas {
background-color: transparent;
width: 100%;
height: 100%;
}
body {
height: 100%;
}
Raw
jsbin.cumiwiv.js
var Path = paper.Path;
var Segment = paper.Segment;
var Point = paper.Point;
var PointText = paper.PointText;
paper.install(window);
paper.setup(document.querySelector('canvas'));
paper.view.viewSize.width = window.innerWidth;
paper.view.viewSize.height = window.innerHeight;
var t = new paper.Tool();
// draw your path
var path = new Path({
strokeColor: '#1B5578',
strokeWidth: 4,
strokeCap: 'round'
});
path.add(new Point(138.5, 397.03));
path.add(new Segment(new Point(324.07, 310.75), new Point(8.09, 67.84), new Point(-22.91, -52.23)));
var middleVector = new Segment(new Point(106.78, 235.2), new Point(30.18, 66.69), new Point(-30.19, -66.7));
path.add(middleVector);
var lastVector = new Point(204.11, 120);
path.add(lastVector);
path.dashArray = [10, 10];
var dis = lastVector.getDistance(middleVector.point);
console.log('dis', dis);
// make a clone with a dash array equal to path length
var clone = path.clone();
clone.dashArray = [clone.length, clone.length];
// add offset so path is hidden
clone.dashOffset = clone.length;
clone.strokeColor = '#3DBBF7';
var animationStart = false;
var duration = 2000;
// on frame...
function onFrame() {
// ...if animation has started...
if (animationStart && clone.dashOffset) {
if (clone.dashOffset <= dis) {
return;
}
// ...calculate time between 0 and 1...
var t = Math.min((Date.now() - animationStart) / duration, 1);
// ...update offset to graudally show path
clone.dashOffset = clone.length * (1 - t);
}
}
paper.view.onFrame = onFrame;
// on mouse down...
function onMouseDown() {
// ...start animation
animationStart = Date.now();
clone.dashOffset = clone.length;
}
document.querySelector('#btn').addEventListener('click', function () {
onMouseDown();
})
// -------------- HTML --------------
var box = document.querySelector('.box');
var boxHeight = 40;
var boxWidth = 40;
box.style.left = middleVector.point.x - boxWidth / 2 + 'px';
box.style.top = middleVector.point.y - boxHeight / 2 + 'px';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment