Heim > Artikel > Web-Frontend > veloticy-ui implementiert Textanimationseffekte

veloticy-ui implementiert Textanimationseffekte

亚连Original: 2018-06-06 17:43:491474Durchsuche

In diesem Artikel werden hauptsächlich die Verwendung von Veloticy-UI zum Generieren von Textanimationseffekten und grundlegende Verwendungsmethoden vorgestellt

Vorwort

Vor Kurzem möchte ich die Animationsbibliothek „Velocity-UI“ verwenden, um einen ähnlichen Effekt zu erzielen. Das erste Gefühl ist, dass sie einfach zu verwenden ist, wenig Code enthält und eine hervorragende Leistung aufweist . Hier werde ich kurz die Verwendung vorstellen und eine schöne Animation implementieren.

Für eine spezifische Verwendung können Sie hier klicken

Grundlegende Verwendung

Um Velocity-UI zu verwenden, müssen Sie zuerst Velocity einführen, wobei Velocity von Jquery abhängen kann oder nicht. Schauen Sie sich einfach die Details unten an

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

Das sieht man bei der Verwendung jquery, die grundlegende Verwendung von Velocity ähnelt jquerys animate. Der Zweck von ui's

besteht darin, einige definierte Animationen (Befehle) bereitzustellen, die ein wenig wie Animationsbibliotheken wie Animate.css sind, aber bereitgestellt werden können

detailliertere Steuerung,

Grundlegende Konfigurationselemente

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

Es ist ersichtlich, dass die Geschwindigkeit auch quequ einstellen kann Die Verwendung stimmt mit animate überein, und Velocity selbst bietet einige Anweisungen zum Implementieren von Animationen. Es gibt fadeIn/fadeOut, slideUp/slideDown,

scrollen, beenden, umkehren. Darüber hinaus implementiert Velocity die Unterstützung für Attributanimationen wie Transform und Farbe und unterstützt SVG und Promise. Informationen zur spezifischen Verwendung finden Sie im obigen Dokument.

Velocity-ui bietet nicht nur weitere Anweisungen, sondern auch zwei Methoden: RunSequence und RegisterEffect (Nicht-JQuery kann $. entfernen und JQuery durch natives DOM ersetzen)

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

Zusätzlich zu die oben genannten Zusätzlich zu den beiden Funktionen bietet es auch drei zusätzliche Optionsattribute

Stagger kann das Sammlungsobjekt dazu bringen, die Animation für einen bestimmten Zeitraum zu verschieben

Ziehen kann das letzte Element der erstellen Sammlungsobjekte haben einen Puffereffekt

Rückwärts ermöglicht es dem Sammlungsobjekt, die Ausführung der Animation für einen bestimmten Zeitraum vom letzten Element an zu verschieben

Verwenden wir RegisterEffect und Stagger, um einen einfachen Text zu implementieren Animation

Um eine benutzerdefinierte Animation zu implementieren

<!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(&#39;custom&#39;, {//注册一个叫&#39;custom&#39;自定义动画
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: &#39;-=15&#39;,
  }, 0.5],
  [{
  translateY: &#39;+=15&#39;,
  }, 0.5]
 ], 
 })
 $(&#39;#J_Text&#39;).css({
 fontSize: 40,
 color: &#39;#333&#39;,
 }) .html(function () {
  return $(this).text().split(&#39;&#39;).map(function (char) {
 return &#39;<span>&#39; + char + &#39;</span>&#39;; //让每字符被span元素包裹
 }).join(&#39;&#39;);
 }).find(&#39;span&#39;)
 .filter(function (index) {
 return index > 6
 }).css(&#39;color&#39;, &#39;#009A63&#39;).end() //让后面几个字符变为绿色
 .css({
 position: &#39;absolute&#39;,
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity(&#39;custom&#39;, { //调用自定义的动画指令
 stagger: 300,
 delay: 1000, 
 })
 })
 </script>
</body>
</html>

Wenn Sie einige Charaktere entfernen, sehen Sie, dass Sie zum Erzielen einer scheinbar komplexen Animation nur einfach festlegen müssen Dieses GIF wird in einer Schleife abgespielt. Tatsächlich wird diese Animation nur einmal ausgeführt. Sie können darüber nachdenken, wie Sie die Schleife der gesamten Warteschlange erreichen können

EndlichVelocity Aufgrund der internen Optimierung der Animation ist die Leistung besser als die von jquery und sogar besser als der von CSS. Natürlich habe ich es nicht getestet Das können Sie testen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Interpretation der Trennung und Kombination von Vue-Administrator und Backend (Flask)

So implementieren Sie zeitgesteuert im jQuery-Dialogfeld verstecken

So implementieren Sie die Panda-TV-Navigation mit jquery+css3

Das obige ist der detaillierte Inhalt vonveloticy-ui implementiert Textanimationseffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die JQuery-Layur-Popup-Ebene in tatsächlichen ProjektenNächster Artikel：So verwenden Sie die JQuery-Layur-Popup-Ebene in tatsächlichen Projekten

In Verbindung stehende Artikel

Mehr sehen