hexo-butterfly-swiper-anzhiyu
Version:
A Slideshow plugin for theme-butterfly based on swiper
188 lines (172 loc) • 6.39 kB
JavaScript
;
function _toConsumableArray(e) {
return _arrayWithoutHoles(e) || _iterableToArray(e) || _unsupportedIterableToArray(e) || _nonIterableSpread()
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
}
function _unsupportedIterableToArray(e, r) {
if (e) {
if ("string" == typeof e) return _arrayLikeToArray(e, r);
var t = Object.prototype.toString.call(e).slice(8, -1);
return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(e, r) : void 0
}
}
function _iterableToArray(e) {
if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e)
}
function _arrayWithoutHoles(e) {
if (Array.isArray(e)) return _arrayLikeToArray(e)
}
function _arrayLikeToArray(e, r) {
(null == r || r > e.length) && (r = e.length);
for (var t = 0, a = new Array(r); t < r; t++) a[t] = e[t];
return a
}
function _classCallCheck(e, r) {
if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function")
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var a = r[t];
a.enumerable = a.enumerable || !1, a.configurable = !0, "value" in a && (a.writable = !0), Object.defineProperty(e, a.key, a)
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), e
}
var config = {
src: "https://f.zhheo.com/Guli/others/open-peeps-sheet.png",
rows: 15,
cols: 7
},
randomRange = function (e, r) {
return e + Math.random() * (r - e)
},
randomIndex = function (e) {
return 0 | randomRange(0, e.length)
},
removeFromArray = function (e, r) {
return e.splice(r, 1)[0]
},
removeItemFromArray = function (e, r) {
return removeFromArray(e, e.indexOf(r))
},
removeRandomFromArray = function (e) {
return removeFromArray(e, randomIndex(e))
},
getRandomFromArray = function (e) {
return e[0 | randomIndex(e)]
},
resetPeep = function (e) {
var r, t, a = e.stage,
n = e.peep,
o = .5 < Math.random() ? 1 : -1,
i = 100 - 250 * gsap.parseEase("power2.in")(Math.random()),
s = a.height - n.height + i;
return 1 == o ? (r = -n.width, t = a.width, n.scaleX = 1) : (r = a.width + n.width, t = 0, n.scaleX = -1), n.x = r, n.y = s, {
startX: r,
startY: n.anchorY = s,
endX: t
}
},
normalWalk = function (e) {
var r = e.peep,
t = e.props,
a = (t.startX, t.startY),
n = t.endX,
o = gsap.timeline();
return o.timeScale(randomRange(.5, 1.5)), o.to(r, {
duration: 10,
x: n,
ease: "none"
}, 0), o.to(r, {
duration: .25,
repeat: 40,
yoyo: !0,
y: a - 10
}, 0), o
},
walks = [normalWalk],
Peep = function () {
function a(e) {
var r = e.image,
t = e.rect;
_classCallCheck(this, a), this.image = r, this.setRect(t), this.x = 0, this.y = 0, this.anchorY = 0, this.scaleX = 1, this.walk = null
}
return _createClass(a, [{
key: "setRect",
value: function (e) {
this.rect = e, this.width = e[2], this.height = e[3], this.drawArgs = [this.image].concat(_toConsumableArray(e), [0, 0, this.width, this.height])
}
}, {
key: "render",
value: function (e) {
e.save(), e.translate(this.x, this.y), e.scale(this.scaleX, 1), e.drawImage.apply(e, _toConsumableArray(this.drawArgs)), e.restore()
}
}]), a
}(),
img = document.createElement("img");
img.onload = init, img.src = config.src;
let canvas = document.querySelector("#peoplecanvas")
let ctx = canvas ? canvas.getContext("2d") : undefined,
stage = {
width: 0,
height: 0
},
allPeeps = [],
availablePeeps = [],
crowd = [];
function init() {
if (!canvas) return
createPeeps(), resize(), gsap.ticker.add(render), window.addEventListener("resize", resize)
}
document.addEventListener('pjax:success', (e) => {
canvas = document.querySelector('#peoplecanvas')
ctx = canvas ? canvas.getContext("2d") : undefined,
window.removeEventListener("resize", resize)
gsap.ticker.remove(render)
setTimeout(()=>{
init()
},300)
})
function createPeeps() {
for (var e = config.rows, r = config.cols, t = e * r, a = img.naturalWidth / e, n = img.naturalHeight / r, o = 0; o < t; o++) allPeeps.push(new Peep({
image: img,
rect: [o % e * a, (o / e | 0) * n, a, n]
}))
}
function resize() {
if (canvas && canvas.clientWidth != 0) {
stage.width = canvas.clientWidth, stage.height = canvas.clientHeight, canvas.width = stage.width * devicePixelRatio, canvas.height = stage.height * devicePixelRatio, crowd.forEach(function (e) {
e.walk.kill()
}), crowd.length = 0, availablePeeps.length = 0, availablePeeps.push.apply(availablePeeps, allPeeps), initCrowd()
}
}
function initCrowd() {
for (; availablePeeps.length;) addPeepToCrowd().walk.progress(Math.random())
}
function addPeepToCrowd() {
var e = removeRandomFromArray(availablePeeps),
r = getRandomFromArray(walks)({
peep: e,
props: resetPeep({
peep: e,
stage: stage
})
}).eventCallback("onComplete", function () {
removePeepFromCrowd(e), addPeepToCrowd()
});
return e.walk = r, crowd.push(e), crowd.sort(function (e, r) {
return e.anchorY - r.anchorY
}), e
}
function removePeepFromCrowd(e) {
removeItemFromArray(crowd, e), availablePeeps.push(e)
}
function render() {
if (!canvas) return
canvas.width = canvas.width, ctx.save(), ctx.scale(devicePixelRatio, devicePixelRatio), crowd.forEach(function (e) {
e.render(ctx)
}), ctx.restore()
}