JavaScript の小さなアニメーションコンポーネントと実装コード_PHP チュートリアル-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

JavaScript の小さなアニメーションコンポーネントと実装コード_PHP チュートリアル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 21, 2016 pm 03:36 PM

javascript そしてコード例するアニメーション毛織物仕上げる成し遂げるどうやって効果はい普通のコンポーネント

一般的なアニメーション効果を作成するには、js はどのように完成させるのでしょうか? 例を見てください

コードをコピーしますコードは次のとおりです:

 
setInterval(function(){ 
element.style.left = parseFloat(element.style.left) +(n) +'px'

; var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px'; } 、 10); clearInterval (interval) を使用してアニメーションの再生を終了します。 (element.style.left) +2 +'px' },10);

が 500px を超えるとアニメーションが停止し、要素は移動しなくなります。

テスト

[Ctrl+A Select All 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

ただし、上記のアニメーションは比較的硬いので、別のタイムラインアニメーションがあります。
例を見てください:

var element = document.getElementById('test1'); pos = 終了? 1 : (時間-開始)/dur;
if(時間>終了); interval) ; } },10); start はターゲットアニメーションの開始時間です ( +new Date は実際には new Date().getTime() です)

dur はアニメーションの実行に必要な合計時間です
finish はターゲットアニメーションの終了時間
pos = time > end ? 1 : (time-start)/dur; // pos は時間の比率
(100*pos) と考えることができ、100 は距離を表します。距離が 500px の場合は、500 *pos に設定します。
time>finish: 時間を超えるとアニメーションを停止します。
テスト

[Ctrl+A を押してすべてを選択します注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

とてもわかりました。簡単なアニメーション効果を記述する方法はすでにわかりました
見てみましょう。小さなもの完全なアニメーションコンポーネントの書き方:

コードをコピーします

コードは次のとおりです:

<div class="codebody" id="code65457"> (function($,name){ var parseEl = document.createElement('div') , props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ 'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth Bottom color fontSize '+ 'フォントウェイト高さ左文字間隔行高さマージン下マージン左マージン右マージン上最大高さ '+ 'max幅最小高さ最小幅不透明度アウトライン色のアウトラインオフセットアウトライン幅パディング下パディング左 '+ ' パディング右パディング右上のテキストインデント上幅 wordSpacing zIndex').split(' ') , normalize =function ( style){ var css, rules = {}, i = props.length, parseEl.innerHTML = '<div style="'+style+'"></div>'; css = parseEl.childNodes[0].style; while(i--) if(v = css[props[i]]) rules[props[i]] = return rules; color = function(source,target,pos){ var i = 2, j, c, tmp, v = [], r = []; while(j=3,c=arguments[i-1], i--) if(s(c,0)=='r') { c = c.match(/d+/g) while(j--) v.push(~~c[j]); } else { if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c ,3)+s(c,3); while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp255?255:tmp); return 'rgb('+r.join(',')+')'; }, parse = function(prop){ var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,''); 戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; }, s = function(str, p, c){ return str.substr(p,c||1);//カラー用 }, interpolate =function(source,target,pos){ return (ソース+(ターゲットソース)*pos).toFixed(3); }, flower = function(el, style,opts,after){ var el = document.getElementById(el), //通过id获取元素对象 opts = opts || {}、 target = Normalize(style)、 comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //ie和w3c兼容、获取样式 prop, current = {}, start = +new Date, //開始時間间 dur = opts.duration||200, //イベント実行、默认は200 finish = start+dur, //終了時間 interval, easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; for(ターゲット内のプロパティ) current[prop] = parse(comp[prop]); interval = setInterval(function(){ var time = +new Date, pos = time>finish ? 1 : (time-start)/dur; for(prop in target){ el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; } if(time>finish) { clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); }; $[名前] = 花; })(ウィンドウ,"花"); 复制代码</div>
 代码如下:<div class="codetitle">
 var parse = function(prop){ var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,' '); 戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; </div>} <div class="codebody" id="code47704">var p = parseFloat(prop) 意思 : 500px => 500; q = prop.replace(/^[-d.]+/,''); 500ピクセル =>ピクセル; 戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; つまり、結果が取得された場合は色値(#号があるため)、戻り値{ v: q, f: color, u: ''} u を表すのは、f は一色関数(後面会讲到); var s = function(str, p, c){ return str.substr(p,c||1); s 関数は、文字列をインターセプトし、最終結果を返すために使用されます。 color 関数は、「rgb(x,x,x)」の形式でカラー値を一律に返します。 normalize 関数は、名前と要素によって実行される CSS 属性の値 while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); コード行を分割します。仕組み while(i--){ //A = 記号がここで使用され、代入演算が最初に実行されます。これが存在しない場合、if は 1 つで 2 つ鳥を殺します。 stone: ) if(v = css[props[i]]) { rules[props[i]] = parse(v) //新しいオブジェクトに代入します, } } 補間関数 return (source+(target; -source)*pos).toFixed(3); toFixed 0.000000001 が 1e-9 になってしまうなど、toFixed、toFixed (n) で解決できます。 )、n は保持する小数点以下の桁数を表します el.currentStyle? el.currentStyle: getComputedStyle(el, null); これは実際には複数のブラウザーと互換性があります: JS を取得するコードを参照してください。最終スタイル [getStyle] Fflower の 4 つのパラメータ el ターゲット オブジェクト、スタイルは最終スタイル、opts はパラメータ オプション (期間、イージング関数、その後に実行されるコールバック) を含み、後の 4 番目は最後に実行されたコールバックです。イージングでは、さまざまなイージング アルゴリズムを使用して、 などの要素のモーション状態を変更できます。 <div class="codetitle">コードをコピーする コードは次のとおりです。 )) { return (7.5625*pos*pos); } else if (pos return (7.5625*(pos-=(1.5/2.75))*pos + .75); <div class="codebody" id="code74407">} else if (pos < (2.5/2.75)) { return (7.5625*( pos-=(2.25/2.75))*pos + .9375) } else { return (7.5625*(pos-=) (2.625/2.75))*pos + .984375); } } (function( $,name){ window.flower = flowers; })(window,'flower');内部関数は解放され、この呼び出しを通じてのみインターフェイスを公開します。それ以外の場合、外部関数は匿名通信でフラワーにアクセスできません。 呼び出し例を見てください:) コードをコピーします コードは次のとおりです:</div><div class="codebody" id="code94297"> <div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div> <div id="test2" style="border:0px Solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div> <スクリプト> (function($,name){ var parseEl = document.createElement('div') , props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ 'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth Bottom color fontSize '+ 'fontWeight左の文字の高さ間隔線高さのマージン下マージン左マージン右マージン上最大高さ '+ 'max幅最小高さ最小幅不透明度アウトラインカラーアウトラインオフセットアウトライン幅パディング下パディング左 '+ ' パディング右パディング右上のテキストインデント上幅 wordSpacing zIndex').split(' ') , normalize =function (style ){ var css, rules = {}, i = props.length, parseEl.innerHTML = '<div style="'+style+'"></div>'; = parseEl.childNodes[0].style; while(i--) if(v = css[props[i]]) ルール[props[i]] = return ルール; color = function(source,target,pos){ var i = 2, j, c, tmp, v = [], r = [] while(j=3,c=arguments[i-1],i --) if(s(c,0)=='r') { c = c.match(/d+/g); while(j--) v.push(~~c[j]); } else { if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c ,3)+s(c,3); while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp255?255:tmp); return 'rgb('+r.join(',')+')'; }, parse = function(prop){ var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,''); 戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; }, s = function(str, p, c){ return str.substr(p,c||1); }, interpolate =function(source,target,pos){ return (source+(target-source)*pos).toFixed(3); }, flower = function(el, style,opts,after){ var el = document.getElementById(el), opts = opts || {}、 target = Normalize(style)、 comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null)、 prop、 current = {}、 start = +new Date、 dur = opts.duration||200、 finish = start+dur、 interval、 easing =オプトイージング || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; for(ターゲット内のプロパティ) current[prop] = parse(comp[prop]); interval = setInterval(function(){ var time = +new Date, pos = time>finish ? 1 : (time-start)/dur; for(prop in target){ el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; } if(time>finish) { clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); }; $[名前] = 花; })(ウィンドウ,"花"); (function(){ var bounce = function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75) )) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); else if (pos < (2.5/2.75)) { return (7.5625*(pos-=( 2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } } flower('test2', ' left:300px;padding:10px;border:50px Solid #ff0000', { duration: 1500, after: function(){ flower('test1', 'background:#0f0;left:100px;padding-bottom: 100px;不透明度:1', { 期間: 1234、イージング: バウンス }); } }); </スクリプト> 参考: http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html
 
 http://www.bkjia.com/PHPjc/322028.html www.bkjia.com</div>
 truehttp://www.bkjia.com/PHPjc/322028.html
<div style="display:none;">
技術記事以下の例を参照: setInterval(function(){ element.style.left =parseFloat(element.style.left) +(n) +'p. ..

</div>
</div>
</div>

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7569

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

Related knowledge

ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い画面の問題が発生する Apr 03, 2024 am 08:13 AM

スマートフォンの画面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する写真をインターネット上で見たことがあるはずです。では、スマートウォッチの画面が白くなってしまう状況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの画面が白くなっている写真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時に充電していましたが、戻ってきたらこのようになっていました。再起動しようとしましたが、再起動プロセス中も画面はまだこのままでした。」Samsung Watch スマートウォッチの画面が白くなりました。 Reddit ユーザーはスマートウォッチを指定していません。特定のモデルです。しかし、写真から判断すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報告しました

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか? Mar 24, 2024 am 11:27 AM

Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に

九州風神アサシン4Sラジエターレビュー空冷「アサシンマスター」スタイル Mar 28, 2024 am 11:11 AM

ASSASSINといえば、プレイヤーの皆さんは必ず『アサシンクリード』に登場するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信条を持っています。 - アプライアンスブランド DeepCool の冷却ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場し、上級者に新たな空冷体験をもたらす『スーツの暗殺者アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構造 + シングルファン内蔵設計を採用しています. 外側は立方体状のフェアリングで覆われており, 全体的な印象が強いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。

春の絶妙な光と影のアート、Haqu H2 は費用対効果の高い選択肢です Apr 17, 2024 pm 05:07 PM

春の到来とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寝室のベッドサイドテーブルの隣に置いても、美しい風景になります。乳白色のマットな質感のボディは、プロジェクターの高級感を演出するだけでなく、触り心地も向上させたデザインです。ベージュのレザー風の素材が全体の外観に温かみとエレガントさを加えます。この色と素材の組み合わせは、現代の住宅の美的傾向に準拠しているだけでなく、住宅に統合することもできます。

Huawei携帯電話にWeChatクローン機能を実装する方法 Mar 24, 2024 pm 06:03 PM

Huawei 携帯電話に WeChat クローン機能を実装する方法ソーシャルソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認するまず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。

Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強度 Mar 28, 2024 pm 03:20 PM

コンパクトなサイズで究極の独自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術の進歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナレベルの認証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質感が優れています。

4K HD映像がわかりやすい！この大規模なマルチモーダルモデルは、Web ポスターのコンテンツを自動的に分析するため、作業者にとって非常に便利です。 Apr 23, 2024 am 08:04 AM

PDF、Web ページ、ポスター、Excel グラフの内容を自動的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大学、その他の研究機関が提案した InternLM-XComposer2-4KHD (略称 IXC2-4KHD) モデルは、これを実現します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業ではマルチモーダル大型モデルの最大入力画像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質疑応答モデルの人気ランキングで1位となった。扱いやすい

Copilot を使用してコードを生成する方法 Mar 23, 2024 am 10:41 AM

プログラマーとして、私はコーディング体験を簡素化するツールに興奮しています。人工知能ツールの助けを借りて、デモコードを生成し、要件に応じて必要な変更を加えることができます。 Visual Studio Code に新しく導入された Copilot ツールを使用すると、自然言語によるチャット対話を備えた AI 生成コードを作成できます。機能を説明することで、既存のコードの意味をより深く理解できます。 Copilot を使用してコードを生成するにはどうすればよいですか?始めるには、まず最新の PowerPlatformTools 拡張機能を入手する必要があります。これを実現するには、拡張機能のページに移動し、「PowerPlatformTool」を検索して、[インストール] ボタンをクリックする必要があります。

See all articles

JavaScript の小さなアニメーション コンポーネントと実装コード_PHP チュートリアル