Comment utiliser Veloticy-ui pour générer une animation de texte

Cette fois, je vais vous montrer comment utiliser veoticy-ui pour générer une animation de texte, et quelles sont les précautions pour utiliser veoticy-ui pour générer une animation de texte Voici un cas pratique, prenons un. regarder.

Préface

Récemment, je souhaite obtenir un effet similaire aux lignes ondulées du texte. J'ai utilisé la bibliothèque d'animation Velocity-ui en premier. le sentiment est qu'il est simple à utiliser, contient une petite quantité de code et offre d'excellentes performances. Voici une brève introduction sur la façon de l'utiliser et de mettre en œuvre une belle animation

Pour les méthodes d'utilisation spécifiques, vous. pouvez cliquer ici

Utilisation de base

Pour utiliser Velocity-ui, vous devez d'abord introduire la vélocité, où la vélocité peut dépendre de jquery ou non. Il suffit de regarder les détails ci-dessous

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

On peut voir que lors de l'utilisation de jquery, l'utilisation de base de la vitesse est comme l'animation de jquery. 🎜>

consiste à fournir des animations définies (instructions), il existe une bibliothèque d'animations comme Animate.css, mais elle peut fournir

un contrôle plus détaillé,

éléments de configuration de base

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

On peut voir que la vitesse peut également définir quequ, l'utilisation est cohérente avec l'animation, et la vitesse elle-même fournit des instructions pour implémenter l'animation, y compris fadeIn/ fadeOut, slideUp/slideDown,

scroll, finish , reverse, de plus, Velocity a implémenté la prise en charge des animations d'attributs telles que la transformation et la couleur, et prend en charge SVG et promise. Pour une utilisation spécifique, veuillez consulter le document lié ci-dessus. .

En plus de fournir plus d'instructions, Velocity-ui fournit également deux méthodes RunSequence et RegisterEffect (les non-jquery peuvent supprimer $. et remplacer jquery par du DOM natif)

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

En plus de les deux fonctions ci-dessus, 3 attributs d'options supplémentaires sont également fournis.

décaler permet à l'objet de collection d'échelonner l'exécution des animations pendant une période de temps

faire glisser permet le dernier élément de la collection. objet à mettre en tampon. L'effet

backwards permet à l'objet de collection d'échelonner l'exécution de l'animation pendant un certain temps à partir du dernier élément vers l'avant

Utilisons RegisterEffect et décaler pour implémenter un simple animation de texte

Animation personnalisée

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

Après avoir supprimé certains caractères, vous constatez que pour implémenter une animation apparemment complexe, il suffit simplement de définir les valeurs des appels et les attributs d'échelonnement. , ce gif joue l'animation en boucle. En fait, cette animation n'est exécutée qu'une seule fois. Vous pouvez réfléchir à la façon de réaliser la boucle de toute la file d'attente

Enfin Velocity a optimisé l'animation en interne, donc ses performances sont meilleures que l'animate de jquery, et encore meilleures que la transition css Bien sûr, je n'ai pas testé. ceci, mais vous pouvez le tester.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

jquery+css3 pour effectuer la navigation pour la plateforme de diffusion en direct

Implémentation de Taobao réactif à la souris effet d'animation

Comment utiliser jquery pour créer un effet de loupe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!