JS Tween カラーグラデーション_JavaScript スキル

色の自動変換（#f00 #ff0000 rgb(255,0,0)形式から色計算形式へ、最後に#ff0000形式に戻る）やpx単位の自動変換を実現するイージングアルゴリズムは31種類あります。
呼び出しインターフェイス:
/**
* 外部インターフェース
* Tween の例
* @param startProps 開始プロパティ、単一プロパティまたは配列
* @param endProps 終了プロパティ、単一プロパティまたは配列
* @param timeSeconds 移動消費量時間、単位秒
* @param animType アクションの種類、文字列型、内部変換演算子
* @param late 遅延時間、動き始めるまでの時間、単位秒
*/
window.rtween = function(startProps, endProps, timeSeconds, animType, late)
{
var tw = new Tween() ;
tw.start(startProps, endProps, timeSeconds, animType, late);
return tw;
}
例は次のとおりです。 jb51.net /online/Tween.htm

<div> <input type="button" value="alpha2" onclick="alpha2()"> <input type="button" value="color2" onclick="color2()"> <input type="button" value="bgcolor2" onclick="bgcolor2()"> <input type="button" value="width2" onclick="width2()"> <input type="button" value="left2" onclick="left2()"> <select size="1" id="tweentypeSelect" name="select"></select> </div> <div id="t" style="width:500px;height:500px;background-color:#00f;color:#ccc;position:absolute;"> 関数 alpha2() { var t = rtween(1,0,1,type); t.run = 関数(ps) { $('#t').css('不透明度',ps); } t.complete = function() { rtween(0,1,1,type).run = 関数(ps) { $('#t').css('不透明度',ps); } } } </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]
リストでイージング アルゴリズムを選択し、前面のボタンをクリックすると、目的のイージング アルゴリズムに基づいて動作します。

ソース コード: http://img.jb51 .net /jslib/jquery/rtween.js
コアコード:
function Tween()
{
this._frame=20
//
this._animType = リニア ;
this._delay = 0;
//
this.run = function(){}
this.complete = function(){}
}
//
Tween.prototype.getValue = function(prop)
{
this._valueType = ”;
if(prop.constructor == Array) return prop; (typeof (prop) == 'string')
{
if(isColor(prop))
{
this._valueType = 'color';
return c2a(prop); 🎜> }
if(prop.split('px').length>1)
{
this._valueType = 'px';
return [prop.split('px')[ 0] ];
}
}
return [prop];
}
Tween.prototype.setValue = function(prop)
{
if(this._valueType = = ' color')return a2c(prop);
if(this._valueType == 'px')return prop[0] 'px';
return prop; .start = function(startProps, endProps, timeSeconds, animType, 遅延)
{
if(animType != 未定義)this._animType = this.animTypes[animType]
if(遅延 != 未定義); this._delay = 遅延;
//
this._timeSeconds = timeSeconds;
this._startTimer = new Date().getTime()
//
this ._endProps = this.getValue(endProps);
this._startProps = this.getValue(startProps);
this._currentProps = []
var $this = this; >clearInterval (this._runID);
this._runID = setInterval(
function(){$this._run();}
,this._frame);
トゥイーン。プロトタイプ.stop = function(state)
{
for(var i in this._startProps)
{
if(Number(state)>0)
this._currentProps[i] = this ._endProps[i];
else if(Number(state)this._currentProps[i] = this._startProps[i];
this.callListener( );
this.complete();
//
clearInterval(this._runID)
Tween.prototype.callListener = function()
{
this .run (this.setValue(this._currentProps));
}
Tween.prototype._run = function()
{
if ( new Date().getTime()- this._startTimer< ; 0 ) return;
var isEnd = false;
//
for(var i in this._startProps)
this._currentProps[i] = this._animType( new Date () .getTime()-this._startTimer,Number(this._startProps[i]),Number(this._endProps[i])-Number(this._startProps[i]),this._timeSeconds * 1000); >/ /
if(this._startTimer (this._timeSeconds * 1000) <= new Date().getTime())
{
this._currentProps[i] = this._endProps[i] ;
isEnd = true;
}
//
else this.callListener();