散射动画

sass来做keyframe和循环

by weiming le

HTML

<ul>
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>
<button id="start">start</button>

SCSS

@mixin biubiu($startX, $startY, $endX, $endY, $keyName) {
  $itemX: ($startX - $endX)/10;
  $itemY: ($startY - $endY)/10;
  @keyframes biubiu_#{$keyName} {
    from {
      left: $startX;
      top: $startY;
      opacity: 0;
    }
    @for $i from 1 through 9 {
      $percent: 0%+$i*10;
      #{$percent} {
        left: $startX - $itemX*$i;
        top: $startY - $itemY*$i;
        opacity: 0.1*$i;
      }
    }
    to {
      left: $endX;
      top: $endY;
      opacity: 1;
    }
  }
}

$listLen: 5;

/* @include biubiu(100px, 100px, 150px, 186px, '1');
@include biubiu(100px, 100px, 186px, 150px, '2');
@include biubiu(100px, 100px, 200px, 100px, '3');
@include biubiu(100px, 100px, 186px, 50px, '4');
@include biubiu(100px, 100px, 150px, 13px, '5'); */

@include biubiu(100px, 100px, 186px, 49px, '1');
@include biubiu(100px, 100px, 150px, 13px, '2');
@include biubiu(100px, 100px, 99px, 0px, '3');
@include biubiu(100px, 100px, 49px, 13px, '4');
@include biubiu(100px, 100px, 13px, 49px, '5');
ul,
li {
  list-style: none;
}

.circle {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: orange;
  opacity: 0;
  @for $i from 1 through $listLen {
    &.animate:nth-child(#{$i}) {
      animation: biubiu_#{$i} 1s 10 ease-in-out;
    }
  }
}

JavaScript

var btn = document.querySelector('#start');
var circle = document.querySelectorAll('.circle');
var animate = function() {
  var circleList = [].slice.call(circle);
  circleList.forEach(function(v, i) {
    console.log(i, v);
    v.setAttribute('class', 'circle animate');
  });
};
//origin坐标，reg角度，n为份数，r为直径
var rec = function(origin, reg, n, r) {
  var restReg = (180 - reg) / 2;
  var eachReg = reg / (n - 1);
  var totalReg = 0;
  var result = [];
  for (var i = 0; i < n; i++) {
    totalReg = (restReg - 360) + i * eachReg;
    console.log(totalReg, i);
    var x = origin.x + Math.cos(Math.PI * totalReg / 180) * r;
    var y = origin.y - Math.sin(Math.PI * totalReg / 180) * r;
    result.push({
      x: Math.floor(x),
      y: Math.floor(y)
    });
  }
  return result;
};
var result = rec({
  x: 100,
  y: 100
}, 120, 5, 100);
console.log(result);
btn.addEventListener('click', function() {
  //alert('you click me');
  animate();
}, false);