利用HTML5實現Canvas加載動畫特效



11 42 15



特效描述:利用HTML5實現 Canvas 加載動畫特效,利用HTML5實現Canvas加載動畫特效

代碼結構

1. HTML代碼

<div class="flex-wrap">
  <div class="flex-wrap__in">
    <h1 class="pen-title">Rotating Circles</h1>
    <p class="pen-excerpt">with Canvas2D</p>
    <canvas class="js-rotate-01" width="100" height="100"></canvas>
    <canvas class="js-rotate-02" width="100" height="100"></canvas>
    <canvas class="js-rotate-03" width="100" height="100"></canvas>
    <canvas class="js-rotate-04" width="100" height="100"></canvas>
    <canvas class="js-rotate-05" width="100" height="100"></canvas>
    <canvas class="js-rotate-06" width="100" height="100"></canvas>
  </div>
</div>
<script>
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var RotatingCircle = function () {
  function RotatingCircle(canvas, opts) {
    _classCallCheck(this, RotatingCircle);
    this.ctx = canvas.getContext('2d');
    this.size = Math.min(canvas.clientWidth, canvas.clientHeight);
    this.radius = opts.radius;
    this.lineWidth = opts.lineWidth;
    this.strokeStyle = opts.strokeStyle;
    this.degreeStart = opts.degreeStart;
    this.degreeEnd = opts.degreeEnd;
    this.stepStart = opts.stepStart;
    this.stepEnd = opts.stepEnd;
  }
  _createClass(RotatingCircle, [{
    key: 'render',
    value: function render() {
      this.degreeStart = this.degreeStart + this.stepStart;
      this.degreeEnd = this.degreeEnd + this.stepEnd;
      if (this.degreeStart - 360 > this.degreeEnd) {
        this.degreeStart -= 720;
      }
      this.ctx.clearRect(0, 0, this.size, this.size);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.beginPath();
      this.ctx.strokeStyle = this.strokeStyle;
      this.ctx.arc(this.size / 2, this.size / 2, this.radius - this.lineWidth / 2, (this.degreeStart < this.degreeEnd ? this.degreeStart : this.degreeEnd) * Math.PI / 180, (this.degreeStart < this.degreeEnd ? this.degreeEnd : this.degreeStart) * Math.PI / 180, false);
      this.ctx.stroke();
    }
  }]);
  return RotatingCircle;
}();
var circles = [new RotatingCircle(document.querySelector('.js-rotate-01'), {
  radius: 24,
  lineWidth: 12,
  strokeStyle: '#587fa5',
  degreeStart: -90,
  degreeEnd: 270,
  stepStart: 4,
  stepEnd: 3
}), new RotatingCircle(document.querySelector('.js-rotate-02'), {
  radius: 40,
  lineWidth: 8,
  strokeStyle: '#7fa4d3',
  degreeStart: -90,
  degreeEnd: 270,
  stepStart: 6,
  stepEnd: 3
}), new RotatingCircle(document.querySelector('.js-rotate-03'), {
  radius: 50,
  lineWidth: 3,
  strokeStyle: '#aacaf1',
  degreeStart: -90,
  degreeEnd: 270,
  stepStart: 12,
  stepEnd: 9
}), new RotatingCircle(document.querySelector('.js-rotate-04'), {
  radius: 28,
  lineWidth: 18,
  strokeStyle: '#a5586c',
  degreeStart: -90,
  degreeEnd: 270,
  stepStart: 2,
  stepEnd: 1
}), new RotatingCircle(document.querySelector('.js-rotate-05'), {
  radius: 40,
  lineWidth: 8,
  strokeStyle: '#d37f87',
  degreeStart: -90,
  degreeEnd: 180,
  stepStart: 8,
  stepEnd: 2
}), new RotatingCircle(document.querySelector('.js-rotate-06'), {
  radius: 50,
  lineWidth: 3,
  strokeStyle: '#f1aab1',
  degreeStart: -90,
  degreeEnd: 270,
  stepStart: 14,
  stepEnd: 2
})];
var renderLoop = function renderLoop() {
  circles.map(function (circle) {
    circle.render();
  });
  requestAnimationFrame(function () {
    renderLoop();
  });
};
renderLoop();
</script>
<div style="text-align:center;margin:-150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 延遲加載 無限加載 延遲 加載 加載動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 篮彩 中国股票指数计算方法 胜分差 股票涨跌幅度百分比如何计算 一万元怎么理财好 股票涨跌有哪些规律 原版澳门足球指数 江西快三 股权基金配资 股票推荐·天牛宝专业 山东群英会 重庆时时彩 日本棒球比分直播即时比分 新快3 让分胜负 金牛通配资