gct256.Easing

gct256

2010-09-02 14:01:30

License: MIT License

Fork: 0

Fav: 1

View: 815

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 68 lines
HTML 54 lines
CSS 73 lines

================================================
gct256.Easing

gct256.Easing

/* ================================================ */
/* gct256.Easing */
/*
CSS Transitions Module Level 3で定義される
transition-timing-functionと同じ動き

CSS Transitions Module Level 3:
  http://www.w3.org/TR/2009/WD-css3-transitions-20091201/
transition-timing-function:
  http://www.w3.org/TR/2009/WD-css3-transitions-20091201/#transition-timing-function_tag
*/

if (typeof window.gct256 != 'object')
  window.gct256 = {};

(function() {
  var E = gct256.Easing = function(x1,y1, x2,y2) {
    if (arguments.length == 1) {
      return E[x1] || E['ease'];
    }

// この辺の実装はWebKitのUnitBezier.hを参考
    // http://svn.webkit.org/repository/webkit/trunk/WebCore/platform/graphics/UnitBezier.h
    var cx = 3 * x1;
    var bx = 3 * (x2 - x1) - cx;
    var ax = 1 - cx - bx;
    var cy = 3 * y1;
    var by = 3 * (y2 - y1) - cy;
    var ay = 1 - cy - by;
    var T = function(t) {
      var t0 = 0, t1 = 1, t2 = t, x2, d2, i;
      for (i = 0; i < 8; i++) {
        x2 = (((ax * t2 + bx) * t2 + cx) * t2) - t;
        if (-0.000001 < x2 && x2 < 0.000001)
          return t2;
        d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;
        if (-1e-6 < d2 && d2 < 1e-6)
          break;
        t2 = t2 - x2 / d2;
      }
      t2 = t;
      while (t0 < t1) {
        x2 = ((ay * t2 + by) * t2 + cy) * t2;
        i = x2 - t;
        if (-0.000001 < i && i < 0.000001);
          return t2;
        if (t > x2)
          t0 = t2;
        else
          t1 = t2;
        t2 = (t1 - t0) * 0.5 + t0;
      }
      return t2;
    };
    return function(t) {
      if (t <= 0) return 0;
      else if (t >= 1) return 1;
      t = T(t);
      return ((ay * t + by) * t + cy) * t;
    };
  };
  E['linear'] = function(t) { return t; };
  E['ease-in'] = E(0.42,0, 1,1);
  E['ease-out'] = E(0,0, 0.58,1);
  E['ease-in-out'] = E(0.42,0, 0.58,1);
  E['ease'] = E(0.25,0.1, 0.25,1);
})();

<h2>linear</h2>
<div class="js" id="js:linear">JavaScript</div>
<div class="css" id="css:linear">CSS</div>

<h2>ease-in</h2>
<div class="js" id="js:ease-in">JavaScript</div>
<div class="css" id="css:ease-in">CSS</div>

<h2>ease-out</h2>
<div class="js" id="js:ease-out">JavaScript</div>
<div class="css" id="css:ease-out">CSS</div>

<h2>ease-in-out</h2>
<div class="js" id="js:ease-in-out">JavaScript</div>
<div class="css" id="css:ease-in-out">CSS</div>

<h2>ease</h2>
<div class="js" id="js:ease">JavaScript</div>
<div class="css" id="css:ease">CSS</div>

<h2>cubic-bezier(0.1, 0.9, 0.9, 0.1)</h2>
<div class="js" id="js:special">JavaScript</div>
<div class="css" id="css:special">CSS</div>

var first = new Date().valueOf();
  (function() {
    var s = new Date().valueOf();
    var t = (s - first) / 5000;
    js.forEach(function(x) {
      x[0].style.width = (x[1](t) * 200 + 100) + 'px';
    });
    if (t <= 1) setTimeout(arguments.callee, 20);
  })();

var css = document.querySelectorAll('DIV.css');
  Array.prototype.forEach.apply(css, [function(x) {
    x.className = 'css begin';
  }]);
}
</script>

gct256.Easing

H2 {
  font-size:100%;
  margin:0.1em 0;
}

.js,
.css {
  width:100px;
  font-size:80%;
}

.js {
  background:#99f;
}

.css {
  background:#9f9;
  -webkit-transition-property:width;
  -webkit-transition-duration:5s;
  -moz-transition-property:width;
  -moz-transition-duration:5s;
  -o-transition-property:width;
  -o-transition-duration:5s;
  transition-property:width;
  transition-duration:5s;
}

.css.begin {
  width:300px;
}

.css[id$=':linear'] {
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
}

.css[id$=':ease-in'] {
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.css[id$=':ease-out'] {
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.css[id$=':ease-in-out'] {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.css[id$=':ease'] {
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}

.css[id$=':special'] {
  -webkit-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1);
  -moz-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1);
  -o-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1);
  transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1);
}

================================================ gct256.Easing /* ================================================ */ /* gct256.Easing */ /* CSS Transitions Module Level 3で定義される transition-timing-functionと同じ動き CSS Transitions Module Level 3: http://www.w3.org/TR/2009/WD-css3-transitions-20091201/ transition-timing-function: http://www.w3.org/TR/2009/WD-css3-transitions-20091201/#transition-timing-function_tag */ if (typeof window.gct256 != 'object') window.gct256 = {}; (function() { var E = gct256.Easing = function(x1,y1, x2,y2) { if (arguments.length == 1) { return E[x1] || E['ease']; } // この辺の実装はWebKitのUnitBezier.hを参考 // http://svn.webkit.org/repository/webkit/trunk/WebCore/platform/graphics/UnitBezier.h var cx = 3 * x1; var bx = 3 * (x2 - x1) - cx; var ax = 1 - cx - bx; var cy = 3 * y1; var by = 3 * (y2 - y1) - cy; var ay = 1 - cy - by; var T = function(t) { var t0 = 0, t1 = 1, t2 = t, x2, d2, i; for (i = 0; i < 8; i++) { x2 = (((ax * t2 + bx) * t2 + cx) * t2) - t; if (-0.000001 < x2 && x2 < 0.000001) return t2; d2 = (3 * ax * t2 + 2 * bx) * t2 + cx; if (-1e-6 < d2 && d2 < 1e-6) break; t2 = t2 - x2 / d2; } t2 = t; while (t0 < t1) { x2 = ((ay * t2 + by) * t2 + cy) * t2; i = x2 - t; if (-0.000001 < i && i < 0.000001); return t2; if (t > x2) t0 = t2; else t1 = t2; t2 = (t1 - t0) * 0.5 + t0; } return t2; }; return function(t) { if (t <= 0) return 0; else if (t >= 1) return 1; t = T(t); return ((ay * t + by) * t + cy) * t; }; }; E['linear'] = function(t) { return t; }; E['ease-in'] = E(0.42,0, 1,1); E['ease-out'] = E(0,0, 0.58,1); E['ease-in-out'] = E(0.42,0, 0.58,1); E['ease'] = E(0.25,0.1, 0.25,1); })(); <p><input type="button" value="start" onclick="start()"></p> <h2>linear</h2> <div class="js" id="js:linear">JavaScript</div> <div class="css" id="css:linear">CSS</div> <h2>ease-in</h2> <div class="js" id="js:ease-in">JavaScript</div> <div class="css" id="css:ease-in">CSS</div> <h2>ease-out</h2> <div class="js" id="js:ease-out">JavaScript</div> <div class="css" id="css:ease-out">CSS</div> <h2>ease-in-out</h2> <div class="js" id="js:ease-in-out">JavaScript</div> <div class="css" id="css:ease-in-out">CSS</div> <h2>ease</h2> <div class="js" id="js:ease">JavaScript</div> <div class="css" id="css:ease">CSS</div> <h2>cubic-bezier(0.1, 0.9, 0.9, 0.1)</h2> <div class="js" id="js:special">JavaScript</div> <div class="css" id="css:special">CSS</div> <script type="text/javascript"> function start() { var js = document.querySelectorAll('DIV.js'); js = Array.prototype.map.apply(js, [function(x) { var name = x.id.replace(/^.*:/, ''); if (name == 'special') return [x, gct256.Easing(0.1, 0.9, 0.9, 0.1)]; return [x, gct256.Easing(name)]; }]); var first = new Date().valueOf(); (function() { var s = new Date().valueOf(); var t = (s - first) / 5000; js.forEach(function(x) { x[0].style.width = (x[1](t) * 200 + 100) + 'px'; }); if (t <= 1) setTimeout(arguments.callee, 20); })(); var css = document.querySelectorAll('DIV.css'); Array.prototype.forEach.apply(css, [function(x) { x.className = 'css begin'; }]); } </script> H2 { font-size:100%; margin:0.1em 0; } .js, .css { width:100px; font-size:80%; } .js { background:#99f; } .css { background:#9f9; -webkit-transition-property:width; -webkit-transition-duration:5s; -moz-transition-property:width; -moz-transition-duration:5s; -o-transition-property:width; -o-transition-duration:5s; transition-property:width; transition-duration:5s; } .css.begin { width:300px; } .css[id$=':linear'] { -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } .css[id$=':ease-in'] { -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .css[id$=':ease-out'] { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .css[id$=':ease-in-out'] { -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .css[id$=':ease'] { -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .css[id$=':special'] { -webkit-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1); -moz-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1); -o-transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1); transition-timing-function: cubic-bezier(0.1,0.9,0.9,0.1); }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/pJAA/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/gct256/Easing" title="gct256.Easing">gct256.Easing - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Favorite by

y3i12

gct256.Easing

tags

Tweet

twitter

Tags

Favorite by