var Timing = {
easeIn: function easeIn(pos) {
return Math.pow(pos, 3);
},
easeOut: function easeOut(pos) {
return Math.pow(pos - 1, 3) + 1;
},
easeInOut: function easeInOut(pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 3);
} else {
return 0.5 * (Math.pow(pos - 2, 3) + 2);
}
},
linear: function linear(pos) {
return pos;
}
};
function setTimeout(t, cb, d) {
if (d > 0) {
var s = getDate().getTime();
var fn = function() {
if (getDate().getTime() - s > d) {
cb && cb();
} else
t.requestAnimationFrame(fn);
}
fn();
} else
cb && cb();
}
function Animation(opts) {
opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
opts.timing = opts.timing || 'linear';
var delay = 17;
function createAnimationFrame() {
if (typeof setTimeout !== 'undefined') {
return function(step, delay) {
setTimeout(opts.instance, function() {
var timeStamp = getDate()
step(timeStamp);
}, delay)
};
} else if (typeof requestAnimationFrame !== 'undefined') {
return requestAnimationFrame;
} else {
return function(step) {
step(null);
};
}
};
var animationFrame = createAnimationFrame();
var startTimeStamp = null;
var _step = function step(timestamp) {
if (timestamp === null) {
opts.onProcess && opts.onProcess(1);
opts.onAnimationFinish && opts.onAnimationFinish();
return;
}
if (startTimeStamp === null) {
startTimeStamp = timestamp;
}
if (timestamp - startTimeStamp < opts.duration) {
var process = (timestamp - startTimeStamp) / opts.duration;
var timingFunction = Timing[opts.timing];
process = timingFunction(process);
opts.onProcess && opts.onProcess(process);
animationFrame(_step, delay);
} else {
opts.onProcess && opts.onProcess(1);
opts.onAnimationFinish && opts.onAnimationFinish();
}
};
animationFrame(_step, delay);
}
function getPath(deg) {
var path = '50% 50%'
//各个锚点
var ps = ['0% 0%', '100% 0%', '100% 100%', '0% 100%']
var ps1 = path + ',' + ps[0]
var ps2 = ps1 + ',' + ps[1]
var ps3 = ps2 + ',' + ps[2]
var ps4 = ps3 + ',' + ps[3]
var ops = [
function(per) {
return ps1 + ',' + (per + '% 0%')
},
function(per) {
return ps2 + ',' + ('100% ' + per + '%')
},
function(per) {
return ps3 + ',' + (100 - per) + '% 100%'
},
function(per) {
return ps4 + ',' + '0% ' + (100 - per) + '%'
},
]
if (deg == 0) {
return 'polygon(50% 50%, 50% 0%)'
} else if (deg % 360 == 0) {
return ''
}
var idx = parseInt(deg / 90) % 4
var pdeg = deg % 90
var per = pdeg / 90 * 100
if (ops[idx]) {
return 'polygon(' + ops[idx](per) + ')'
} else {
return ''
}
}
function setDeg(newValue, oldValue, ownerInstance, instance) {
var odeg = oldValue * 360
var deg = newValue * 360
var offset = deg - odeg
var ds = instance.getDataset()
if (!ds.animate) {
var path = getPath(deg)
instance.setStyle({
'clip-path': path,
})
return
}
Animation({
instance: ownerInstance,
timing: 'easeInOut',
duration: 300,
onProcess: function onProcess(process) {
var pdeg = odeg + process * offset
var path = getPath(pdeg)
var com = ownerInstance.selectComponent('.circle');
com.setStyle({
'clip-path': path,
})
},
onAnimationFinish: function onAnimationFinish() {}
});
}
module.exports = {
pro: setDeg,
}
{{i}}