javascript 从左下到右上绘制一个复选标记 CSS 动画

Draw a check mark CSS animation from left down to right up

提问by wordSmith

I'm trying to draw a check mark from the left going down to the right going up with CSS animations. I got the left going down part, but going back up doesn't seem to working. It goes from right to down. Does anyone know how I can make this smoother and actually look like a check being drawn?

我正在尝试使用 CSS 动画从左侧向下到右侧绘制一个复选标记。我得到了左边的下降部分，但返回似乎不起作用。它从右到下。有谁知道我怎样才能使它更顺畅，实际上看起来像一张支票？

setTimeout(function() {
  $('#kick').addClass('draw2');
}, 500);

#kick {
  height: 150px;
  width: 20px;
  background: green;
  -webkit-transform: rotate(45deg);
  position: relative;
  top: -24px;
  left: 273px;
}
#stem {
  height: 60px;
  width: 20px;
  background: green;
  -webkit-transform: rotate(-45deg);
  position: relative;
  top: 100px;
  left: 200px;
}
@-webkit-keyframes draw1 {
  from {
    height: 0;
  }
  to {
    height: 60px
  }
}
@-webkit-keyframes draw2 {
  from {
    height: 0;
  }
  to {
    height: 150px;
  }
}
.draw1 {
  -webkit-animation-name: draw1;
  -webkit-animation-duration: 0.5s;
}
.draw2 {
  -webkit-animation-name: draw2;
  -webkit-animation-duration: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="checkmark">
    <div class="draw1" id="stem"></div>
    <div id="kick"></div>
</span>

I'd greatly appreciate any help in getting this animation right! Also, since I'm using jQuery anyway, if this can be done more efficiently in jQuery/JavaScript, that's fine too.

我将不胜感激任何帮助使这个动画正确！此外，由于我无论如何都在使用 jQuery，如果这可以在 jQuery/JavaScript 中更有效地完成，那也很好。

回答by Weafs.py

Well, this is my approach using <canvas>and JavaScript.

嗯，这是我使用<canvas>JavaScript 的方法。

Demo on Fiddle -----> Square Corners| Round Corners

小提琴演示 ----->方角| 圆角

(Note:To change the animation speed increment or decrement the variable animationSpeed. Lower number yeilds Higher speed)

（注意：要更改动画速度，请增加或减少变量animationSpeed。数字越小，速度越快）

var start = 100;
var mid = 145;
var end = 250;
var width = 20;
var leftX = start;
var leftY = start;
var rightX = mid - (width / 2.7);
var rightY = mid + (width / 2.7);
var animationSpeed = 20;

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

for (i = start; i < mid; i++) {
  var drawLeft = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(start, start);
    ctx.lineTo(leftX, leftY);
    ctx.stroke();
    leftX++;
    leftY++;
  }, 1 + (i * animationSpeed) / 3);
}

for (i = mid; i < end; i++) {
  var drawRight = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(leftX, leftY);
    ctx.lineTo(rightX, rightY);
    ctx.stroke();
    rightX++;
    rightY--;
  }, 1 + (i * animationSpeed) / 3);
}

<canvas height="160"></canvas>

---

---

You could also do this using svgand CSS animation.

你也可以使用svg和 CSS 来做到这一点animation。

1. Square Corners:

1. 方角：

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  -webkit-animation: draw 2s infinite ease;
  animation: draw 2s infinite ease;
}
-webkit-@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="150" height="150">
  <path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

---

---

2. Round Corners:

2. 圆角：

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: draw 2s infinite ease;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="150" height="150">
  <path id="check" d="M10,50 l25,40 l95,-70" />
</svg>