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

Docs update

Browse source
This commit is contained in:
thednp 2016-09-18 01:16:02 +03:00
parent 3c9683b002
commit ab8ef18953
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/js/svg.js
View file

@ -9,7 +9,7 @@ morphBtn.addEventListener('click', function(){
}, false);
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
showMorphInfo: true, morphIndex: 73,
showMorphInfo: true, morphIndex: 127,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});

6
svg.html
View file

@ -135,13 +135,13 @@ var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).star
// The console log should show you this
/* ------------------------------------
KUTE.js Path Morph Log
The morph used 92 points to draw both paths based on 25 morphPrecision value.
You may also consider a morphIndex for the second path. Currently the best index seems to be 79.
The morph used 153 points to draw both paths based on 15 morphPrecision value.
You may also consider a morphIndex for the second path. Currently the best index seems to be 129.
If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.
*/
</code></pre>
<p>Next, we're going to set the <code>morphIndex: 79</code> option and we will get an improved morph. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<p>Next, we're going to set the <code>morphIndex: 127</code> option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="rectangle1" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531