deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

1.0.1 first commit

Browse source 
* new changes to the prototype to allow more flexibility and performance
* introducing 2 new methods .allTo() and .allFromTo for collections of elements
* added a new tween option for the new methods called offset to set a delay between animations of these collections of elements
* removed deprecated method .Animate()
* improved performance for the render functions
* added support for transformOrigin tween setting
* documentation updates
* 'fixed' the additional tools UMD scripting
This commit is contained in:
thednp 2016-02-05 23:19:34 +02:00
parent 057cabde2a
commit 12512274aa
12 changed files with 2860 additions and 2628 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
demo/about.html
View file

@ -68,12 +68,15 @@
<h2 id="performance">A Word On Performance</h2>
<p>As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices.</p>
<h3>Function Nesting</h3>
<p>This could be one of the most important factors that influence performance, because we neglect this fact most of the time and changing the scope of an animation engine is important to look after. A quick example would be when we create tween objects on events such as <code>click</code>, <code>scroll</code> or <code>resize</code>, we basically set a totally different scope for the animation and we fill the memory with large chunks of trash/jank, especially on events like <code>resize</code>.</p>
<p>A better way to handle this is to create the tween objects outside the event handlers and only start the animation with these handlers when certain conditions are met. EG: <code>if (window.clientWidth > 760) { myTween.start() }</code>. Also keep in mind that this approach will eliminate any possible syncronization issues, but creating many animations is a huge temptation and this will create lots of problems for the old browsers, so keep the function nesting to as minimal as possible as a general rule.</p>
<p>In all animation engines, GSAP is the only one that exports all it's methods and computed values to the global scope to help diminish the time to access/execute, but it will find soon that it's no longer the case because modern browsers continuously improve their Javascript engines to a point where the access speed is the same, blazing fast, no matter how deep Javascript animation scope goes.</p>
<h3>Translate and Position</h3>
<p>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force the entire page layout to change and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger a repaint but involves more complex operations such as object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
<p><span class="ion-android-plane media"></span>I would stress on this a bit: even faster performance for translation can be achieved by using an improved version of the tiny <a href="https://github.com/tweenjs/tween.js">tween.js</a>, as it only <em>tweens</em> the values and allows you to concatenate strings as you please. On large amounts of elements translating on vertical or horizontal axis, tween.js would be the <strong>best</strong> of them all, but well, we'll see about that in the <a href="performance.html">performance testing page</a>. </p>
<p>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>. With other words the more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</p>
<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>. The more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</p>
<h3>Translate, TranslateX and Translate3D</h3>
<p>While running a 2D <code>translate:150</code> animation could score similar performance as <code>translateX:150</code>, interestingly, <code>translate3d:[150,0,0]</code> is slightly faster than the other translations. Some performance <a href="http://jsperf.com/translate3d-vs-xy/28">tests</a> confirm that <code>translate3d</code> is the prefered property for hardware acceleration. For this reason, <kbd>translate3d</kbd> is the <strong>winner</strong> and KUTE.js always uses it even if you only use <code>translateX</code> or <code>translateY</code> for instance.<p>
@ -94,7 +97,7 @@
<p>KUTE.js comes with 3 packs of easing functions: the popular <a href="http://robertpenner.com/easing/" target="_blank">easing functions</a> by Robert Penner, <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing functions by Michael Villar and <a href="https://github.com/gre/bezier-easing" target="_blank">bezier-easing</a> by Gaëtan Renaudeau. I've worked very hard to optimize the last 2 as much as possible, but they will never beat Robert Penner's functions in any performance test, that's an all time <strong>winner</strong>.</p>
<p><span class="ion-shuffle media"></span>The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the <code>cubic-bezier</code> based functions have a 0.0000001 error margin, while the <code>Exponential</code> easing functions by Robert Penner are somewhat glitchy on long page scrolls or translations. Interestingly, some physics based functions perform exceedingly well, and generally the difference in performance is fairly negligible even for large amounts of elements, and have no impact on very few elements.</p>
<h3>Garbage Collection And Repeat</h3>
<h3>Garbage Collection</h3>
<p><span class="ion-trash-a media"></span>The goal of the development strategy is to be able to execute the script, update layout and repaint, all under 16 miliseconds, so that the animation runs constantly at 60fps. However running some repeatable animations for a large amount of elements would really give garbage collectors a lot of work and thus some frames take more than 16 miliseconds. The more properties and/or elements, the more work.</p>
<p>While garbage collection is a great way modern browsers use to clean the memory, sometimes the garbage collector can jump in anytime, cousing drops in the order of miliseconds. Still, if it's the case, there are ways to help composing the layout faster, but we will see that in the performance testing <a href="performance">page</a>.</p>

91
demo/api.html
View file

@ -68,12 +68,12 @@ $ bower install --save kute.js
<h3>Websites</h3>
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>Also you can include the tools that you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.1/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
</code></pre>
<p>Your awesome animation coding would follow after these script links.</p>
@ -84,14 +84,40 @@ $ bower install --save kute.js
<div class="content-wrap">
<h2>Main Methods</h2>
<p>These methods allow you to create <strong>tween objects</strong>; here a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration or repeat. The methods have different uses and performance scores while making it easy to work with.</p>
<p><kbd>.to()</kbd> method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value.
It's performance is not the same as for the next two because it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a cuple of miliseconds, but this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
<h3>Single Tween Object Construct</h3>
<p>As the heading suggests, the following two methods allow you to create tween objects for a single HTML element, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works with collections of elements.</p>
<p><kbd>.to()</kbd> method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value.
It's performance is not the same as for the <strong>.fromTo()</strong> method as it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a couple of miliseconds; still this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest methods but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Also, another advantage is the fact that you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. So here's a quick example:</p>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
<p><kbd>.Animate()</kbd> method is only a fallback for the older KUTE.js versions and works as the <code>.fromTo()</code> method. It will be deprecated with later versions.</p>
<h3>Multiple Tween Object Construct</h3>
<p>These methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween control methods in this new context.</p>
<p><kbd>.allTo()</kbd> method allows you to create an array of tween objects for a collection of elements. This method is using the above <code>.to()</code> method and inherits it's functionality. Considering a given collection <code>myDivs</code> elements, a nice example would be:</p>
<pre><code class="language-javascript">// on the fly, grab the elements by className,
// do the tween objects array, and start kicking
KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();
// or we cache the objects for better performance and / or later control
var myDivs = document.querySelectorAll('.my-div-class');
var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
</code></pre>
<p><kbd>.allFromTo()</kbd> method is also a method to animate a collection of elements and it uses the <code>.fromTo()</code> method. Quick example:</p>
<pre><code class="language-javascript">KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()</code></pre>
<p>Considering that the selector matches two DIV elements, the value for the above variable <code>myDivsTweens</code> is an object that only stores the two tweens, one for each element found:</p>
<pre><code class="language-javascript">
myDivsTweens = { // console.log(myDivsTweens);
tweens = [ Tween, Tween ] console.log(myDivsTweens.tweens);
}
</code></pre>
<p>As you can see the above code, these methods have a specific tween option called <code>offset</code> that allows you to set a delay in miliseconds between the starting time of each tween animation. Most tween control methods apply to both methods, except for the <code>.chain()</code> method. In order to chain another tween to one of the <code>myDivsTweens</code> objects, we would need to access it from the array, but let's leave that for later.</p>
</div>
<div class="content-wrap">
@ -101,21 +127,24 @@ $ bower install --save kute.js
<p>This tween object is now ready to work with the methods.</p>
<h3 id="start">Starting Animations</h3>
<p><kbd>.start()</kbd> method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation, now you have to manually start them.</p>
<p><kbd>.start()</kbd> method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation, now you have to manually start them. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">//cached object defined above
tween.start();
//non-cached object are created on the fly and garbage collected after animation has finised
// non-cached object are created on the fly and garbage collected after animation has finised
KUTE.fromTo(div,{opacity:1},{opacity:0}).start();
//also start the tween at a certain time
// also start the tween at a certain time
tween.start(now); // where now must be the current or future time as number, see below
// lastly the method works with tweens made with .allTo() and .allFromTo() methods
KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
</code></pre>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly <strong>eliminates any syncronization issue that may occur</strong>, even if you are using the <code>.to()</code> method. This applies to our performance test page as well, and the trick is super duper simple:</p>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
var tweens = [], myElements = document.querySelector('.myManyElements');
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
// step 2 - define tween objects for each element
for (var i = 0; i < numberOfElements; i++) {
@ -139,26 +168,27 @@ for (var i = 0; i < numberOfElements; i++) {
}
</code></pre>
<p>If you care to see the actual working code, check it in the <a href="./assets/js/perf.js" target="_blank">perf.js</a> file.</p>
<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
<h3>Stopping Animation</h3>
<p><kbd>.stop()</kbd> method stops animation for a given tween object while animating. You cannot stop the animation for tween objects created on the fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via <code>click</code> action:</p>
<pre><code class="language-javascript">stopButton.addEventListener('click', function(){
tween.stop();
<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) while animating. You cannot stop the animation for tween objects created on the fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via <code>click</code> action:</p>
<pre><code class="language-javascript">// for a tween object
stopButton.addEventListener('click', function(){
myTween.stop(); // myMultiTweens.stop();
}, false);
</code></pre>
<h3>Pausing Animation</h3>
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
tween.pause();
tween.pause(); // or myMultiTweens.pause();
}, false);
</code></pre>
<h3>Resuming Paused Animation</h3>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object only if it was paused or else will produce no effect.</p>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
<pre><code class="language-javascript">playButton.addEventListener('click', function(){
tween.play(); // or tween.resume();
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
}, false);
</code></pre>
@ -172,9 +202,20 @@ tween.chain(tween2);
//the new tween chains the first one creating a loop
tween2.chain(tween);
</code></pre>
<p>It's also possible to chain multiple tweens, just as shown in the below example, but the one that finishes last (has longest delay and duration together) should be used last in the <code>.chain()</code> method arguments list. Why? Because when a tween is finished it triggers <code>cancelAnimationFrame()</code> and KUTE.js will stop "ticking" causing all other chained tweens to stop prematurelly.</p>
<p>It's also possible to chain multiple tweens, just as shown in the below example.</p>
<pre><code class="language-javascript">//chain multiple tweens
tween.chain(tween1,tween2);
</code></pre>
<p>Another thing we talked before is the ability to chain to one of the tween object within the array built with <code>.allTo()</code> or <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">// chain to a tween from collection
var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1}, {opacity: 0}, {duration: 500});
// considering the collection has 5 tweens,
// the array is right here tweensCollection.tweens, so
// let's grab the second and chain another tween to it
tweensCollection.tweens[1].chain(tween2);
</code></pre>
@ -186,7 +227,8 @@ tween.chain(tween1,tween2);
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<p><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</p>
<p><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</p>
<p><kbd>delay: 500</kbd> option allows you to schedule the tween animation after a certain number of miliseconds. The default value is <strong>0</strong>.</p>
<p><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</p>
<p><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is <strong>0</strong>.</p>
<p><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</p>
<p><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value <b>1</b>. The default value is <strong>false</strong>.</p>
<p><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is <strong>linear</strong>.</p>
@ -197,6 +239,7 @@ tween.chain(tween1,tween2);
<p><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.</p>
<p><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation.</p>
<p><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.</p>
<p><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>

14
demo/assets/js/examples.js
View file

@ -341,4 +341,16 @@ playPauseButton.addEventListener('click', function(e){
}
}, false);
/* CROSS BROWSER EXAMPLE */
/* CROSS BROWSER EXAMPLE */
/* MULTI TWEENS EXAMPLE */
var tweenMulti = KUTE.allFromTo('.example-multi',
{translate:[0,0], rotate: 0},
{translate:[0,-50], rotate: 360},
{transformOrigin: '10% 10%', offset: 300, duration: 1000, easing: 'easingCubicOut', repeat: 1, repeatDelay: 1000, yoyo: true}
);
function startMultiTween() {
tweenMulti.start();
}
/* MULTI TWEENS EXAMPLE */

28
demo/examples.html
View file

@ -437,6 +437,33 @@ playPauseButton.addEventListener('click', function(e){
<li>the <code class="bg-olive">RESUME</code> button will use the <code>.resume()</code> method and resumes the animation; this reverses the button's initial state;</li>
<li>make sure you work with the conditions properly when you want to pause an animation you MUST check both <code>!myTween.playing</code> and <code>myTween.paused</code> conditions because you could end up with errors.</li>
</ul>
<h2>Multi Tweens</h2>
<p>With KUTE.js 1.0.1 we introduced new tween object constructor methods, let's have a little fun.</p>
<pre><code class="language-javascript">// a simple .to() for a collection of elements would look like this
var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});
// or a more complex example with the two new options
var myMultiTween2 = KUTE.allFromTo(
'selector1',
{translate:[0,0], rotate: 0},
{translate:[0,150], rotate: 360},
{transformOrigin: '100% 100%', offset: 200 }
);
</code></pre>
<p>And should looks like this:</p>
<div class="featurettes">
<div class="example-item example-box example-multi bg-indigo">K</div>
<div class="example-item example-box example-multi bg-olive">U</div>
<div class="example-item example-box example-multi bg-pink">T</div>
<div class="example-item example-box example-multi bg-red">E</div>
<div class="example-buttons">
<a class="btn btn-green" onclick="startMultiTween();" href="#">Start</a>
</div>
</div>
<ul id="share" class="nav">
<li>Share </li>
@ -467,7 +494,6 @@ playPauseButton.addEventListener('click', function(e){
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<!--<script src="./src/kute-keys.js"></script> some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/examples.js"></script> <!-- examples stuff -->
</body>

278
demo/src/kute-bezier.js
View file

@ -6,50 +6,68 @@
* Licensed under MIT-License
*/
(function(kute_ea){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if(define == "function") {
define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
kute_ea(KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = KUTE;
} else if(typeof root.KUTE != "undefined") {
kute_ea(root.KUTE);
} else {
throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
KUTE.Ease = {};
// /* THIS IS THE OLD CODE */
// (function(kute_ea){
// // Obtain a reference to the base KUTE.
// // Since KUTE supports a variety of module systems,
// // we need to pick up which one to use.
// if(define == "function") {
// define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
// } else if(typeof module == "object" && typeof require == "function") {
// // We assume, that require() is sync.
// var KUTE = require("./kute.js");
// kute_ea(KUTE);
// // Export the modified one. Not really required, but convenient.
// module.exports = KUTE;
// } else if(typeof window.KUTE != "undefined") {
// kute_ea(window.KUTE);
// } else {
// throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
// }
// })(function(KUTE){
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
} else {
throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
}
}( function (KUTE) {
'use strict';
var E = E || {};
KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
E.Bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
var _bz = KUTE.Ease.bezier.prototype;
var _bz = E.Bezier.prototype;
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
_bz.r = function(aX){
@ -61,118 +79,120 @@
return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
};
return _bz.r;
};
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
var i = 0, j = _bz.ni;
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
var x = _bz.cB(agt, mX1, mX2) - aX;
agt -= x / cs;
}
return agt;
};
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
var x = _bz.cB(agt, mX1, mX2) - aX;
agt -= x / cs;
}
return agt;
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
if (mX1 != mY1 || mX2 != mY2)
_bz.csv(mX1, mX2);
};
};
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
});
E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
return E;
}));

78
demo/src/kute-jquery.js
View file

@ -4,44 +4,46 @@
* Licensed under MIT-License
*/
(function(kutejQuery){
// We need to require the root KUTE and jQuery.
if(define == "function") {
define(["./kute.js", "jQuery"], function(KUTE, $){
kutejQuery($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jQuery");
kutejQuery($, KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = $;
} else if(typeof root.KUTE != "undefined") {
// jQuery always has two ways of existing... Find one, and pass.
var $ = root.jQuery || root.$;
kutejQuery($, root.KUTE);
} else {
throw new Error("KUTE.js jQuery depends on KUTE.js and jQuery. Read the docs for more info.")
}
(function(factory){
// We need to require the root KUTE and jQuery.
if (typeof define === 'function' && define.amd) {
define(["./kute.js", "jQuery"], function(KUTE, $){
factory($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jQuery");
// Export the modified one. Not really required, but convenient.
module.exports = factory($, KUTE);
} else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
// jQuery always has two ways of existing... Find one, and pass.
var $ = window.jQuery || window.$, KUTE = window.KUTE;
$.fn.KUTE = factory($, KUTE);
} else {
throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
}
})(function($, KUTE) {
$.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
'use strict';
var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
return $K;
});

563
demo/src/kute-physics.js
View file

@ -6,316 +6,317 @@
* Licensed under MIT-License
*/
(function(kutePhysics){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if(define == "function") {
define(["./kute.js"], function(KUTE){ kutePhysics(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
kutePhysics(KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = KUTE;
} else if(typeof root.KUTE != "undefined") {
kutePhysics(root.KUTE);
} else {
throw new Error("KUTE.js Physics depends on KUTE.js. Read the docs for more info.")
}
(function(factory){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
} else {
throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
KUTE.Physics = {};
var _kp = KUTE.Physics, _hPI = Math.PI / 2;
'use strict';
var P = P || {}, _hPI = Math.PI / 2;
// spring easing
_kp.spring = function(options) {
options = options || {};
// spring easing
P.spring = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
return _kps.run;
};
var _kps = _kp.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
_kp.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = _kp.bounce.prototype;
_kpo.run = {};
// gravity
_kp.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
return v;
};
return _kpg.fn;
};
var _kpg = _kp.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
return c;
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
//throw up and pull down by gravity
_kp.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return _kp.gravity(ops);
return _kps.run;
};
var _kps = P.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
P.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = P.bounce.prototype;
_kpo.run = {};
// multi point bezier
_kp.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
// gravity
P.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
(function() {
var i, k;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
for (i in points) {
k = parseInt(i);
if (k >= points.length - 1) {
break;
}
_kpb.fn(points[k], points[k + 1], Bs);
}
return Bs;
})();
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
return _kpb.run;
};
}
return curve.b;
})();
var _kpb = _kp.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
return Bs.push(B2);
};
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!B) {
return ( rTS ? 0 : 1 );
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
return v;
};
return _kpg.fn;
};
var _kpg = P.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
}
return c;
};
//throw up and pull down by gravity
P.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return P.gravity(ops);
};
// multi point bezier
P.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
(function() {
var i, k;
for (i in points) {
k = parseInt(i);
if (k >= points.length - 1) {
break;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
_kpb.fn(points[k], points[k + 1], Bs);
}
return B(percent).y;
};
return Bs;
})();
_kp.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
};
return _kpb.run;
};
_kp.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
var _kpb = P.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kp.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
};
return Bs.push(B2);
};
_kp.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kp.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
break;
}
}
if (!B) {
return ( rTS ? 0 : 1 );
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
}
return B(percent).y;
};
_kp.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
P.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
};
P.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
P.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
};
P.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
P.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
P.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
return P;
});

1753
demo/src/kute.js
View file

File diff suppressed because it is too large Load diff

278
kute-bezier.js
View file

@ -6,50 +6,68 @@
* Licensed under MIT-License
*/
(function(kute_ea){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if(define == "function") {
define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
kute_ea(KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = KUTE;
} else if(typeof root.KUTE != "undefined") {
kute_ea(root.KUTE);
} else {
throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
KUTE.Ease = {};
// /* THIS IS THE OLD CODE */
// (function(kute_ea){
// // Obtain a reference to the base KUTE.
// // Since KUTE supports a variety of module systems,
// // we need to pick up which one to use.
// if(define == "function") {
// define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
// } else if(typeof module == "object" && typeof require == "function") {
// // We assume, that require() is sync.
// var KUTE = require("./kute.js");
// kute_ea(KUTE);
// // Export the modified one. Not really required, but convenient.
// module.exports = KUTE;
// } else if(typeof window.KUTE != "undefined") {
// kute_ea(window.KUTE);
// } else {
// throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
// }
// })(function(KUTE){
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
} else {
throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
}
}( function (KUTE) {
'use strict';
var E = E || {};
KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
E.Bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
var _bz = KUTE.Ease.bezier.prototype;
var _bz = E.Bezier.prototype;
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
_bz.r = function(aX){
@ -61,118 +79,120 @@
return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
};
return _bz.r;
};
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
var i = 0, j = _bz.ni;
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
var x = _bz.cB(agt, mX1, mX2) - aX;
agt -= x / cs;
}
return agt;
};
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
var x = _bz.cB(agt, mX1, mX2) - aX;
agt -= x / cs;
}
return agt;
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
if (mX1 != mY1 || mX2 != mY2)
_bz.csv(mX1, mX2);
};
};
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
});
E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
return E;
}));

78
kute-jquery.js
View file

@ -4,44 +4,46 @@
* Licensed under MIT-License
*/
(function(kutejQuery){
// We need to require the root KUTE and jQuery.
if(define == "function") {
define(["./kute.js", "jQuery"], function(KUTE, $){
kutejQuery($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jQuery");
kutejQuery($, KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = $;
} else if(typeof root.KUTE != "undefined") {
// jQuery always has two ways of existing... Find one, and pass.
var $ = root.jQuery || root.$;
kutejQuery($, root.KUTE);
} else {
throw new Error("KUTE.js jQuery depends on KUTE.js and jQuery. Read the docs for more info.")
}
(function(factory){
// We need to require the root KUTE and jQuery.
if (typeof define === 'function' && define.amd) {
define(["./kute.js", "jQuery"], function(KUTE, $){
factory($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jQuery");
// Export the modified one. Not really required, but convenient.
module.exports = factory($, KUTE);
} else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
// jQuery always has two ways of existing... Find one, and pass.
var $ = window.jQuery || window.$, KUTE = window.KUTE;
$.fn.KUTE = factory($, KUTE);
} else {
throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
}
})(function($, KUTE) {
$.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
'use strict';
var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
return $K;
});

563
kute-physics.js
View file

@ -6,316 +6,317 @@
* Licensed under MIT-License
*/
(function(kutePhysics){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if(define == "function") {
define(["./kute.js"], function(KUTE){ kutePhysics(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
kutePhysics(KUTE);
// Export the modified one. Not really required, but convenient.
module.exports = KUTE;
} else if(typeof root.KUTE != "undefined") {
kutePhysics(root.KUTE);
} else {
throw new Error("KUTE.js Physics depends on KUTE.js. Read the docs for more info.")
}
(function(factory){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
} else {
throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
KUTE.Physics = {};
var _kp = KUTE.Physics, _hPI = Math.PI / 2;
'use strict';
var P = P || {}, _hPI = Math.PI / 2;
// spring easing
_kp.spring = function(options) {
options = options || {};
// spring easing
P.spring = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
return _kps.run;
};
var _kps = _kp.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
_kp.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = _kp.bounce.prototype;
_kpo.run = {};
// gravity
_kp.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
return v;
};
return _kpg.fn;
};
var _kpg = _kp.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
return c;
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
//throw up and pull down by gravity
_kp.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return _kp.gravity(ops);
return _kps.run;
};
var _kps = P.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// bounce
P.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = P.bounce.prototype;
_kpo.run = {};
// multi point bezier
_kp.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
// gravity
P.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
(function() {
var i, k;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
for (i in points) {
k = parseInt(i);
if (k >= points.length - 1) {
break;
}
_kpb.fn(points[k], points[k + 1], Bs);
}
return Bs;
})();
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
return _kpb.run;
};
}
return curve.b;
})();
var _kpb = _kp.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
return Bs.push(B2);
};
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!B) {
return ( rTS ? 0 : 1 );
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
return v;
};
return _kpg.fn;
};
var _kpg = P.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
}
return c;
};
//throw up and pull down by gravity
P.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return P.gravity(ops);
};
// multi point bezier
P.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
(function() {
var i, k;
for (i in points) {
k = parseInt(i);
if (k >= points.length - 1) {
break;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
_kpb.fn(points[k], points[k + 1], Bs);
}
return B(percent).y;
};
return Bs;
})();
_kp.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
_kpb.run = function(t) {
if (t === 0) {
return 0;
} else if (t === 1) {
return 1;
} else {
return _kpb.yForX(t, Bs, returnsToSelf);
}
};
return _kpb.run;
};
_kp.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
var _kpb = P.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kp.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
};
return Bs.push(B2);
};
_kp.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kp.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
break;
}
}
if (!B) {
return ( rTS ? 0 : 1 );
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
}
return B(percent).y;
};
_kp.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
P.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
};
P.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
P.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
};
P.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
P.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
P.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
return P;
});

1753
kute.js
View file

File diff suppressed because it is too large Load diff