veloticy-ui を使用してテキストアニメーションを生成する方法
今回は、veloticy-uiを使用してテキストアニメーションを生成する方法と、veloticy-uiを使用してテキストアニメーションを生成する際の注意点について説明します。実際のケースを見てみましょう。
はじめに
最近、テキストの波線のような効果を実現したいと思い、アニメーションライブラリのvelocity-uiを使用しました。第一印象は、使いやすく、コード量が少ないということです。ここではその使い方を簡単に紹介し、見栄えの良いアニメーションを実装します
基本的な使い方最初に速度を導入する必要があります。速度は jquery に依存することができます。または、jquery に依存しません。以下の詳細を見てください//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});
より詳細な制御、
基本的な設定項目
$element.velocity({
width: "500px", // 动画属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
}, {
/* Velocity 动画配置项的默认值 */
duration: 400, // 动画执行时间
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
complete: undefined, // 动画结束时的回调函数
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速（默认开启）
});
width: ["500px", "300px"]//这样设置后面的300px会作为初始默认值
width: ["500px", "spring"，"300px"]//这样可以为单个属性指定缓动函数
width: function (index, total) {}//对集合对象可以设置不同的属性值を提供することができますさらに、Velocity 自体は、FadeIn/fadeOut、slideUp/slideDown、scroll、finish、reverse などのアニメーションを実装するための命令を提供します。トランスフォームやカラーなどの属性アニメーションのサポートを実装し、SVG と Promise をサポートします。具体的には、上記のリンク先のドキュメントを使用してください。 velocity-ui より多くの命令を提供することに加えて、RunSequence と RegisterEffect の 2 つのメソッドも提供します (非 jquery は $. を削除し、jquery をネイティブ DOM に置き換えることができます)
// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
{ e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
{ e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];
// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
defaultDuration: duration,
calls: [
[ { property: value }, durationPercentage, { options } ],
[ { property: value }, durationPercentage, { options } ]
],
reset: { property: value, property: value }
});上記 2 つの関数に加えて、3 つのメソッドも提供します追加のオプション属性
stagger を使用すると、コレクション オブジェクトが一定期間アニメーションをずらすことができます
drag を使用すると、コレクション オブジェクトの最後の要素にバッファリング効果を与えることができます
backwards を使用すると、コレクション オブジェクトを一定期間前方にずらすことができます最後の要素 アニメーションを実行します
RegisterEffect と stagger を使用して、単純なテキスト アニメーションを実装しましょう
カスタム アニメーションを実装するには
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>Document</title>
</head>
<body>
<h1 id="J_Text">segmentfault</h1>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
<script>
jQuery(function ($) {
$.Velocity.RegisterEffect('custom', {//注册一个叫'custom'自定义动画
defaultDuration: 1500,
calls:[
[{
rotateY: 360,
translateY: '-=15',
}, 0.5],
[{
translateY: '+=15',
}, 0.5]
],
})
$('#J_Text').css({
fontSize: 40,
color: '#333',
}) .html(function () {
return $(this).text().split('').map(function (char) {
return '<span>' + char + '</span>'; //让每字符被span元素包裹
}).join('');
}).find('span')
.filter(function (index) {
return index > 6
}).css('color', '#009A63').end() //让后面几个字符变为绿色
.css({
position: 'absolute',
left: function (index) {
return index * 20; //设置字符的间隔
}
})
.velocity('custom', { //调用自定义的动画指令
stagger: 300,
delay: 1000,
})
})
</script>
</body>
</html>。 
最後に
アニメーションによる内部の速度 パフォーマンスの点で最適化されているため、パフォーマンスはjqueryのアニメーションよりも優れており、CSSのトランジションよりもさらに優れています。もちろん、私はこれをテストしていませんが、テストすることができます。それ。
この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
ライブブロードキャストプラットフォームのナビゲーションを作成するためのjquery+css3以上がveloticy-ui を使用してテキストアニメーションを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1663
14
1420
52
1313
25
1266
29
1239
24
pptで丸い写真とテキストを作成する方法
Mar 26, 2024 am 10:23 AM
まず、PPT で円を描き、テキスト ボックスを挿入してテキストの内容を入力します。最後に、テキストボックスの塗りつぶしと輪郭を「なし」に設定すれば、円形の絵と文字の制作が完了です。
Wordでテキストにドットを追加するにはどうすればよいですか?
Mar 19, 2024 pm 08:04 PM
日常的に Word 文書を作成するとき、特にテスト問題がある場合、文書内の特定の単語の下にドットを追加する必要があることがあります。コンテンツのこの部分を強調するために、エディターが Word でテキストにドットを追加する方法のヒントを共有します。 1. 空白の Word 文書を開きます。 2. たとえば、「テキストにドットを追加する方法」という単語の下にドットを追加します。 3. まず、マウスの左ボタンで「テキストにドットを追加する方法」という単語を選択します。将来その単語にドットを追加したい場合は、まずマウスの左ボタンを使用して単語を選択する必要があることに注意してください。 。今日はこれらの単語に点を追加するので、いくつかの単語を選択しました。これらの単語を選択して右クリックし、ポップアップ機能ボックスで [フォント] をクリックします。 4. するとこのようなものが表示されます
Python を使用して 2 つの日付の間で k 個のランダムな日付を生成するにはどうすればよいですか?
Sep 09, 2023 pm 08:17 PM
ランダム データの生成は、データ サイエンスの分野において非常に重要です。ニューラル ネットワークの予測や株式市場データなどの構築では、通常、日付がパラメーターの 1 つとして使用されます。統計分析のために 2 つの日付の間で乱数を生成する必要がある場合があります。この記事では、random モジュールと datetime モジュールを使用して、指定された 2 つの日付の間で k 個のランダムな日付を生成する方法を示します。Datetime は、時刻を処理するための Python の組み込みライブラリです。一方、random モジュールは乱数の生成に役立ちます。したがって、random モジュールと datetime モジュールを組み合わせて、2 つの日付の間のランダムな日付を生成できます。構文random.randint (start, end, k) ここでのrandomは、Pythonのランダムライブラリを指します。 randint メソッドでは 3 つの重要なメソッドを使用します。
Golang 画像処理: 透かしとテキストを追加する方法を学ぶ
Aug 17, 2023 am 08:41 AM
Golang 画像処理: 透かしとテキストの引用を追加する方法を学ぶ: デジタル化とソーシャル メディアの現代において、画像処理は重要なスキルとなっています。個人使用であろうとビジネス運営であろうと、透かしやテキストの追加は一般的なニーズです。この記事では、画像処理に Golang を使用する方法を検討し、透かしとテキストを追加する方法を学びます。背景: Golang は、簡潔な構文、効率的なパフォーマンス、強力な同時実行機能で知られるオープンソース プログラミング言語です。それは多くの発展の主題となっています
写真上のテキストを変更する方法
Aug 29, 2023 am 10:29 AM
画像上のテキストの変更は、画像編集ソフトウェア、オンライン ツール、またはスクリーンショット ツールを使用して行うことができます。具体的な手順は次のとおりです: 1. 画像編集ソフトウェアを開き、変更する必要がある画像をインポートします; 2. テキスト ツールを選択します; 3. 画像上のテキスト領域をクリックしてテキスト ボックスを作成します; 4. テキストを入力します。 5. 画像上のテキストを削除するだけの場合は、消しゴムツールまたは選択ツールを使用してテキスト領域を選択して削除できます。
PHP を使用して更新可能なイメージ検証コードを生成する方法
Sep 13, 2023 am 11:54 AM
PHP を使用して更新可能な画像検証コードを生成する方法 インターネットの発展に伴い、悪意のある攻撃や機械の自動動作を防ぐために、多くの Web サイトでユーザー認証に検証コードが使用されています。確認コードの一般的なタイプの 1 つは画像確認コードです。これは、ランダムな文字を含む画像を生成し、続行する前にユーザーに正しい文字を入力するように要求します。この記事では、PHP を使用して更新可能なイメージ検証コードを生成する方法を紹介し、具体的なコード例を示します。ステップ 1: 確認コード イメージを作成する まず、確認コード イメージを作成する必要があります。
Python で pyWaffle を使用してワッフル チャートを生成する
Aug 17, 2023 am 11:49 AM
データの視覚化は、情報を効率的に理解してプレゼンテーションするために不可欠です。利用可能な多くのチャート タイプの中でも、ワッフル チャートは、正方形のタイルを使用したグリッド状の構造でデータを表示する新しい方法です。強力な Python モジュール PyWaffle を使用すると、多くの計算およびデータ分析手法と同様に、ワッフル チャートの開発が容易になります。この記事では、洗練された Python モジュール PyWaffle を使用してワッフル チャートを作成する方法を見ていきます。 PyWafle をインストールし、それを使用してカテゴリデータを視覚化する方法を見てみましょう。 cmd で次のコマンドを実行してライブラリをインストールし、それをコードにインポートします。pipinstallpywaffleExample1 の中国語訳は次のとおりです。例 1 この例では、
PHP を使用して基本的な自然言語生成を行う方法
Jun 22, 2023 am 11:05 AM
自然言語生成は、データを自然言語テキストに変換する人工知能テクノロジーです。今日のビッグデータ時代では、データを視覚化したり、ユーザーに提示したりする必要がある企業がますます増えており、自然言語生成は非常に効果的な方法です。 PHP は、Web アプリケーションの開発に使用できる非常に人気のあるサーバー側スクリプト言語です。この記事では、PHP を使用して基本的な自然言語を生成する方法を簡単に紹介します。自然言語生成ライブラリの紹介 PHPに付属している関数ライブラリには自然言語生成に必要な関数が含まれていないため、
