So verwenden Sie Veloticy-UI zum Generieren von Textanimationen

Dieses Mal zeige ich Ihnen, wie Sie Veloticy-UI zum Generieren von Textanimationen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Veloticy-UI zum Generieren von Textanimationen gelten. Hier ist ein praktischer Fall sehen.

Vorwort

Vor kurzem habe ich die Animationsbibliothek „Velocity-UI“ verwendet Gefühl ist Es ist einfach zu verwenden, hat eine kleine Menge Code und bietet eine hervorragende Leistung. Hier finden Sie eine kurze Einführung in die Verwendung und Implementierung einer gut aussehenden Animation kann hier klicken

Grundlegende VerwendungUm Velocity-UI zu verwenden, müssen Sie zuerst Velocity einführen, wobei Velocity Kann von jquery abhängen oder nicht. Schauen Sie sich einfach die Details unten an. Es ist ersichtlich, dass die grundlegende Verwendung von Velocity dem Zweck von jquerys Animation entspricht 🎜>

dient dazu, einige definierte Animationen (Anweisungen) bereitzustellen. Es gibt eine Animationsbibliothek wie Animate.css, die jedoch

eine detailliertere Steuerung ermöglichen kann,

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

Grundlegende Konfigurationselemente

Es ist ersichtlich, dass Velocity auch quequ festlegen kann, die Verwendung mit animate übereinstimmt und Velocity selbst einige Anweisungen zum Implementieren von Animationen bereitstellt, einschließlich FadeIn/ fadeOut, slideUp/slideDown, scroll, Finish, Reverse, außerdem hat Velocity Unterstützung für Attributanimationen wie Transform und Color implementiert und unterstützt SVG und Promise. Informationen zur spezifischen Verwendung finden Sie im oben verlinkten 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)

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

Zusätzlich zu Zusätzlich zu den beiden oben genannten Funktionen werden auch drei zusätzliche Optionsattribute bereitgestellt.

Stagger ermöglicht es dem Sammlungsobjekt, die Ausführung von Animationen für einen bestimmten Zeitraum zu verschieben.

Ziehen ermöglicht das letzte Element der Sammlung Der Effekt

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

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 ein einfaches zu implementieren Textanimation

Benutzerdefinierte Animation

Nachdem Sie einige Zeichen entfernt haben, können Sie sehen, dass Sie zum Implementieren einer scheinbar komplexen Animation nur einfach festlegen müssen Die Werte der Aufrufe und Staffelungsattribute, dieses GIF spielt die Animation in einer Schleife ab. Tatsächlich wird diese Animation nur einmal ausgeführt. Sie können darüber nachdenken, wie Sie die Schleife der gesamten Warteschlange realisieren können >

<!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>

Endlich

Velocity hat die Animation intern optimiert, sodass die Leistung besser ist als die von Jquery und sogar besser als der Übergang von CSS das, aber Sie können es testen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

jquery+css3 zur Navigation für die Live-Übertragungsplattform

Implementierung von mausresponsivem Taobao Animationseffekt

So erstellen Sie mit jquery einen Lupeneffekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Veloticy-UI zum Generieren von Textanimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!