gct256.Easing

gct256

2010-09-02 14:01:30

License: MIT License

Fork: 0

Fav: 1

View: 852

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); }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<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>

QR Code

Favorite by

y3i12

gct256.Easing

Description どんなゲームですか？

Control Device

Fullscreen

style

code

Tweet

twitter

Tags

Favorite by