Maison > Article > interface Web > veoticy-ui implémente des effets d'animation de texte

veoticy-ui implémente des effets d'animation de texte

亚连original: 2018-06-06 17:43:491474parcourir

Cet article présente principalement l'utilisation de veoticy-ui pour générer des effets d'animation de texte et les méthodes d'utilisation de base. Les amis dans le besoin peuvent s'y référer

Avant-propos<.>

Récemment, je souhaite obtenir un effet similaire aux lignes ondulées du texte. J'ai utilisé la bibliothèque d'animation Velocity-ui. Le premier sentiment est qu'elle est facile à utiliser, qu'elle contient une petite quantité de code et qu'elle offre d'excellentes performances. . Ici, je vais brièvement présenter comment l'utiliser et implémenter une belle animation.

Pour une utilisation spécifique, vous pouvez cliquer ici

Utilisation de base.

Pour utiliser Velocity-ui, vous devez d'abord introduire la vitesse, où la vitesse 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 Introduction Le

but de Velocity-ui est de fournir des animations définies (commandes), qui ressemblent un peu à des bibliothèques d'animation comme Animate.css, mais. 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 set quequ, l'utilisation est cohérente avec animer, et la vitesse elle-même fournit quelques instructions. Pour réaliser l'animation, il existe fadeIn/fadeOut, slideUp/slideDown,

scroll, finish, reverse De plus, la vitesse implémente la prise en charge de l'attribut. des animations telles que la transformation et la couleur, et prend en charge SVG et promise. Une utilisation spécifique peut être voir la documentation liée 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 Pour 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(&#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>

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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée de la séparation et de la combinaison de vue-admin et backend (flask)

Comment implémenter timed se cacher dans la boîte de dialogue jQuery

Comment implémenter la navigation Panda TV à l'aide de jquery+css3

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la couche contextuelle jquery layur dans des projets réelsArticle suivant：Comment utiliser la couche contextuelle jquery layur dans des projets réels

Articles Liés

Voir plus