156 lines
6.6 KiB
JavaScript
156 lines
6.6 KiB
JavaScript
// invalidate for unsupported browsers
|
|
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
|
|
if (isIE&&isIE<9) { (function(){return; }()) } // return if SVG API is not supported
|
|
|
|
|
|
// svgTransform examples
|
|
|
|
// rotation around shape center point
|
|
var svgRotate = document.getElementById('svgRotate');
|
|
var rotateBtn = document.getElementById('rotateBtn');
|
|
var svgr1 = svgRotate.getElementsByTagName('path')[0];
|
|
var svgr2 = svgRotate.getElementsByTagName('path')[1];
|
|
|
|
var svgTween11 = KUTE.to(svgr1, { transform: {rotateZ: 360} }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
// var svgTween11 = KUTE.to(svgr1, { rotateZ: 360}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
rotateBtn.addEventListener('click', function(){
|
|
!svgTween11.playing && svgTween11.start();
|
|
!svgTween12.playing && svgTween12.start();
|
|
}, false);
|
|
|
|
// rotation around shape's parent center point
|
|
var svgRotate1 = document.getElementById('svgRotate1');
|
|
var rotateBtn1 = document.getElementById('rotateBtn1');
|
|
var svgr11 = svgRotate1.getElementsByTagName('path')[0];
|
|
var svgr21 = svgRotate1.getElementsByTagName('path')[1];
|
|
var bb = svgr21.getBBox();
|
|
var translation = [580, 0];
|
|
var svgBB = svgr21.ownerSVGElement.getBBox();
|
|
var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
|
|
var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
|
|
|
|
var svgTween111 = KUTE.to(svgr11, { transform: {rotateZ: 360} }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
rotateBtn1.addEventListener('click', function(){
|
|
!svgTween111.playing && svgTween111.start();
|
|
!svgTween121.playing && svgTween121.start();
|
|
}, false);
|
|
|
|
// translate
|
|
var svgTranslate = document.getElementById('svgTranslate');
|
|
var translateBtn = document.getElementById('translateBtn');
|
|
var svgt1 = svgTranslate.getElementsByTagName('path')[0];
|
|
var svgt2 = svgTranslate.getElementsByTagName('path')[1];
|
|
var svgTween21 = KUTE.to(svgt1, { transform: {translateX: 580} }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
var svgTween22 = KUTE.to(svgt2, { svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
translateBtn.addEventListener('click', function(){
|
|
!svgTween21.playing && svgTween21.start();
|
|
!svgTween22.playing && svgTween22.start();
|
|
}, false);
|
|
|
|
// skews in chain
|
|
var svgSkew = document.getElementById('svgSkew');
|
|
var skewBtn = document.getElementById('skewBtn');
|
|
var svgsk1 = svgSkew.getElementsByTagName('path')[0];
|
|
var svgsk2 = svgSkew.getElementsByTagName('path')[1];
|
|
var svgTween31 = KUTE.to(svgsk1, { transform: {skew: [-15,0]} }, { duration: 1500, easing: "easingCubicInOut"});
|
|
var svgTween311 = KUTE.to(svgsk1, { transform: {skew: [-15,15]} }, { duration: 2500, easing: "easingCubicInOut"});
|
|
var svgTween313 = KUTE.to(svgsk1, { transform: {skew: [0, 0]} }, { duration: 1500, easing: "easingCubicInOut"});
|
|
|
|
var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
|
var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
|
|
var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
|
|
|
|
try{
|
|
svgTween31.chain(svgTween311);
|
|
svgTween311.chain(svgTween313);
|
|
|
|
svgTween32.chain(svgTween322);
|
|
svgTween322.chain(svgTween323);
|
|
}catch(e){
|
|
console.error(e+"TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
|
|
skewBtn.addEventListener('click', function(){
|
|
!svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
|
|
!svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
|
|
}, false);
|
|
|
|
// scale
|
|
var svgScale = document.getElementById('svgScale');
|
|
var scaleBtn = document.getElementById('scaleBtn');
|
|
var svgs1 = svgScale.getElementsByTagName('path')[0];
|
|
var svgs2 = svgScale.getElementsByTagName('path')[1];
|
|
var svgTween41 = KUTE.to(svgs1, { transform: {scale3d: [1.5,1.5,1] } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
var svgTween42 = KUTE.to(svgs2, { svgTransform: { translate: 580, scale: 0.5,} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
scaleBtn.addEventListener('click', function(){
|
|
!svgTween41.playing && svgTween41.start();
|
|
!svgTween42.playing && svgTween42.start();
|
|
}, false);
|
|
|
|
// mixed transforms
|
|
var svgMixed = document.getElementById('svgMixed');
|
|
var mixedBtn = document.getElementById('mixedBtn');
|
|
var svgm1 = svgMixed.getElementsByTagName('path')[0];
|
|
var svgm2 = svgMixed.getElementsByTagName('path')[1];
|
|
var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
|
|
transform: {
|
|
translateX: 250,
|
|
scale3d: [1.5,1.5,1],
|
|
rotateZ: 320,
|
|
skewX: -15
|
|
}
|
|
}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
var svgTween52 = KUTE.to(svgm2, {
|
|
svgTransform: {
|
|
translate: 830,
|
|
scale: 1.5,
|
|
rotate: 320,
|
|
skewX: -15
|
|
}
|
|
}, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
mixedBtn.addEventListener('click', function(){
|
|
!svgTween51.playing && svgTween51.start();
|
|
!svgTween52.playing && svgTween52.start();
|
|
}, false);
|
|
|
|
// chained transforms
|
|
var svgChained = document.getElementById('svgChained');
|
|
var chainedBtn = document.getElementById('chainedBtn');
|
|
var svgc = svgChained.getElementsByTagName('path')[0];
|
|
var svgcTransform = svgc.getAttribute('transform');
|
|
var resetSVGTransform = function(){
|
|
svgc.setAttribute('transform',svgcTransform);
|
|
};
|
|
|
|
var svgTween6 = KUTE.fromTo(svgc,
|
|
{ // from
|
|
svgTransform: {
|
|
translate: 0,
|
|
scale: 0.5,
|
|
rotate: 45,
|
|
// skewX: 0
|
|
},
|
|
},
|
|
{ // to
|
|
svgTransform: {
|
|
translate: 450,
|
|
scale: 1.5,
|
|
rotate: 360,
|
|
// skewX: -45
|
|
}
|
|
},
|
|
{transformOrigin: [256,256], complete: resetSVGTransform, yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
|
|
|
|
chainedBtn.addEventListener('click', function(){
|
|
!svgTween6.playing && svgTween6.start();
|
|
}, false);
|