mirror of
https://github.com/RamonGebben/Cquence.git
synced 2026-03-10 08:51:22 +00:00
Initial commit
This commit is contained in:
Ramon Gebben
188
Cquence.js
Normal file
188
Cquence.js
Normal file
@@ -0,0 +1,188 @@
|
||||
|
||||
|
||||
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function( f ){ setTimeout( f, 1000/60 ); };
|
||||
var elem = function( id ){ return document.getElementById( id ); }
|
||||
|
||||
var style = function( e, k, v ){
|
||||
if( k === 'opacity' ){
|
||||
if( IE8 ){ // gemene browsers
|
||||
e.style[ "-ms-filter" ] = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + Math.floor( v * 100 ) + ")";
|
||||
e.style[ "filter" ] = "alpha(opacity=" + Math.floor( v * 100 ) + ")";// ;
|
||||
|
||||
} else { // lieve browsers
|
||||
e.style[k] = v;
|
||||
}
|
||||
} else {
|
||||
e.style[k] = v + "px";
|
||||
}
|
||||
}
|
||||
|
||||
var combine = function(){
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments
|
||||
var list = Array.prototype.slice.call( arguments, 0 );
|
||||
var d = 0;
|
||||
for( var i=0; i<list.length; i++ ){
|
||||
d = Math.max( list[i].d, d );
|
||||
}
|
||||
return {
|
||||
d: d,
|
||||
f: function( t ){
|
||||
for( var i=0; i<list.length; i++ ){
|
||||
var last = list[i];
|
||||
if( last.d > t ){
|
||||
last.f( t );
|
||||
} else {
|
||||
if( !last.done ){
|
||||
last.f( last.d );
|
||||
last.done = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var sequence = function(){
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments
|
||||
var timeline = Array.prototype.slice.call( arguments, 0 );
|
||||
var d = 0;
|
||||
for( var i=0; i<timeline.length; i++ ){
|
||||
d = d + timeline[i].d;
|
||||
}
|
||||
return {
|
||||
d: d,
|
||||
f: function( t ){
|
||||
|
||||
var last = null;
|
||||
var total = 0;
|
||||
|
||||
for( var i=0; i<timeline.length; i++ ){
|
||||
var last = timeline[i];
|
||||
if( total + last.d > t ){
|
||||
last.f( t - total );
|
||||
return;
|
||||
}
|
||||
if( !last.done ){
|
||||
last.f( last.d );
|
||||
last.done = true;
|
||||
}
|
||||
total = total + last.d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var animate = function( transform ){
|
||||
return function( id, dur, begin, fin ){
|
||||
return {
|
||||
d: dur,
|
||||
f: function( t ){
|
||||
var e = elem( id );
|
||||
for( var k in begin ){
|
||||
|
||||
var bv = begin[k]; // begin waarde
|
||||
var fv = fin[k]; // finish waarde
|
||||
var dx = fv - bv; // verschil (afstand)
|
||||
|
||||
// p is nu een waarde tussen de 0 en 1 .. en geeft aan hoe ver de animatie is
|
||||
var p = transform( Math.max( t/dur, 0 ) );
|
||||
|
||||
// nieuwe waarde is de factor maal de afstand
|
||||
var nv = bv + (p * dx);
|
||||
style( e, k, nv );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animation variants
|
||||
// http://upshots.org/actionscript/jsas-understanding-easing
|
||||
var linear = animate( function( p ){
|
||||
return p;
|
||||
});
|
||||
var easeIn = animate( function( p ){
|
||||
return Math.pow( p, 5 );
|
||||
});
|
||||
var easeOut = animate( function( p ){
|
||||
return 1 - Math.pow( 1 - p, 5 );
|
||||
});
|
||||
var sleep = function( d ){
|
||||
return { d: d, f: function(t){} }
|
||||
}
|
||||
|
||||
/* from: http://stackoverflow.com/questions/10964966/detect-ie-version-in-javascript */
|
||||
function getInternetExplorerVersion()
|
||||
// Returns the version of Internet Explorer or a -1
|
||||
// (indicating the use of another browser).
|
||||
{
|
||||
var rv = -1; // Return value assumes failure.
|
||||
if (navigator.appName == 'Microsoft Internet Explorer')
|
||||
{
|
||||
var ua = navigator.userAgent;
|
||||
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
|
||||
if (re.exec(ua) != null)
|
||||
rv = parseFloat( RegExp.$1 );
|
||||
}
|
||||
return rv;
|
||||
}
|
||||
|
||||
var IEVERSION = getInternetExplorerVersion();
|
||||
var IE8 = IEVERSION === 8;
|
||||
var IEWTF = IEVERSION < 8 && IEVERSION > -1;
|
||||
|
||||
var timeline = [];
|
||||
var start = (+new Date); // unix timestamp
|
||||
var second = 1000;
|
||||
var stop = 15 * second;
|
||||
var render = null;
|
||||
|
||||
// gets called recursive by request-animation-frame
|
||||
var renderloop = function(){
|
||||
|
||||
var now = (+new Date) - start; // relatieve tijd vanaf begin animatie
|
||||
if( now < stop ) raf( renderloop ); // recursion, baby
|
||||
|
||||
if( render ) render.f( now );
|
||||
|
||||
}
|
||||
/// Example usage
|
||||
// var render = combine(
|
||||
|
||||
// sequence(
|
||||
// sleep( 100 ),
|
||||
// linear('frame3', 10000, { left: -900 }, {left: 300 })
|
||||
// ),
|
||||
// sequence(
|
||||
// easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
|
||||
// easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
// easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
// combine(
|
||||
// easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
|
||||
// ),
|
||||
// sleep(1000),
|
||||
// easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
|
||||
// easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 40}),
|
||||
// sleep(1500),
|
||||
// sequence(
|
||||
// combine(
|
||||
// easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
|
||||
// easeOut('frame9', 2000, { opacity: 1, left: 40 }, { opacity: 0, left: 360})
|
||||
// ),
|
||||
// easeIn('frame2', 1000, { opacity: 0 }, { opacity: 1 }),
|
||||
// easeOut('frame10', 1000, { bottom: -260 }, { bottom: -210 })
|
||||
// )
|
||||
|
||||
// ),
|
||||
// sequence(
|
||||
|
||||
// )
|
||||
|
||||
// );
|
||||
|
||||
// // launch the animation
|
||||
// renderloop();
|
||||
|
||||
133
README.md
Normal file
133
README.md
Normal file
@@ -0,0 +1,133 @@
|
||||
|
||||
|
||||
# Cquence.js
|
||||
|
||||
Cquence is a very small Javascript animator librarie developed to for banners and advertisement.
|
||||
|
||||
## Basic usage
|
||||
|
||||
```javascript
|
||||
var render = null; // Define the render object so that the renderloop knows what to render.
|
||||
|
||||
render = combine() // Combine fires the sequences in its body the same time
|
||||
|
||||
render = sequence() // Define the animations in order to create a timeline
|
||||
|
||||
sequence(
|
||||
easIn( :id, :time, { :from }, { :to })
|
||||
easOut( :id, :time, { :from }, { :to })
|
||||
sleep( :time ) // Wait utill time is passed
|
||||
)
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Full example
|
||||
|
||||
```javascript
|
||||
|
||||
var render = combine(
|
||||
|
||||
sequence(
|
||||
sleep( 100 ),
|
||||
linear('frame3', 10000, { left: -900 }, {left: 300 })
|
||||
),
|
||||
sequence(
|
||||
easeOut('frame1', 2000, { left: -1000 }, { left: 120 }),
|
||||
easeIn('frame6', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
easeIn('frame7', 1000, { opacity: 0 }, { opacity: 1}),
|
||||
combine(
|
||||
easeIn('frame6', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
easeIn('frame7', 1500, { opacity: 1 }, { opacity: 0}),
|
||||
easeIn('frame8', 1500, { opacity: 0 }, { opacity: 1})
|
||||
),
|
||||
sleep(1000),
|
||||
easeIn('frame8', 1000, { opacity: 1 }, { opacity: 0}),
|
||||
easeIn('frame9', 1000, { opacity: 0, left: -300 }, { opacity: 1, left: 40}),
|
||||
sleep(1500),
|
||||
sequence(
|
||||
combine(
|
||||
easeIn('frame1', 1500, { left: 120 }, { left: -620 }),
|
||||
easeOut('frame9', 2000, { opacity: 1, left: 40 }, { opacity: 0, left: 360})
|
||||
),
|
||||
easeIn('frame2', 1000, { opacity: 0 }, { opacity: 1 }),
|
||||
easeOut('frame10', 1000, { bottom: -260 }, { bottom: -210 })
|
||||
)
|
||||
|
||||
),
|
||||
sequence(
|
||||
|
||||
)
|
||||
|
||||
);
|
||||
|
||||
// launch the animation
|
||||
renderloop();
|
||||
|
||||
```
|
||||
|
||||
Then your HMTL should look something like this:
|
||||
|
||||
```html
|
||||
<div id='container'>
|
||||
<div id='frame1' class ="frame">
|
||||
<img src="http://example.com/some_sprite.png">
|
||||
</div>
|
||||
<div id='frame2' class ="frame">
|
||||
<img src="http://example.com/some_sprite.png" style="left: -300px; top: 40px;">
|
||||
</div>
|
||||
<div id='frame3' class ="frame">
|
||||
<img src="http://example.com/some_sprite.png" style="left: -602px">
|
||||
</div>
|
||||
<div id='frame4' class ="frame">
|
||||
<img src="http://example.com/some_sprite.png" style="left: -600px;">
|
||||
</div>
|
||||
<div id='frame5' class ="frame">
|
||||
<img src="http://example.com/some_sprite.png" style="left: -1350px;">
|
||||
</div>
|
||||
<div id='frame6' class ="frame">
|
||||
<p>Hey there,</p>
|
||||
</div>
|
||||
<div id='frame7' class ="frame">
|
||||
<p>People call me</p>
|
||||
</div>
|
||||
<div id='frame8' class ="frame">
|
||||
<p>RamonGebben</p>
|
||||
</div>
|
||||
<div id='frame9' class ="frame">
|
||||
<p>And this is an awesome lib </p>
|
||||
</div>
|
||||
<div id='frame10' class ="frame">
|
||||
<div id="cta">
|
||||
<div id="button"></div>
|
||||
<p>SWIPE TO CLICK</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Licence
|
||||
|
||||
Copyright (c) 2015 RamonGebben
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
Reference in New Issue
Block a user