Skip to content

Commit

Permalink
v.1.1.1 contd
Browse files Browse the repository at this point in the history 
* remove pixelate transition awful implementation
* pan-diagonal transition
* pan-left-right,pan-up-down,pan-diagonal with better easing
* rhomboidal/diagonal tiles almost complete support, fade-diagonal demo transition in progress
  • Loading branch information
@foo123
foo123 committed Mar 31, 2020
1 parent 88d8730 commit ace8cf5
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 67 deletions.
136 changes: 103 additions & 33 deletions src/Imagik.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ else root.Imagik = factory();
}('undefined' !== typeof self ? self : this, function Imagik__Factory( ){
"use strict";

var stdMath = Math, toRad = stdMath.PI/180,
prop_re = /(?:X\()(\w+)(?:\))/g, expr_re = /(?:\$\()([^\(\)]+)(?:\))/g,
var stdMath = Math, toRad = stdMath.PI/180, sqrt2 = stdMath.sqrt(2),
prop_re = /(?:X\()(\w+)(?:\))/g,
toString = Object.prototype.toString,
HAS = Object.prototype.hasOwnProperty,
slice = Array.prototype.slice;
Expand Down Expand Up @@ -483,9 +483,9 @@ function checkerBoard( pieces, rows, columns )
}
return {pieces:pieces, delays:delays, groups:2};
}
function tiles( img, rows, columns, W, H, angle, asImg )
function tiles( img, rows, columns, W, H, angle, diagonal, asImg )
{
var i, j, x, y, bx, by, w, h, pieces, tile, ww, s, m1, m2, imax, clipPath;
var i, j, x, y, bx, by, w, h, pieces, tile, ww, s, m1, m2, imax, clipPath, side, margin, margin2, offset;
if ( null != angle )
{
angle = angle || 0;
Expand Down Expand Up @@ -548,6 +548,26 @@ function tiles( img, rows, columns, W, H, angle, asImg )
}
}
}
else if ( diagonal )
{
side = stdMath.min(W, H)/stdMath.max(rows, columns); w = stdMath.round(side*sqrt2);
columns = 2*stdMath.ceil(W/w)+2; rows = 2*stdMath.ceil(H/w)+2;
margin = w/2; margin2 = margin/2; offset = 0;
pieces = new Array(rows*columns);
for(i=0;i<columns; i++)
{
for(j=0; j<rows; j++)
{
x = margin*i-margin; y = w*j-margin+offset;
bx = -x+margin2; by = -y+margin2;
pieces[i*rows+j] = {piece:tile=$el('<div class="imagik-tile imagik-diagonal"><div class="imagik-tile-inside" style="width:'+(side+margin)+'px;height:'+(side+margin)+'px;left:'+(-margin2)+'px;top:'+(-margin2)+'px;"></div></div>'), r:rows, c:columns, i:i, j:j, x:x, y:y, bx:bx, by:by, w:side, h:side, u:'px', W:W, H:H, img:img};
tile.firstChild.style.backgroundImage = 'url("'+String(img)+'")';
tile.firstChild.style.backgroundPosition = String(bx)+'px '+String(by)+'px';
tile.firstChild.style.backgroundSize = String(W)+'px auto';
}
offset = 0===offset ? -margin : 0;
}
}
else
{
w = 1===columns ? 100 : (W/columns*101/W);
Expand Down Expand Up @@ -596,21 +616,49 @@ function destroy( pieces )
}
function translate( where, what )
{
var i, j, k, p, c, e, evaluator, r, done;
if ( is_string(where) )
{
where = where.replace(prop_re, function(m0, m1){
return HAS.call(what, m1) ? String(what[m1]) : m0;
});
where = where.replace(expr_re, function(m0, m1){
var evaluator;
try {
evaluator = new Function('', 'return String('+m1+');');
} catch(err) {
console.warn('Imagik: Error in expression "'+m0+'", '+err.toString());
evaluator = function(){return '0';};
j = 0;
while( -1!==(i=where.indexOf('$(', j)) )
{
p = 1; k = 2; e = ''; done = false;
while( i+k<where.length )
{
c = where.charAt(i+k);
if ( ')' === c )
{
p--;
if ( 0===p )
{
done = true;
break;
}
}
else if ( '(' === c )
{
p++;
}
e += c;
k++;
}
return evaluator();
});
if ( done )
{
try {
evaluator = new Function('', 'return String('+e+');');
} catch(err) {
console.warn('Imagik: Error in expression "$('+e+')", '+err.toString());
evaluator = function(){return '0';};
}
r = evaluator();
where = where.slice(0,i)+r+where.slice(i+k+1);
k = r.length
}
j = i+k+1;
}
}
else
{
Expand Down Expand Up @@ -916,7 +964,7 @@ function Imagik( el, options )
};

self.doTransition = function( dir ) {
var i, dd, fxi, transition, order, ease, r, c, ordobj, ngroups, d, sd, del, max, odd, animations = {}, str, selector, angle, img = false;
var i, dd, fxi, transition, order, ease, r, c, ordobj, ngroups, d, sd, del, max, odd, animations = {}, str, selector, angle, diagonal = false, img = false;

clearTimeout(timer);
clearPrev();
Expand Down Expand Up @@ -948,25 +996,26 @@ function Imagik( el, options )
r = null!=transition.rows ? transition.rows : fxi.rows;
c = null!=transition.columns ? transition.columns : fxi.columns;
angle = null!=transition.angle ? +transition.angle : null;
diagonal = !!transition.diagonal;
img = !!transition.img;
selector = is_string(transition.selector)&&transition.selector.length ? transition.selector : '';
lastfx = fxi;

if ( transition.reverse )
{
p = tiles((imgs[ind[prevcurrent]].currentSrc||imgs[ind[prevcurrent]].src), r, c, W, H, angle, img);
p = tiles((imgs[ind[prevcurrent]].currentSrc||imgs[ind[prevcurrent]].src), r, c, W, H, angle, diagonal, img);
imageLayer.style.backgroundImage = 'url("'+(imgs[ind[current]].currentSrc||imgs[ind[current]].src)+'")'; // enable responsive images (eg through srcset attr)
}
else
{
p = tiles((imgs[ind[current]].currentSrc||imgs[ind[current]].src), r, c, W, H, angle, img); // enable responsive images (eg through srcset attr)
p = tiles((imgs[ind[current]].currentSrc||imgs[ind[current]].src), r, c, W, H, angle, diagonal, img); // enable responsive images (eg through srcset attr)
}

numpiec = p.length;
if ( transition.current || transition.next )
{
imageLayer.style.backgroundImage = 'none';
p2 = tiles((imgs[ind[prevcurrent]].currentSrc||imgs[ind[prevcurrent]].src), r, c, W, H, angle, img);
p2 = tiles((imgs[ind[prevcurrent]].currentSrc||imgs[ind[prevcurrent]].src), r, c, W, H, angle, diagonal, img);
if ( is_obj(transition.current) && is_array(transition.current.animation) && 2<=transition.current.animation.length )
{
animations['animation-'+self.el.id+'-current'] = '@keyframes imagik-animation-'+self.el.id+'-current{'+transition.current.animation.map(function(step, n){
Expand Down Expand Up @@ -1888,13 +1937,6 @@ Imagik.Static = {
columns:1,
animation:"motion-blur"
}*/
,"pixelate":{
rows:1,
columns:1,
img:true,
current:{animation:"pixelate"},
next:{animation:"pixelate",reverse:true}
}
,"brightness":{
rows:1,
columns:1,
Expand All @@ -1910,6 +1952,10 @@ Imagik.Static = {
,"fade":{
animation:"fade"
}
,"fade-diagonal":{
diagonal:true,
animation:"fade"
}
,"fade-zoom":{
rows:1,
columns:1,
Expand Down Expand Up @@ -2191,6 +2237,28 @@ Imagik.Static = {
animation1:"pan-top",
animation2:"pan-bottom"
}
,"pan-diagonal":{
rows:1,
angle:30,
current:{transform:"translate3d(0,0,0)"},
next:{transform:"translate3d($(0===X(angle)?(X(i)%2?'-100%':'100%'):(X(i)%2?'-X(slope)px':'X(slope)px')),$(0===X(angle)?0:(X(i)%2?'-100%':'100%')),0)"},
animation1:[
{
transform:"translate3d(0,0,0)"
}
,{
transform:"translate3d($(0===X(angle)?'100%':'X(slope)px'),$(0===X(angle)?0:'100%'),0)"
}
]
,animation2:[
{
transform:"translate3d(0,0,0)"
}
,{
transform:"translate3d($(0===X(angle)?'-100%':'-X(slope)px'),$(0===X(angle)?0:'-100%'),0)"
}
]
}
}

,order: {
Expand Down Expand Up @@ -2293,7 +2361,6 @@ Imagik.Static = {
,{transition:"rotate-reverse",ease:"ease-out",duration:2,overlap:1,rows:6,columns:6,order:"columns-first"}
,{transition:"iris",ease:"ease-out",duration:2,rows:1,columns:1,order:"rows-first"}
,{transition:"iris-reverse",ease:"ease-out",duration:2,rows:1,columns:1,order:"rows-first"}
,{transition:"pixelate",ease:"linear",duration:2,rows:1,columns:1,order:"rows-first"}
,{transition:"tv",ease:"ease",duration:2,rows:1,columns:1,order:"rows-first"}
,{transition:"brightness",ease:"linear",duration:2,rows:1,columns:1,order:"rows-first"}
,{transition:"darkness",ease:"linear",duration:2,rows:1,columns:1,order:"rows-first"}
Expand Down Expand Up @@ -2357,14 +2424,17 @@ Imagik.Static = {
,{transition:"pan-right",ease:"ease-out-back",duration:2,overlap:0.9,rows:1,columns:1,order:"columns-first"}
,{transition:"pan-top",ease:"ease-out-back",duration:2,overlap:0.9,rows:1,columns:1,order:"columns-first"}
,{transition:"pan-bottom",ease:"ease-out-back",duration:2,overlap:0.9,rows:1,columns:1,order:"columns-first"}
,{transition:"pan-left-right",ease:"ease",duration:2,overlap:1,rows:2,columns:1,order:"rows-first"}
,{transition:"pan-left-right",ease:"ease",duration:2,overlap:1,rows:3,columns:1,order:"rows-first"}
,{transition:"pan-up-down",ease:"ease",duration:2,overlap:1,rows:1,columns:2,order:"columns-first"}
,{transition:"pan-up-down",ease:"ease",duration:2,overlap:1,rows:1,columns:3,order:"columns-first"}
,{transition:"blinds-horizontal",ease:"ease",duration:2,overlap:0.5,rows:5,columns:5,order:"checkerboard"}
,{transition:"blinds-horizontal",ease:"ease",duration:2,overlap:1,rows:1,columns:5,order:"random"}
,{transition:"blinds-vertical",ease:"ease",duration:2,overlap:0.5,rows:5,columns:5,order:"checkerboard"}
,{transition:"blinds-vertical",ease:"ease",duration:2,overlap:1,rows:5,columns:1,order:"random"}
,{transition:"pan-left-right",ease:"ease-out-quint",duration:2,overlap:1,rows:2,columns:1,order:"rows-first"}
,{transition:"pan-left-right",ease:"ease-out-quint",duration:2,overlap:1,rows:3,columns:1,order:"rows-first"}
,{transition:"pan-up-down",ease:"ease-out-quint",duration:2,overlap:1,rows:1,columns:2,order:"columns-first"}
,{transition:"pan-up-down",ease:"ease-out-quint",duration:2,overlap:1,rows:1,columns:3,order:"columns-first"}
,{transition:"pan-diagonal",ease:"ease-out-quint",duration:2,overlap:1,rows:1,columns:1,order:"columns-first"}
,{transition:"pan-diagonal",ease:"ease-out-quint",duration:2,overlap:1,rows:1,columns:2,order:"columns-first"}
,{transition:"pan-diagonal",ease:"ease-out-quint",duration:2,overlap:1,rows:1,columns:3,order:"columns-first"}
,{transition:"blinds-horizontal",ease:"ease-in-out-quint",duration:2,overlap:0.5,rows:5,columns:5,order:"checkerboard"}
,{transition:"blinds-horizontal",ease:"ease-in-out-quint",duration:2,overlap:1,rows:1,columns:5,order:"random"}
,{transition:"blinds-vertical",ease:"ease-in-out-quint",duration:2,overlap:0.5,rows:5,columns:5,order:"checkerboard"}
,{transition:"blinds-vertical",ease:"ease-in-out-quint",duration:2,overlap:1,rows:5,columns:1,order:"random"}
]

// utils
Expand Down
2 changes: 1 addition & 1 deletion src/Imagik.min.js
View file

Large diffs are not rendered by default.

43 changes: 10 additions & 33 deletions src/imagik.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,16 @@
background-position:0 0;
background-size:100% auto;
}
.imagik-tile.imagik-diagonal
{
transform-origin:center center;
transform:rotate(-45deg);
}
.imagik-tile.imagik-diagonal .imagik-tile-inside
{
transform-origin:center center;
transform:rotate(45deg);
}

/* fx */
.imagik-webkit .imagik-animation-layer.imagik-fx-flip-horizontal .imagik-tile,
Expand Down Expand Up @@ -414,25 +424,6 @@
{
transform-origin:center center;
}
.imagik-animation-layer.imagik-fx-pixelate .imagik-tile-current img,
.imagik-animation-layer.imagik-fx-pixelate .imagik-tile-next img
{
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pixelate' x='0' y='0'%3E%3CfeFlood x='4' y='4' height='2' width='2'/%3E%3CfeComposite width='10' height='10'/%3E%3CfeTile result='a'/%3E%3CfeComposite in='SourceGraphic' in2='a' operator='in'/%3E%3CfeMorphology operator='dilate' radius='5'/%3E%3C/filter%3E%3C/svg%3E#pixelate");
/*
<svg>
<filter id="pixelate" x="0" y="0">
<feFlood x="4" y="4" height="2" width="2"/>
<feComposite width="10" height="10"/>
<feTile result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in"/>
<feMorphology operator="dilate" radius="5"/>
</filter>
</svg>
*/
image-rendering:pixelated;
image-rendering:-moz-crisp-edges;
image-rendering:crisp-edges;
}
.imagik-animation-layer.imagik-fx-iris .imagik-tile-inside,
.imagik-animation-layer.imagik-fx-iris-reverse .imagik-tile-inside
{
Expand Down Expand Up @@ -552,20 +543,6 @@
transform:translate(-100%, 0) scale(1, 1);
}
}*/
@keyframes imagik-animation-pixelate {
0%{
transform:scale(1);
opacity:1;
}
50%{
transform:scale(10);
opacity:1;
}
100%{
transform:scale(10);
opacity:0;
}
}
@keyframes imagik-animation-fade {
from{
opacity: 0;
Expand Down

0 comments on commit ace8cf5

Please sign in to comment.