Velocy-ui はテキストアニメーション効果を実装します

この記事では主に veloticy-ui を使ってテキストアニメーション効果を生成する方法と基本的な使用方法を紹介しますので、必要な方は参考にしてください

はじめに

最近、テキストの波状のような効果を実現したいと思っています。ライン、速度を使用 - ui アニメーション ライブラリの第一印象は、使いやすく、コード量が少なく、パフォーマンスが優れているということです。ここでは、その使い方と見栄えの良いアニメーションの実装方法を簡単に紹介します。

具体的な使用方法については、ここをクリックしてください

基本的な使い方

Velocity-ui を使用するには、まず Velocity を導入する必要があります。以下の詳細を参照してください。

jquery を使用する場合、速度の基本的な使用法は jquery の animate と同様に、定義されたアニメーション (命令) を提供することであることがわかります。Animate.css のようなアニメーション ライブラリがありますが、それらは提供できます。より詳細な制御、

基本的な設定項目

//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
 opacity: 0.5
}, {
 duration: 1000
});
// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
 opacity: 0.5
}, {
 duration: 1000
});

Velocity も quequ を設定できることがわかり、使用方法は animate と一貫しており、Velocity 自体は、fadeIn/fadeOut、slideUp などのアニメーションを実装するためのいくつかの命令を提供します。 /slideDown, scroll,finish,reverse , さらに、Velocity は、transform や color などの属性アニメーションのサポートを実装しており、SVG と Promise をサポートしています。具体的な使用法については、上記のリンク先のドキュメントを参照してください。 velocity-ui より多くの命令を提供することに加えて、RunSequence と RegisterEffect の 2 つのメソッドも提供します (非 jquery は $. を削除し、jquery をネイティブ DOM に置き換えることができます)

$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) {}//对集合对象可以设置不同的属性值

上記 2 つの関数に加えて、3 つのメソッドも提供します追加のオプション属性

stagger を使用すると、コレクション オブジェクトが一定期間アニメーションをずらすことができます

drag を使用すると、コレクション オブジェクトの最後の要素にバッファリング効果を与えることができます

backwards を使用すると、コレクション オブジェクトを一定期間前方にずらすことができます最後の要素 アニメーションを実行します

RegisterEffect と stagger を使用して、単純なテキスト アニメーションを実装しましょう

カスタム アニメーションを実装するには

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
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 }
});

いくつかのキャラクター操作を削除すると、一見複雑なアニメーションを実装するために必要なのは単純に呼び出しを設定するには、stagger 属性の値で十分です。実際、このアニメーションは 1 回だけ実行されます

。 最後に

アニメーションによる内部の速度 パフォーマンスの点で最適化されているため、パフォーマンスはjqueryのアニメーションよりも優れており、CSSのトランジションよりもさらに優れています。もちろん、私はこれをテストしていませんが、テストすることができます。それ。 上記は私があなたのためにまとめたものです。 関連記事:

vue-adminとバックエンド(flask)の分離と組み合わせの詳細な解釈

jQueryで時限非表示ダイアログボックスを実装する方法

jquery+を使用してパンダTVナビゲーションを実装する方法css3

以上がVelocy-ui はテキストアニメーション効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。